name: cedar-design
version: alpha
description: >
  A warm, mid-century-modern primary-care site set on a cream paper surface
  (#F4ECDD) with a calm teal (#2E8B86) as the lead voltage and a terracotta
  (#C5552E) accent plus a marigold (#E0A93B) tertiary. The signature moves are
  hard 2px ink outlines (#2b2b2b) with offset block shadows on every surface,
  Fraunces serif display set tight against a Mulish body, and atomic-age
  decorations — orbit ellipses, starbursts, boomerang blobs, and ✦ sparkles that
  slowly spin. Geometry is barely-rounded (2–6px) so cards read like printed
  cards, and section dividers, ruled inputs, and a prescription-card contact
  panel push the retail-clinic, retro-print feel.
colors:
  # Surface
  paper: '#F4ECDD'        # page background, light cards, button text on color
  # Brand / Voltages
  teal: '#2E8B86'         # primary brand: headings, logo, primary buttons, teal cards
  teal-deep: '#1F5E5A'    # deepest teal, used only as the contact card offset shadow
  terracotta: '#C5552E'   # accent: eyebrows, links, sparkles, scroll bar, focus, CTA button
  marigold: '#E0A93B'     # tertiary: warm section backgrounds, boomerang, accent cards
  # Text
  ink: '#2b2b2b'          # default body text + all hairline outlines/shadows
  brown: '#5a4f3c'        # muted body copy on paper
  brown-deep: '#3c3528'   # body copy on marigold/light tiles
  on-teal: '#dbeae8'      # muted body copy on teal surfaces
  # Hairlines
  outline: '#2b2b2b'      # 2px borders everywhere (== ink)
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -0.01em   # tracking-tight
  h2:
    fontFamily: "'Fraunces', serif"
    fontSize: 48px
    fontWeight: 700
    letterSpacing: -0.01em
  h3:
    fontFamily: "'Fraunces', serif"
    fontSize: 24px
    fontWeight: 700
  eyebrow:
    fontFamily: "'Mulish', sans-serif"
    fontSize: 12px
    fontWeight: 700
    letterSpacing: 0.2em
    textTransform: uppercase
  body:
    fontFamily: "'Mulish', sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.625        # leading-relaxed
  label:
    fontFamily: "'Mulish', sans-serif"
    fontSize: 13px
    fontWeight: 700
    letterSpacing: 0.025em
    textTransform: uppercase
rounded:
  xs: 2px      # nav CTA
  sm: 3px      # primary buttons
  md: 4px      # service tiles
  lg: 6px      # hero photo frame, contact card
  card: 16px   # doctor cards (top corners only, bottom square)
  full: 9999px # dots, sparkle nodes
spacing:        # 4px base unit; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 56px     # section vertical rhythm (py-14)
components:
  navCta:
    backgroundColor: '{colors.teal}'
    textColor: '{colors.paper}'
    typography: '{typography.label}'
    border: '2px solid {colors.outline}'
    rounded: '{rounded.xs}'
    padding: '10px 20px'
    shadow: '3px 3px 0 {colors.ink}'   # collapses to 1px 1px on hover
  primaryButton:
    backgroundColor: '{colors.teal}'
    textColor: '{colors.paper}'
    typography: '{typography.body}'    # font-700
    border: '2px solid {colors.outline}'
    rounded: '{rounded.sm}'
    padding: '14px 28px'
    shadow: '4px 4px 0 {colors.ink}'   # collapses + translates on hover
  formButton:
    backgroundColor: '{colors.terracotta}'
    textColor: '{colors.paper}'
    border: '2px solid {colors.outline}'
    rounded: '{rounded.sm}'
    shadow: '4px 4px 0 {colors.ink}'
  serviceTile:
    backgroundColor: '{colors.marigold}'   # also teal / paper variants
    textColor: '{colors.ink}'
    typography: '{typography.h3}'
    border: '2px solid {colors.outline}'
    rounded: '{rounded.md}'
    padding: '28px'
    shadow: '5px 5px 0 {colors.ink}'
  doctorCard:
    backgroundColor: '{colors.paper}'
    border: '2px solid {colors.outline}'
    rounded: '{rounded.card}'           # rounded-t only, square bottom
    shadow: '4px 4px 0 {colors.ink}'
  contactCard:
    backgroundColor: '{colors.paper}'
    border: '2px solid {colors.outline}'
    rounded: '{rounded.lg}'
    shadow: '8px 8px 0 {colors.teal-deep}'   # rotated -1deg
  ruledInput:
    backgroundColor: transparent
    textColor: '{colors.ink}'
    border: '0 0 2px 0 solid {colors.outline}'  # bottom rule only
    focusBorderColor: '{colors.terracotta}'
motion:
  ambientOrbit: 'orbitslow — rotate 0→360deg, 18s linear infinite (sparkles, logo, tile orbit dots)'
  orbitDraw: 'hero orbit ellipses stroke-dashoffset draw-in, 1600ms, ease inOut(3), staggered 200ms (anime.js)'
  tileCascade: 'service tiles opacity 0→1 + translateY 30→0, 700ms ease out(3), stagger 120ms (anime.js)'
  tileHover: 'pointerenter rotate 3deg + translateY -6px (400ms); leave back to 0 (500ms) (anime.js)'
  buttonPress: 'hover collapses offset shadow (4→1px) and translates element toward shadow'
  scrollBar: 'fixed top progress bar width = scroll fraction, set via --scroll CSS var on scroll'
icons:
  library: Tabler icons (webfont)
  style: outline
  sizes: { service: 36px }   # text-4xl glyphs inside starburst badges
  color: '{colors.teal}'

Cedar Family Medicine

cedar-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Cedar is a warm, retro-print primary-care site built on a cream paper surface (#F4ECDD) that reads like aged cardstock. The lead voltage is a calm clinic teal (#2E8B86) carrying every heading, the logo, and the primary buttons; a terracotta (#C5552E) supplies the energy in eyebrows, links, the scroll bar, focus states, sparkles, and the form CTA; and a marigold (#E0A93B) warms whole sections and decorative blobs. The signature move is uniform: a 2px ink outline (#2b2b2b) plus a hard offset block shadow on every card, button, and panel — no soft shadows anywhere. Display type is Fraunces serif set bold and tracked tight (down to leading-[0.98] at 64px), paired with Mulish for body and all-caps 0.2em eyebrows. Atomic-age ornament runs throughout: slowly spinning ✦ sparkles, drawn-in orbit ellipses, starburst icon badges, a boomerang blob behind the hero photo, and a prescription "℞" watermark on the contact card. Corners stay barely rounded (2–6px) so everything feels printed, while the contact card tilts -1deg for a handmade touch.

Colors

Surface. One surface does most of the work: paper #F4ECDD is the page background, the fill of light cards and the contact card, and the label color on colored buttons.

Brand / Voltages. teal #2E8B86 is the primary — all headings, the logo wordmark, the nav and hero CTAs, and the teal service tile / contact section. terracotta #C5552E is the accent voltage: section eyebrows, text links, the fixed scroll-progress bar, input focus border, the spinning ✦ sparkles, the divider rule, and the form's submit button. marigold #E0A93B is tertiary — full-section backgrounds (Doctors, Resources), the hero boomerang shape, and several accent service tiles. teal-deep #1F5E5A appears once, as the offset shadow under the rotated contact card.

Text. ink #2b2b2b is default body and the strong label color. brown #5a4f3c is muted copy on paper; brown-deep #3c3528 is body copy on marigold and light tiles; on-teal #dbeae8 is muted copy on teal surfaces.

Hairlines. There is effectively one border color — outline #2b2b2b (same as ink) — used at 2px for every border, divider, and as the color of every block shadow.

Typography

Two Google Fonts: Fraunces (serif, optical-size axis, weights 400/600/700) for all display and headings, and Mulish (sans, 400–700) for body, eyebrows, labels, and nav. Fraunces is always set bold and tracked tight; Mulish carries wide-tracked uppercase eyebrows and labels. Both are open-source Google fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	64px (resp. text-5xl)	700	0.98	tight	Hero H1
h2	48px (lg:text-5xl)	700	—	tight	Section headings
h3	24px	700	—	—	Tile / card titles
eyebrow	12px	700	—	0.2em	Uppercase section labels
body	17px (15px in sections)	400	1.625	—	Paragraph copy
label	13px	700	—	0.025em	Uppercase form labels

Layout

4px base unit on Tailwind's scale; content is centered in a max-w-[1180px] column (contact narrows to 980px) with px-6 gutters. The page stacks: sticky nav (h-16) → split hero (58%_42% grid, text left, framed photo + boomerang right) → a decorative ruled divider SVG → a bento service grid (3 cols, auto-rows-[200px], with col-span-2 / row-span-2 tiles) → a marigold Doctors band with a horizontally-scrolling row of staggered figures riding a wave path → a 3-column Resources row separated by border-r-2 rules → a teal Contact section holding a tilted prescription card → a paper footer. Signature structural moves: full-bleed marigold section bands bounded by border-y-2, absolutely-positioned orbit SVGs and ✦ sparkles, and the bento mixing tile sizes. Whitespace is generous (py-14/py-16/py-20) and airy.

Elevation & Depth

Depth is entirely hard offset block shadows, never blur. Every surface gets a Npx Npx 0 #2b2b2b drop: nav CTA 3px, primary buttons 4px, service tiles 5px, hero photo 6px, doctor cards 4px, contact card 8px (in teal-deep). Buttons animate the shadow on hover — collapsing to 1px 1px 0 while the element translates toward it, simulating a press. The only "glass" touch is the nav's backdrop-blur-xs over a 95%-opacity paper background. No CSS box blur is used anywhere.

Shapes

Deliberately near-square: corners run 2px (nav CTA), 3px (buttons), 4px (service tiles), and 6px (hero photo, contact card), so surfaces read like printed cards rather than soft app UI. The exception is the doctor cards, which use rounded-t-[16px] with a square bottom (rounded-b-none) so they sit like flat-bottomed tickets on the wave. Pure circles (rounded-full) appear only as small decorative dots and orbit nodes. Decorative clip-paths add organic shapes: a boomerang blob behind the hero photo and starburst polygons behind the service icons.

Components

• Nav CTA — teal fill, paper label, 2px ink border, 2px radius, 3px 3px 0 ink shadow, label "Book Appointment".
• Primary button — teal fill, paper label (Mulish 700), 2px ink border, 3px radius, 4px 4px 0 ink shadow → collapses + translates on hover. Label "Book an appointment".
• Form button — same as primary but terracotta fill; label "Request appointment".
• Service tile — 2px ink border, 4px radius, 5px 5px 0 ink shadow, 28px padding; fill varies (marigold / teal / paper); each holds a starburst badge with a Tabler icon and an orbiting accent dot. Hover rotates +3deg, lifts -6px.
• Doctor card — paper fill, 2px ink border, rounded-t-[16px] square bottom, 4px 4px 0 ink shadow, sepia-tinted photo over a 2px divider; name in teal Fraunces with terracotta + marigold dots; muted Mulish role line.
• Contact card — paper fill, 2px ink border, 6px radius, 8px 8px 0 teal-deep shadow, rotated -1deg; topped by a terracotta dashed ruler strip and a giant translucent ℞ watermark.
• Ruled input — transparent, bottom-only 2px ink rule, no top/side borders; focus turns the rule terracotta; paired with an uppercase Mulish 700 label.
• Link — terracotta, underline decoration-2 underline-offset-4, hover → teal.
• Eyebrow — terracotta uppercase Mulish 700, 0.2em tracking, often with a short 1px rule beside it.

Motion

Driven by anime.js (esm.sh/animejs@4) plus one CSS keyframe. orbitslow spins decorative orbit rings, the logo, ✦ sparkles, and tile dots a full turn over 18s linear infinite (.ambient-orbit). On load, hero orbit ellipses draw in via stroke-dashoffset (1600ms, inOut(3), staggered 200ms), and service tiles cascade up (opacity + translateY, 700ms, out(3), 120ms stagger). Tile pointer-hover rotates +3deg and lifts -6px (400ms in / 500ms out). Buttons "press" on hover by collapsing their offset shadow and translating. A fixed top progress bar tracks scroll via a --scroll CSS variable.

Iconography

Tabler icons webfont, outline style, used inside starburst badges in the service tiles at roughly 36px (text-4xl) in teal — ti-stethoscope, ti-shield-heart, ti-vaccine, ti-activity-heartbeat. Beyond these, ornament is hand-built SVG/text: orbit ellipses, divider lines with circle nodes, the wave path under the doctors, and ✦ (Unicode sextile) sparkles. Icons are decorative-to-semantic (departments); no icons appear in body copy or nav.

Do's and Don'ts

• Do outline every surface with the 2px ink border and a hard offset block shadow in ink (use teal-deep only for the contact card).
• Do keep corners barely rounded (2–6px) and let only the doctor cards round their top.
• Do set headings in Fraunces 700, tracked tight; keep eyebrows/labels Mulish 700 uppercase at wide tracking.
• Do keep teal as the lead, terracotta as the spark, marigold as the warm fill, on the cream paper surface.
• Don't use soft/blurred drop shadows or large radii — it breaks the printed look.
• Don't introduce new hues; the palette is paper + teal + terracotta + marigold + ink only.
• Don't drop the atomic-age ornament (orbits, sparkles, starbursts, boomerang) — it's the brand's personality.

Known Gaps

• display 64px and h2 48px are the large lg: breakpoint values (base sizes are text-5xl/text-4xl); recorded the design-intent sizes.
• Body size noted as 17px (hero) though section copy uses 15px.
• letterSpacing for tracking-tight mapped to Tailwind's -0.01em; the HTML uses the class, not an explicit value.
• Tabler icon glyph size (36px) inferred from text-4xl; the webfont sizes by font-size, not an explicit px value.