Sierra

Warm-light canvas — a barely-warm ivory background paired with near-black ink #302e2d (the dominant reading layer at ~361 measured occurrences) and a softer warm gray #716f6c for de-emphasis. Structure is carried by a single warm-umber hairline #e4e0dc (~553 occurrences — the most frequent token on the page, doing all the bordering). The only chromatic accent is a deep forest green #006838, used sparingly (~8 occurrences) for CTAs and brand moments. Pure black #000000 appears only as a rare high-contrast background.

• Near-black ink #302e2d (weight 400/500) handling ~361 measured surface occurrences — the dominant reading layer on the ivory canvas
• Warm-umber hairline #e4e0dc is the single most frequent token (~553 occurrences) — every border, divider, and structural delimiter draws from it
• Warm gray #716f6c (~87 occurrences) for captions, metadata, and de-emphasized secondary text
• Forest green #006838 reserved for primary CTAs and brand moments only — single-digit surface area (~8 occurrences), never decorative fill
• Pure black #000000 (~31 occurrences) reserved for rare high-contrast inversion sections, never as the default body background

linear-gradient(130deg, rgb(141, 164, 111) 0%, rgb(74, 109, 78) 100%)
linear-gradient(131deg, rgb(61, 120, 182) 29.8%, rgb(3, 189, 245) 175.51%)
linear-gradient(160deg, rgb(218, 238, 255) -12.67%, rgb(255, 255, 255) 61.84%, rgb(218, 238, 255) 111.51%)

• Primary family: GT America (self-hosted Standard, preloaded woff2). Monospace companion: GT America Mono for code, labels, and tabular numerics. No third family.
• Weight ladder: 400 (reading + most display) / 500 (UI labels, emphasis, medium). Do not introduce 600/700 — Sierra's display authority comes from size and tracking, not heavy weight.
• Display tracking in px, not em: -0.38px at 38px, -0.44px at 44px, and -1.3px at the 65px hero — a constant optical correction that tightens as size grows.
• Type scale (observed): hero 65px/72px, display 44px/48px and 38px/46px, heading-2 24px/32px, body 16px/24px, small 14px/20px and 12px/16px.
• Heading line-height is tight at display sizes (72px on 65px hero ≈ 1.1; 48px on 44px ≈ 1.09); body sits at 24px on 16px (1.5) for comfortable reading.
• No italic for emphasis in UI — GT America Standard Italic is reserved for quoted editorial content. Emphasis shifts to weight 500 or the green accent.
• Body measure 45-65 ch at 16px; the page favors generous leading and short paragraphs over dense blocks.

• 4px base unit. Scale (observed): 4 / 8 / 12 / 16 / 24 / 32 / 40 / 44 / 48 / 56 / 64 / 80 px. The 8px and 32px steps dominate (114 and 90 occurrences).
• Bounded content rails: 336 / 484 / 508 / 576 / 580 px for narrow clusters; primary page container caps at 1160px (do not exceed).
• Section vertical rhythm leans on 80px (the most frequent large step, ~22 occurrences) and 48-64px secondary spacing — generous breathing room is the signature.
• Card / block padding: 32px desktop (the dominant padding token), 16-24px on tighter clusters and mobile. Always pick from the scale; no magic numbers.
• Gutter values for flex/grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 px — 8px is the dominant gap (42 flex occurrences).

• Primary structural device is a 1px solid warm-umber #e4e0dc hairline border — reach for this before any shadow or card fill.
• Whitespace is the second elevation tool: separation comes from generous 48-80px spacing, not stacked depth.
• The single observed drop shadow is a soft, far-throw blue ambient bloom (rgba(15, 79, 138, 0.01-0.15), blur up to 109px) used at most once for a hero/feature lift — never a hard card shadow.
• Focus and hover lean on border-color and background shifts under the 0.25s standard curve, not on glow or scale.

• Radius scale is tight: 4px (chips, small controls), 8px (buttons, inputs), 16px (cards, panels). No pills, no full-round except avatar/indicator dots.
• Buttons default to 8px radius; cards and feature panels to 16px; small tags to 4px.
• Icons are stroke-based at ~1.5px weight to match the hairline aesthetic — no filled or duotone variants.
• Borders are a consistent 1px hairline (occasionally 2px for emphasis); style is always `solid`, never dashed.

• button-primary

  backgroundColor

  #006838

  textColor

  #ffffff

  radius

  8px

  padding

  12px 24px

  border

  1px solid transparent

  fontWeight

  500

  fontSize

  16px

  lineHeight

  24px

  Tailwind

  Copy

  inline-flex items-center justify-center gap-2 rounded-[8px] border border-transparent bg-[#006838] px-6 py-3 text-[16px] font-medium leading-6 text-white transition-colors duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-[#005530] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#006838] focus-visible:ring-offset-2

• button-secondary

  backgroundColor

  transparent

  textColor

  #302e2d

  radius

  8px

  padding

  12px 24px

  border

  1px solid #e4e0dc

  fontWeight

  500

  fontSize

  16px

  lineHeight

  24px

  Tailwind

  Copy

  inline-flex items-center justify-center gap-2 rounded-[8px] border border-[#e4e0dc] bg-transparent px-6 py-3 text-[16px] font-medium leading-6 text-[#302e2d] transition-colors duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-[#716f6c] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#006838] focus-visible:ring-offset-2

• card-surface

  backgroundColor

  transparent

  textColor

  #302e2d

  radius

  16px

  padding

  32px

  border

  1px solid #e4e0dc

  boxShadow

  none

  Tailwind

  Copy

  rounded-[16px] border border-[#e4e0dc] bg-transparent p-8 text-[#302e2d] transition-colors duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:border-[#716f6c]

• input-field

  backgroundColor

  #ffffff

  textColor

  #302e2d

  radius

  8px

  padding

  12px 16px

  border

  1px solid #e4e0dc

  fontWeight

  400

  fontSize

  16px

  lineHeight

  24px

  Tailwind

  Copy

  w-full rounded-[8px] border border-[#e4e0dc] bg-white px-4 py-3 text-[16px] leading-6 text-[#302e2d] transition-colors duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] placeholder:text-[#716f6c] focus-visible:border-[#006838] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#006838]

• tag-chip

  backgroundColor

  transparent

  textColor

  #716f6c

  radius

  4px

  padding

  4px 12px

  border

  1px solid #e4e0dc

  fontWeight

  500

  fontSize

  12px

  lineHeight

  16px

  Tailwind

  Copy

  inline-flex items-center rounded-[4px] border border-[#e4e0dc] px-3 py-1 text-[12px] font-medium leading-4 text-[#716f6c] transition-colors duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]

• link-inline

  color

  #006838

  textDecoration

  underline

  textDecorationColor

  #e4e0dc

  textUnderlineOffset

  2px

  transition

  color 250ms cubic-bezier(0.4, 0, 0.2, 1)

  Tailwind

  Copy

  text-[#006838] underline decoration-[#e4e0dc] underline-offset-2 transition-colors duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:decoration-[#006838] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#006838]

• Primary easing: cubic-bezier(0.4, 0, 0.2, 1) — the material-standard curve, carrying ~68 of the page's transitions. This is the signature.
• Two durations only: 0.25s for interactive state changes (dominant, ~63 occurrences) and 0.5s for reveals/atmospheric beats (~5 occurrences). Do not invent a third.
• Color, background-color, and border-color are the first-class animated properties — Sierra animates state via the palette, rarely via transform.
• useReducedMotion mandatory: all animations collapse to opacity-only or disable. Framer Motion is the observed library (window.MotionIsMounted).
• Spring animations forbidden — deterministic cubic-bezier only.
• No loop animations except explicit loaders.

• Primary CTA is always the single forest-green button; everything else is a hairline-bordered secondary or a green inline link. Never two green buttons competing in one view.
• Accordion: single-open for FAQ; multi-open only for deep documentation.
• Tooltips reveal on hover + focus with a short delay, dismiss instantly on blur.
• Modals for confirmations; the page favors inline disclosure over heavy overlays.
• Form validation: inline below the field on blur; the green accent signals valid focus, warm gray signals neutral.
• Empty states: a one-line 16px caption + a single green action link. No illustrations.
• Loading states: subtle skeleton or inline spinner; no full-page overlays — the calm tone never breaks.

Desktop-first because the audience is enterprise buyers on wide displays, and the editorial whitespace rhythm is authored for breathing room first. The 1160px container anchors the desktop reading column; narrower rails (336-580px) handle focused content clusters. Mobile reflows the same language — same palette, same hairlines, same single accent — without inventing an alternate architecture.

• Breakpoints (observed media queries): ~400 / 768 / 1024 / 1280 / 1536 with mobile thresholds at 425/500/530/600px.
• Container max-width 1160px on desktop; bounded rails step through 336 / 484 / 508 / 576 / 580 px for narrow content.
• Hide-on-mobile is discouraged — if a control exists on desktop, it should reach mobile via reflow.
• Tap target minimum 44×44 on touch; 40×40 on pointer devices.
• Typography scales down proportionally: hero 65 → 44 → 38px across tiers, with tracking easing toward 0 as size shrinks.

• focus-visible: 2px forest-green #006838 ring with offset (or a 1px green border on inputs). Mandatory on every interactive element.
• All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
• Color contrast: ink #302e2d on ivory ≈ 13:1 (AAA); warm gray #716f6c on ivory ≈ 4.6:1 (AA for body); white on green #006838 ≈ 5.4:1 (AA). Never drop below 4.5:1 for body text.
• Green #006838 is never the sole signal for meaning — pair it with text or weight so de-emphasis reads without color perception.
• ARIA labels on icon-only buttons; aria-expanded on collapsible regions; aria-live='polite' on toast and status updates.
• Motion respects prefers-reduced-motion — animations reduce to opacity-only or disable entirely.
• Tap targets minimum 44×44 on touch; 40×40 on pointer.
• Form errors announced via aria-describedby on the associated input; never color-only signaling.

Framer Motion is directly observed (window.MotionIsMounted) and drives reveals/hover transitions at 0.25-0.5s on cubic-bezier(0.4, 0, 0.2, 1). Images are Next/Image-served via a CDN with ~97% lazy-loading (only above-fold logos/hero eager). Icons are stroke-based to match the hairline aesthetic. No canvas, WebGL, or Lottie observed — static-first, animated-discreet.

• Framer Motion `motion.div` with `whileInView` + `viewport={{ once: true, margin: '-10%' }}` for scroll reveals
• Transitions use `ease: [0.4, 0, 0.2, 1]` and `duration: 0.25` (or 0.5 for reveals) — constants only, no springs
• useReducedMotion guard wraps every animation primitive — no exceptions
• Next/Image with `sizes` always set; `priority` only on the LCP candidate (hero/above-fold)
• Self-hosted GT America + GT America Mono woff2, preloaded with `display: swap`

• Build on the warm ivory canvas with near-black #302e2d ink — never default to pure white or pure black for body surfaces.
• Reach for a 1px #e4e0dc hairline border before any shadow or card fill — hairlines and whitespace are the elevation system.
• Reserve forest green #006838 for primary CTAs and brand moments only — keep its surface area single-digit.
• Commit to GT America for everything; use GT America Mono for code/labels/tabular numerics.
• Apply px-based negative tracking on display text (-0.38 to -1.3px), easing toward 0 as size shrinks.
• Default to the cubic-bezier(0.4, 0, 0.2, 1) curve at 0.25s for interactive transitions; 0.5s for reveals.
• Pass every page through useReducedMotion before shipping.

• Never introduce a second accent color — the single forest green is the brand, and a competing hue erases the restraint.
• Never use heavy drop shadows or glassmorphism for cards — the only permitted shadow is the soft far-throw blue ambient bloom, used at most once.
• Never substitute 600/700 font weights — Sierra's display authority is size + tracking on a 400/500 ladder, not heavy weight.
• Never introduce a secondary display font. One GT America family + one mono is the boundary.
• Never invent durations or easings outside {0.25s, 0.5s} and {cubic-bezier(0.4, 0, 0.2, 1), ease} — the constrained motion set is part of the calm.
• Never use em for display tracking — the px-based scale (-0.38 / -0.44 / -1.3) is an optical constant, not layout-relative.
• Never crowd the page — generous 48-80px section rhythm is load-bearing; collapsing it makes a calm page anxious.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
• Spacing base 4px, scale 4/8/12/16/24/32/40/44/48/56/64/80.
• Container max 1160px — do not exceed; bounded rails 336/484/508/576/580.
• Single font family + mono companion: GT America + GT America Mono.
• Weight ladder strictly 400 / 500.
• Palette: ivory canvas + ink #302e2d + warm gray #716f6c + hairline #e4e0dc + single accent #006838 (+ rare #000000 inversion).
• Motion: two durations (0.25s / 0.5s) and the cubic-bezier(0.4, 0, 0.2, 1) primary curve. No springs.
• Radius scale: 4 / 8 / 16 px.

• Container width: no page exceeds 1160px wide.
• Spacing grep: no values outside the 4/8/12/16/24/32/40/44/48/56/64/80 ladder.
• Font weight grep: only 400 and 500 appear — no 600/700.
• Color grep: the only accent hue is #006838; backgrounds are ivory/#302e2d ink/#e4e0dc hairlines — no second accent color.
• Transition grep: `transition-timing-function` values draw from {cubic-bezier(0.4, 0, 0.2, 1), ease}; the material curve carries most transitions.
• Transition duration grep: values are {0.25s, 0.5s} only.
• Shadow audit: every card edge uses a 1px hairline; the only drop shadow is the soft blue ambient bloom, used at most once.
• Tracking audit: display text uses px-based negative tracking (-0.38 / -0.44 / -1.3), not em.
• Contrast audit: body text on the ivory canvas ≥ 4.5:1 (WCAG AA); ink #302e2d ≥ 13:1 (AAA).
• Radius audit: every corner draws from {4, 8, 16}px — no stray radii.