Zendesk

Light-first canvas — primary surface #000000 paired with foreground #ffffff doing the bulk of reading-layer work. Accent moments use #11110d + #f5f5f2 sparingly. Cream and warm-neutral surfaces with small accent flags.

• #000000 — primary surface / dominant background
• #ffffff — primary foreground / reading layer
• #11110d — first accent — used for CTAs and highlights
• #f5f5f2 — secondary accent / hover states
• #70a32a — tertiary surface / panels

// No gradient extracted — use solid surfaces

• Primary family: Vanilla Sans. Mono fallback: JetBrains Mono for code and tabular numerics.
• Weight ladder: 400 / 500 / 600 / 700. Keep substitutions tight — the captured ladder is the typographic signature.
• Display tracking uses negative px (not em) for optical correction at large sizes — typically -0.5 to -1.5px at 48-64px hero scale.
• Heading line-height tightens at display sizes (1.0-1.2); body sits at 1.4-1.6. Captions and small UI labels at 1.3.
• Tabular numerals mandatory on aligned columns: font-variant-numeric: tabular-nums.
• Italic reserved for editorial quotes and emphasis where weight cannot carry — never for product UI labels.
• Paragraph max 45-55ch at body size; dense data tables may extend to 65ch with line-height 1.5.

• Scale (observed): 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 px. Stay on the scale — no magic numbers.
• Container max-width: 1600px. Secondary bounded rails for narrow content clusters at ~480-640px.
• Section vertical rhythm: 64-128px on desktop, 40-80px on mobile, scaled by page depth.
• Card padding: 16-24px on desktop, 12-16px on mobile.
• Gutter values draw from the smaller half of the scale (4 / 8 / 12 / 16 / 24).

• Primary elevation is a light drop shadow — `box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1)`. Layering through subtle shadow ladder.
• Drop shadows stay subtle (opacity 0.05-0.4, blur 1-12px, zero spread). No bloom, no halo.
• Layering depth comes from border weight + background tone shift, not stacked shadow.
• Focus state uses inset ring at accent color — never an outer glow on form fields.

• Radius scale: 4 / 8 / 12 / 16 / 24. Buttons default to 12px, cards to 16px, modals to 24px.
• Icon style is illustrated — bespoke hand-drawn characters and diagrams; never stock vectors.
• Tap targets minimum 44×44 on touch, 40×40 on pointer devices.

• button-primary

  backgroundColor

  #11110d

  textColor

  #000000

  radius

  12px

  padding

  10px 16px

  border

  1px solid transparent

  boxShadow

  none

  fontWeight

  600

  fontSize

  14px

  lineHeight

  20px

  Tailwind

  Copy

  inline-flex items-center gap-1.5 rounded-[12px] bg-[#11110d] px-4 py-2.5 text-[14px] font-medium text-[#000000] transition-colors duration-200 ease-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#11110d]

• button-secondary

  backgroundColor

  transparent

  textColor

  #ffffff

  radius

  12px

  padding

  10px 16px

  border

  1px solid #f5f5f2

  boxShadow

  none

  fontWeight

  600

  fontSize

  14px

  Tailwind

  Copy

  inline-flex items-center gap-1.5 rounded-[12px] border border-[#f5f5f2] bg-transparent px-4 py-2.5 text-[14px] font-medium text-[#ffffff] transition-colors duration-200 ease-out hover:bg-[#70a32a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#11110d]

• card-surface

  backgroundColor

  #ffffff

  textColor

  #ffffff

  radius

  16px

  padding

  24px

  border

  none

  boxShadow

  0 1px 3px rgba(0,0,0,0.1)

  Tailwind

  Copy

  rounded-[16px] bg-[#ffffff] p-6 text-[#ffffff] shadow-sm

• input-field

  backgroundColor

  #ffffff

  textColor

  #ffffff

  radius

  8px

  padding

  8px 12px

  border

  1px solid #f5f5f2

  boxShadow

  none

  fontSize

  14px

  lineHeight

  20px

  Tailwind

  Copy

  w-full rounded-[8px] border border-[#f5f5f2] bg-[#ffffff] px-3 py-2 text-[14px] leading-5 text-[#ffffff] placeholder:text-[#70a32a] focus-visible:outline-none focus-visible:border-[#11110d] focus-visible:ring-2 focus-visible:ring-[#11110d]/30

• Captured motion level: moderate. No motion library detected — assume CSS transitions only.
• useReducedMotion mandatory — all animations collapse to opacity-only or disable entirely.
• Deterministic cubic-bezier or ease-out only; spring animations only where genuinely needed.
• Loop animations forbidden except explicit loaders.
• Hover and reveal motion use the same primary easing curve to feel consistent across the page.

• Segmented controls for binary/ternary choices (pricing toggle, doc version switcher) over toggle switches.
• Accordion: single-open for FAQ; multi-open only for deeply nested documentation.
• Tooltips: hover + focus with 300-400ms delay, dismiss instantly on blur.
• Modals for destructive confirmations; drawers for mobile-only expansions; never nested modals.
• Form validation: inline below field on blur; submit disabled until pristine.
• Empty states: small icon + one-line copy + primary action link, no illustrations beyond brand pattern.
• Loading states: skeleton shimmer for content blocks; inline spinner for button confirm states.

Desktop-first because the audience is decision-makers on workstations. Mobile adapts the same language without reinventing it — no hamburger-revealed alternate architecture.

• Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder.
• Container max-width: 1600px. Below 1280, padding compresses but composition holds.
• Hide-on-mobile is banned — if a control exists on desktop, it must reach mobile via reflow.
• Tap target minimum 44×44 on touch; 40×40 on pointer devices.
• Typography scales proportionally: hero 48-64 → 32-40 on tablet → 28-32 on mobile.

• Color contrast: foreground #ffffff on background #000000 should meet WCAG AA at minimum (4.5:1 for body, 3:1 for display). Verify with axe-core or Lighthouse.
• focus-visible: 2px ring at accent color, never display:none on focus outline. Mandatory on every interactive element.
• All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
• ARIA labels on icon-only buttons; aria-expanded on collapsibles; aria-live='polite' on toasts.
• Motion respects prefers-reduced-motion — animations reduce to opacity-only or disable entirely.
• Form errors announced via aria-describedby on the associated input; never color-only signaling.
• Screen reader-only content uses sr-only; never display:none for meaningful context.

Motion library not directly observable in extract. Image handling uses Next/Image (or equivalent) with lazy-loading default. Icons: Bespoke illustrated.

• Motion: motion.div with whileInView and viewport={{ once: true, margin: '-10%' }} for scroll reveals.
• Transitions use constants only — define ease and duration as named tokens (e.g. ease.standard, duration.fast).
• useReducedMotion guard wraps every animation primitive — no exceptions.
• Next/Image with sizes attribute always set; priority only on LCP candidate (hero image).
• No canvas, no WebGL, no Lottie unless required by product (e.g. waveform demos).

• Apply focus-visible ring at accent color #11110d on every interactive element.
• Use tabular-nums on aligned numerics; reach for monospace fallback for code and kbd inline.
• Stay within the captured spacing scale (2, 4, 6, 8, 10, 12 px) — no magic numbers.
• Break body text at 45-55ch; dense tables may extend to 65ch at 13-14px.
• Use a two-step shadow ladder (1px tight + 4-8px ambient) before adding decorative elevation.
• Pass every page through useReducedMotion before shipping.
• Default to the primary easing curve for interactive transitions; reserve longer durations for atmospheric beats.

• Never introduce a font weight outside the captured ladder — the discipline is the signature.
• Never invent durations or easings outside the captured set — pick from the existing scale.
• Never use drop shadows above 0.4 opacity or 16px blur — heavy elevation breaks the surface language.
• Never introduce a secondary display font without explicit reason — one family + one mono is the boundary.
• Never animate height: auto — use measured transforms or scaleY.
• Never use em for tracking on display sizes — the px-based scale is an optical constant.
• Never apply hover-only affordances — every interaction must be keyboard + screen reader reachable.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS beyond the design system.
• Spacing scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 px.
• Container max-width: 1600px — do not exceed.
• Single font family: Vanilla Sans, plus JetBrains Mono mono fallback.
• Weight ladder: 400 / 500 / 600 / 700 — no substitutions.
• Motion: durations 0.1s, 0.6s, 0.3s, 0.2s; easings ease-out + cubic-bezier(0.4, 0, 0.2, 1). No springs unless explicitly motivated.
• Radius scale: 4 / 8 / 12 / 16 / 24 px.

• Container width: no page section exceeds 1600px wide.
• Spacing grep: no values outside the 2 / 4 / 6 / 8 / 10 / 12 ladder (+ scale extensions).
• Font weight grep: only 400, 500, 600, 700 appear in computed styles.
• Transition timing-function values draw from the captured easing set (ease-out + cubic-bezier(0.4, 0, 0.2, 1)).
• Transition duration values draw from {0.1s, 0.6s, 0.3s, 0.2s}s.
• Shadow audit: every elevation uses the two-step ladder (1px + ambient); no opacity above 0.4.
• Image audit: loading='lazy' on every non-LCP image; priority only on hero.
• Contrast audit: body text on dominant background ≥ 4.5:1 (WCAG AA).
• Tap target audit: minimum 44×44 on touch surfaces; 40×40 on pointer.