Service 01
General Dentistry
Routine cleanings, x-rays and the everyday care that keeps a family's teeth healthy.
Brand system
The design system for David Keck, DDS
Every colour, size, radius and motion value on this page is frozen in brand-tokens.json and consumed by app/globals.css. Nothing downstream may introduce a value that is not shown here.
Voice: Warm, plain-spoken, small-town dentistry. Unhurried and reassuring rather than clinical, phone-first in every hierarchy, and never overstated: say what the office does, who it treats and how to reach it — and claim nothing the evidence cannot show.
Tokens
Colour
Built from the palette extracted from davidkeckdds.com. The live brand blue leads the identity; the deepened steps of the same hue carry anything that has to be readable at 14px.
Surface
Their background is plain white; the two tints are drawn from their pale house colours.
- #ffffff--color-paperPage background
- #f5f9fb--color-paper-2Alternating bands, footer
- #e9f1f4--color-paper-3Inset panels, specimen wells
Ink
A blue-black rather than a neutral grey, so type sits in the same family as the brand blue.
- #0b1519--color-inkHeadings, 17:1 on paper
- #1e3038--color-ink-bodyBody copy, 10.8:1
- #4a5f6a--color-ink-softSecondary copy, 6.6:1
Brand
Their extracted blue leads. It is 3.7:1 on white, so it carries edges and chips — the deepened tones carry text and fills.
- #558ab2--color-brandRules, card edge, icons, chips
- #3f7396--color-brand-strongButtons, links, focus ring
- #2f5c79--color-brand-deepPressed edge, eyebrows
- #dce9f1--color-brand-softBadge fill, selection
House tints
The two soft colours read straight off their live site, plus a lighter step of each for large fields.
- #abcacf--color-aquaAccent band, dividers
- #e6f0f1--color-aqua-softLarge tinted fields
- #aac5d9--color-skySecondary accent
- #e8eff6--color-sky-softSecondary button hover
Structure and state
Borders, the button foreground, the error tone and the Keeden shell accent.
- #dbe6ed--color-lineDefault border
- #b7cbda--color-line-strongInputs, hover border
- #ffffff--color-on-brandText on brand fills
- #9a2f2f--color-dangerField errors, required mark
- #b65c1d--color-copperKeeden preview shell only
Tokens
Typography
One family throughout, matching the Assistant face on their live site. Headings balance their last line, body copy holds a 60–75 character measure and is never centred.
- text-displayNow accepting new patientsHero H1 only
- text-4xlOur dental servicesPage titles
- text-3xlContact the officeSection headings
- text-2xlGeneral dentistrySub-headings
- text-xlCard titles sit hereCard titles
- text-lgA warm and caring environment.Lead paragraphs
- text-baseFrom your routine cleaning to x-rays and more.Body copy
- text-smMon – Thu 8:30 am – 5:00 pmMeta, captions
- text-xsSeminole, OklahomaEyebrows, labels
Font stack: Assistant, "Segoe UI", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif. The build runs offline, so the face is requested locally and falls back through the platform humanist sans — never a remote stylesheet.
Tokens
Spacing, radius, elevation and motion
Four small scales. Bands share one vertical rhythm, cards share one corner, and every transition uses the same easing curve.
Spacing
- --spacingUtility step0.25rem
- --space-gutterShell paddingclamp(1rem, 0.55rem + 2vw, 2rem)
- --space-sectionBand rhythmclamp(3.25rem, 2.2rem + 3.4vw, 5.5rem)
- --space-shellContent max width72rem
Radius
- --radius-sm8px
- --radius / --radius-md12px
- --radius-lg18px
- --radius-pill999px
Elevation
- --shadow-cardResting cards
- --shadow-liftHover lift (kit)
- --shadow-panelMobile menu, overlays
Motion
- --duration-fast120msColour and border changes
- --duration-base220msUnderline sweep, card edge
- --duration-slow500msPhotography reveal
- --ease-brandcubic-bezier(.22, 1, .36, 1)Every brand easing
Behaviour is composed from app/kit.css — press, sweep, advance, card edge, reveal and the mobile call bar. Focus rings and reduced-motion are handled there, so no component restates them.
Components
Cards
Equal-height cards in a stretched row. Each body is capped within about 15% of its siblings and every call to action is pinned to the bottom edge, so a row stays level whatever the copy does.
Service 02
Pedodontics
Dental care shaped around children, in a calm room and at an unhurried pace.Service 03
Prosthodontics
Replacing and restoring teeth so a smile looks and works the way it should.
With photography
A card may carry an approved image
Only first-party images under /public are used. Remote sources are never referenced, because the build runs with no network.Visit
The office
1900 W Wrangler Blvd, Seminole, OK 74868Mon – Thu8:30 am – 5:00 pmFriday8:30 am – 4:00 pm
Components
Form fields
Labels sit above their control, hints and errors are tied to it by aria-describedby, and every field inherits the brand type. Submissions post to the relative path /api/lead.
Components
Section headings
Eyebrow, heading, short lead. The centred variant is reserved for short leads; anything longer stays left so the measure holds.
Left, default
Now accepting new patients
Used for every content band. The lead paragraph holds a 68-character measure regardless of how wide the column is.
Centred
Contact the office
Short leads only.