Thornton Family Dentistry & Orthodontics
Brand system
Every colour, type size, control and surface used across this site, on one page. The tokens below are frozen in brand-tokens.json and defined once in app/globals.css; interaction behaviour comes from app/kit.css.
Voice: warm, plainspoken and family-first. Headings say what is true and where it happens. The brand line “Where Your Family Gets Treated by Ours” is supporting copy — it never replaces a ranking heading.
Tokens
Colour
Taken from the live site and extended only where an accessible pair was missing. Contrast ratios are measured against the surface each value actually sits on.
Brand
--color-primary
#d49826
Buttons, brand gold from the logo
--color-primary-deep
#a9761a
Pressed edge and hover
--color-primary-soft
#f9efd9
Gold tints and badges
--color-on-primary
#1c1508
Text on gold (7.2:1)
--color-secondary
#68ccd1
Aqua rules and tints
--color-secondary-deep
#15666b
Aqua text (6.4:1)
--color-secondary-soft
#eaf8f9
Aqua badge ground
--color-accent
#7e4f9f
Links, logo purple (6.0:1)
--color-accent-deep
#633c7d
Link hover, errors
--color-accent-soft
#f2ecf7
Purple badge ground
Ink, paper and line
--color-ink
#000000
Body and heading text
--color-ink-soft
#4b4b4b
Secondary copy (8.7:1)
--color-ink-mute
#6b6b6b
Eyebrows, captions (5.3:1)
--color-paper
#ffffff
Page and card ground
--color-paper-2
#faf6ef
Alternating bands, footer
--color-paper-3
#f2ece1
Deeper band, inset panels
--color-line
#e4ddd0
Default borders
--color-line-strong
#c9bda6
Hover and focus borders
--color-copper
#9a6c19
Keeden preview shell accent
Gold carries near-black text, never white.
White on #d49826 measures 2.5:1 and fails. #1c1508 measures 7.2:1.
Purple carries white text at 6.0:1.
It is the link colour on paper and the outline colour for secondary buttons.
Tokens
Typography
One family for headings and body, matching the practice's Muli. Headings balance their last line so no single word is left alone.
--text-5xl
Display / page H1
Gentle care for the whole family
--text-4xl
Section H2
Gentle care for the whole family
--text-3xl
Sub-section
Gentle care for the whole family
--text-2xl
Card title / H3
Gentle care for the whole family
--text-xl
Lead-in
Gentle care for the whole family
--text-lg
Intro paragraph
Gentle care for the whole family
--text-base
Body
Gentle care for the whole family
--text-sm
Meta, hours, captions
Gentle care for the whole family
--text-xs
Eyebrow, badge
Gentle care for the whole family
--text-2xs
Legal, fine print
Gentle care for the whole family
Measure — .measure (68ch)
Most insurances accepted, including 100% Medicaid & CHP+ coverage. Body copy sits in a 60–75 character measure and is left-aligned, never centred, so the eye returns to a predictable place on every line.
Weights
400 — body copy
500 — emphasis
600 — labels and nav
800 — headings and buttons
Tokens
Spacing, radius, elevation and motion
Four small scales. Anything not on a scale is a one-off and needs a reason.
Spacing
--spacing-gutter
1.25rem
--spacing-section
4.5rem
--spacing-section-lg
6.5rem
Radius
0.25rem
0.5rem
1rem
999px
Elevation
--shadow-sm
0 1px 2px rgba(0,0,0,.06)
--shadow-md
0 6px 18px rgba(0,0,0,.08)
--shadow-lg
0 16px 40px rgba(28,21,8,.14)
Motion
- --ease-brand
- cubic-bezier(.22, 1, .36, 1)
- Entrances, reveals
- --ease-exit
- cubic-bezier(.4, 0, 1, 1)
- Dismissals
- --dur-fast
- 120ms
- Press, colour change
- --dur-base
- 220ms
- Sweep, card lift
- --dur-slow
- 500ms
- Image reveal
Components
Buttons
Primary is the kit's dimensional press — it is reserved for the call and the appointment request. Secondary is the purple outline. Ghost is the quiet third option.
Primary — .kit-press
Secondary — accent outline
Ghost — .kit-sweep
Hover, focus-visible, touch targets and reduced-motion all come from the kit. No component redefines them.
Components
Badges
Short, factual labels. A badge may only state something the evidence already supports.
Components
Cards
Equal height, items-stretch, CTA pinned with mt-auto. Each body is written within about 15% of its siblings so a row never breaks.
Equal height
Cards in a row stretch to the tallest sibling. The brand edge grows down the left on hover; the lift is measured, not bouncy.
Capped body copy
Detail belongs on the service page, not in the grid. Long lists become compact chips with a count so no column stretches the row.
Pinned call to action
Every card ends with one action on the same baseline, so the row reads as a set rather than three unrelated blocks.
Assets
Logo and imagery
The practice's own logo and photography only. Images sit in a contained frame that scales the picture inside a fixed edge — never a full-bleed blur behind text.
Logo — on paper
Logo — on the warm band
Components
Form fields
Labels sit above the control, hints and errors are tied to it with aria-describedby, and every control clears a 48px touch target. This specimen posts to the relative path /api/lead.
Chrome
Header and footer
Both are rendered by the root layout and are live on this page — scroll to the top and the bottom to see them.
- Header: logo, desktop navigation across the real architecture, both office numbers as tel: links, a gold call button that keeps 303-254-8828 visible at 390px, an appointment request leading to /wizard, and a mobile menu that opens, scrolls and closes.
- Footer: brand line, insurance note, full navigation including planned preview routes, both addresses with map links, both phone numbers, both email addresses and the opening hours for each office.
- Mobile: .kit-sticky-call pins a call control to the bottom of the viewport, reachable without scrolling.