Design system
Style Guide & Component Gallery
Every page of okrevive.com composes from the tokens and primitives on this page. Change a token in app/globals.css and the entire site restyles.
Foundations
Color roles
--color-primary #005b29
Practice green. 8.31:1 on white (AAA).
--color-primary-hover #07471f
Hover step. 10.88:1 on white.
--color-primary-active #06371a
Active step. 13.38:1 on white.
--color-accent #cfb11f
Brand gold. 2.08:1 on white, so decorative or on deep green only.
--color-accent-ink #6f5d10
Accessibility substitution: gold-toned text on light, 6.46:1.
--color-ink #111111
Body text. 18.88:1 on white.
--color-heading #103a24
Headings. 12.71:1 on white.
--color-muted #44544b
Secondary text. 8.03:1 on white.
--color-bg #ffffff
Page background.
--color-surface #eef6f7
Mist surface, a light tint of the pacific blue.
--color-secondary #1b9aaa
Pacific blue. 3.36:1 on white, so borders, icons, and large accents only.
--color-secondary-ink #11707c
Accessibility substitution: pacific blue text at body sizes, 5.78:1.
--color-surface-green #edf3ee
Soft sage surface.
--color-surface-deep #0d2e1c
Deep green band; white text 14.74:1, gold 6.99:1.
--color-border #5f6f65
Input borders. 5.32:1 UI contrast on white.
--color-error #a4262c
Error text/borders. 7.26:1 on white.
--color-success #0f5132
Success text. 9.36:1 on white.
Typographic scale
Display XL, Fraunces
Display, for section headings
Display small, for card headings
Lede paragraph, Pontano Sans at 19px with relaxed leading.
Body text, Pontano Sans 16px. The display face is Fraunces, a warm serif standing in for the Adobe-only adonis-web of the brand guide.
Small / caption text, 14px muted.
Radius & elevation
Brand
Photography rule: authentic in-clinic photos only, never stock. Gold appears as hairlines and small accents on deep green, never as text on light backgrounds.
Buttons
Hover, focus-visible, and active states are defined once on the Button primitive; focus rings are green on light surfaces and switch to white inside any .on-deep region.
Inputs
Helper text under the field.
Required fields are marked with an asterisk.
Enter a complete phone number.
Selections
Badges
Surfaces
Plain card
White surface with the card shadow.
Mist card
Pacific-blue-tinted surface for editorial content.
Sage card
Soft green surface for FAQ and reassurance blocks.
Deep card
Deep green conversion surface with gold accents.
Accordion (native disclosure)
Why a native details element?
Keyboard and screen reader support with zero JavaScript, and every answer stays in the served DOM.
Where is this used?
Every FAQ section on strategic pages.
Lists
Description list (hours)
- Monday
- 9:30am – 12:30pm, 3:00pm – 6:00pm
- Tuesday
- 9:30am – 12:30pm
- Wednesday
- 9:30am – 12:30pm, 3:00pm – 6:00pm
Testimonial card
Dr. Edwards is patient with little kids and will answer any questions you have. He is very professional but also takes time to know his patients on a personal level.
Navigations
The global header (sticky, with the mobile disclosure menu) and the deep-green footer are the other navigation primitives; both are visible on this page.
Feedback
Success message: request received.
Error message: something went wrong. Call us instead.
Motion
- Page-load reveal: hero content rises in once per load (.reveal utilities with staggered delays).
- Scroll reveals: cards, headings, and timeline items fade up as they enter the viewport. Applied at runtime, so nothing is hidden without JavaScript and content already on screen never flashes.
- Stat count-ups: trust metrics animate to their server-rendered values on first view (see Charts below).
- Hero collage: the homepage photos sway gently and can be dragged within a small radius.
- Micro-interactions: buttons lift on hover, cards deepen their shadow.
Every effect is disabled under prefers-reduced-motion, and no content or meaning depends on any of them.