Contra

Light-first canvas — #ffffff primary background paired with #14171f near-black primary text doing the reading-layer work. Secondary text descends through a cool slate ladder: #677084 → #4a5264 → #9ba2b0 → #d0d4dc for progressive de-emphasis, plus deep #222834 for dark-mode panels. The vivid spot palette — teal #3ab266, violet #6a57e3, pink #cd74dd — is reserved for emphasis: feature highlights, call-to-action states, editorial spot illustrations. Surface area of spot colors stays below 3% of the viewport.

• Primary reading pair: #14171f text on #ffffff background (measured 1864 + 1845 occurrences — dominant surface)
• Slate descender ladder: #677084 (captions, metadata) → #4a5264 (muted UI) → #9ba2b0 (placeholder) → #d0d4dc (disabled state)
• Dark-mode panel base #222834 paired with #ffffff foreground for contrast regions
• Spot teal #3ab266 for success states and creator badges (never decorative)
• Spot violet #6a57e3 and pink #cd74dd for feature highlights and editorial emphasis
• Cool blue #8bb2d1 and warm browns (#45192f / #2e1104 / #c8b9a7) appear as one-off swatches in editorial illustrations and category chips

linear-gradient(360deg, rgba(20, 23, 31, 0.8) 12%, rgba(255, 255, 255, 0) 50%)
linear-gradient(90deg, rgb(205, 243, 253), rgb(157, 222, 249) 42.88%, rgb(151, 157, 241) 94.62%)
linear-gradient(rgb(3, 5, 49) 52.16%, rgb(4, 5, 39) 66.55%)

• Primary grotesque: GT Standard Variable (L + M), self-hosted and preloaded from https://builds.contra.com/static/fonts/GT-Standard-L-VF.woff2 and GT-Standard-M-VF.woff2. Monospace: GT Standard Mono (Standard-Regular.woff2). Secondary serif: Source Serif 4 Variable (SourceSerif4-Variable.woff2) for editorial moments.
• Dual-voice system — GT Standard handles product UI, labels, buttons, data-dense layouts; Source Serif 4 handles long-form reading, quotes and editorial feature moments. Do not substitute either — the duet is the brand.
• Observed size ladder: 8 / 12 / 14 / 15 / 16 / 23 px — micro-legend sizes exist at 8px with tight line-height 10px; body reading at 14-16px with line-height 20-24px; display-adjacent at 23px with 32px line-height.
• Line-height: tight 1.0-1.15 on display (23/32), relaxed 1.43-1.71 on reading (14/20, 16/24, 15/24). No unitless values outside these ratios.
• Monospace: GT Standard Mono for tabular data, code, kbd, IDs and timestamps. Do not use a mono substitute.
• Italic is reserved for Source Serif — GT Standard stays upright. Emphasis in GT Standard is carried through weight, not slant.
• Paragraph max width ~46-52 ch at 14-16px to echo the 464px narrow content rail.

• 4px base unit. Observed scale: 2 / 4 / 6 / 8 / 10 / 12 / 16 / 20 / 24 / 26 / 28 / 32 — with dominant use at 4 (freq 405) / 8 (296) / 12 (202) / 16 (202).
• Flex gaps: 4px (freq 121), 8px (82), 12px (74) dominate component-level gutters. Keep default spacing in multiples of 4.
• Container widths: narrow reading column 464px (dominant content rail, 27 freq), wide hero 1848px, plus 320 / 544 / 580 / 904 for intermediary layouts. No 1280 default — adopt the narrow rail intentionally.
• Padding scale mirrors the spacing scale — prefer 16px / 20px / 24px on card surfaces, 12px / 16px on inline buttons.
• Respect the 464px reading column even inside the 1848px hero — long-form content stays bounded, visual-forward content breaks the rail for dramatic width.

• Default cards: shadow-sm asymmetric double-layer — '0px 4px 10px 0px rgba(34, 40, 52, 0.05), -2px 18px 18px 0px rgba(34, 40, 52, 0.04)'. The negative horizontal offset on the second layer is the signature.
• Feature callouts: shadow-md ambient glow — '0px 0px 24px 0px rgba(228, 232, 247, 0.8)'. Use only where the component wants to feel emitted rather than placed.
• Subtle hairline separators: shadow-xs '0px 0px 0px 0px rgba(74, 82, 100, 0.498)' — a ghost-ring for focus states rather than an elevation.
• Inset hairline: shadow-lg 'rgb(19, 24, 25) 0px 1px 3px 0px inset' — reserved for input fields and pressed-state surfaces.
• Modal / overlay: shadow-xl 'rgba(0, 0, 0, 0.05) 0px 10px 20px 0px' for floating overlays. Do not use on base cards.
• Do not stack shadow-sm and shadow-md on the same element — pick one per context. Asymmetric elevation for grounded cards, glow for emitted highlights.

• Double-peak border-radius system: 10px (freq 22) for interactive elements (buttons, tabs, inline inputs) and 16px (freq 23) for surface cards and image frames.
• Secondary radii: 4px for micro-chips and badges, 8px for compact controls, 12px for medium cards. Skip the 20-24px range — the double-peak is the signature.
• Avoid full-pill radius outside avatar frames — Contra's brand is edged by soft-but-deliberate corners, not by pill universality.
• Border widths: 1px for default strokes, 2px for emphasized strokes (measured in borderWidths). Treat 2px borders like a typographic weight step — a deliberate escalation.

• card-surface

  backgroundColor

  #ffffff

  textColor

  #14171f

  radius

  16px

  padding

  20px

  border

  none

  boxShadow

  rgba(34, 40, 52, 0.05) 0px 4px 10px 0px, rgba(34, 40, 52, 0.04) -2px 18px 18px 0px

  fontFamily

  GT Standard L Variable, ui-sans-serif

  Tailwind

  Copy

  rounded-2xl bg-white p-5 text-[#14171f] shadow-[0px_4px_10px_0px_rgba(34,40,52,0.05),-2px_18px_18px_0px_rgba(34,40,52,0.04)] transition-[width,height,border] duration-[0.35s] ease-[ease]

• feature-glow-callout

  backgroundColor

  #ffffff

  textColor

  #14171f

  radius

  16px

  padding

  32px

  border

  none

  boxShadow

  rgba(228, 232, 247, 0.8) 0px 0px 24px 0px

  fontFamily

  Source Serif 4 Variable, ui-serif

  headlineColor

  #14171f

  kickerColor

  #6a57e3

  Tailwind

  Copy

  rounded-2xl bg-white p-8 shadow-[0px_0px_24px_0px_rgba(228,232,247,0.8)]

• spot-cta

  backgroundColor

  #3ab266

  textColor

  #ffffff

  radius

  10px

  padding

  12px 20px

  border

  none

  boxShadow

  none

  fontFamily

  GT Standard M Variable

  fontSize

  14px

  fontWeight

  500

  transition

  background-color 0.2s ease-in-out, color 0.2s ease-in-out

  hoverBackground

  rgba(58, 178, 102, 0.85)

  Tailwind

  Copy

  inline-flex min-h-[44px] items-center gap-2 rounded-[10px] bg-[#3ab266] px-5 py-3 text-[14px] font-medium text-white transition-[background-color,color] duration-[0.2s] ease-in-out hover:bg-[#3ab266]/85

• inline-slate-input

  backgroundColor

  #ffffff

  textColor

  #14171f

  radius

  10px

  padding

  12px 16px

  border

  none

  boxShadow

  rgb(19, 24, 25) 0px 1px 3px 0px inset

  fontFamily

  GT Standard M Variable

  fontSize

  14px

  focusRing

  2px solid #6a57e3

  Tailwind

  Copy

  rounded-[10px] bg-white px-4 py-3 text-[14px] text-[#14171f] shadow-[rgb(19,24,25)_0px_1px_3px_0px_inset] focus:outline-none focus:ring-2 focus:ring-[#6a57e3]

• link-inline

  color

  #6a57e3

  textDecoration

  underline

  textDecorationColor

  rgba(106,87,227,0.45)

  textUnderlineOffset

  3px

  textDecorationThickness

  1px

  transition

  text-decoration-color 200ms ease-out, color 200ms ease-out

  Tailwind

  Copy

  text-[#6a57e3] underline decoration-[#6a57e3]/45 decoration-[1px] underline-offset-[3px] transition-colors duration-[200ms] ease-out hover:decoration-[#6a57e3] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#6a57e3]

• Dimensional change (width, height, border): 0.35s ease — dominant transition, observed 82 times. Use for layout expansion, border emphasis, card resize.
• Surface micro-interactions (opacity, fill, transform): 0.2s ease-out — observed 38-51 times per property. Use for hover reveals, icon tint, button press.
• Color transitions (background-color, border-color, color): 0.2s-0.3s ease-in-out or ease — for theme transitions and hover chroma.
• All-property global fallback: 0.32s ease — reserve for wholesale state changes (modal open, drawer slide).
• Do not introduce bouncy or spring easings — the entire motion grammar is ease / ease-in-out / ease-out. Overshoot breaks the calibration.

• Hover states escalate through slate ladder — #677084 → #14171f on text, chroma shift on CTAs, elevation un-change on cards (the shadow stays, the tint deepens).
• Focus rings use the vivid spot palette — violet #6a57e3 on form fields, teal #3ab266 on primary CTAs. Never default-blue.
• Active / pressed states rely on the inset hairline shadow-lg to indicate depression, rather than on translate.
• Loading / disabled states lean on the #d0d4dc pale slate, never on reduced opacity alone.

Desktop-first because the creator audience lands via editorial features and wide displays. Narrow 464px content rail holds across all breakpoints — only the hero canvas flexes up to 1848px. Source Serif retreats below md so mobile stays dense and legible without editorial overhead.

• Breakpoints: Tailwind-standard 640 / 768 / 1024 / 1280 / 1536. No custom media queries observed — keep within these tiers.
• Narrow content rail (464px) holds across all breakpoints — only the hero canvas (1848px max) flexes with viewport.
• Below 768px, switch dual-typeface layouts to GT Standard only for density; Source Serif comes back at md+.
• Image strategy: hero webp at 1984×1962 natural (above-fold, loading=auto). All secondary imagery lazy-loads.

• Primary reading pair #14171f on #ffffff exceeds WCAG AAA (21:1). Slate descender #677084 on white holds AA for normal text (5.5:1).
• Ensure vivid spots always pair with text of sufficient contrast — teal #3ab266 and violet #6a57e3 on white need at least 14px bold or 18px normal to meet AA.
• Focus rings mandatory at 2px minimum with 2px offset, using the spot palette (#6a57e3 / #3ab266).
• Do not rely on color alone to communicate state — pair every spot color with an icon, label or position cue.
• Prefers-reduced-motion must disable the 0.35s dimensional transitions; 0.2s opacity / transform stays.

No runtime motion library detected in the extraction — all motion rides on native CSS transitions. Hero imagery ships as WebP (observed 1984×1962 natural, above-fold loading=auto); secondary imagery lazy-loads. Typography delivery is self-hosted variable woff2 from builds.contra.com — no Google Fonts, no external CDN, no @font-face in the observed CSSOM (CORS-scoped).

• Preload order: GT-Standard-L-VF → GT-Standard-M-VF → GT-Standard-Mono-Standard-Regular → SourceSerif4-Variable (all .woff2, all variable)
• Use native <link rel='preload' as='font' type='font/woff2' crossorigin> for each family
• CSS transitions only — do not introduce Framer Motion / GSAP / Lottie unless a feature explicitly demands it
• No CSS custom properties observed in the capture; adopt Tailwind theme tokens if porting the palette

• Use GT Standard Variable + Source Serif 4 Variable as the entire typographic personality.
• Hold a pure-white canvas and let slate ink carry the reading work.
• Reserve the vivid spot palette for moments where emphasis earns its own spotlight.
• Pair asymmetric double-layer shadow for grounded cards with ambient glow for emitted callouts.
• Respect the 464px narrow reading rail even inside the 1848px hero canvas.
• Use the double-peak 10 / 16 px radius grammar — 10px for interactive, 16px for surface.

• Do not paint surfaces with the spot palette — below 3% of viewport is the rule.
• Do not add a third display typeface — the GT / Source Serif duet is the identity.
• Do not mix asymmetric shadow-sm and ambient shadow-md on the same component.
• Do not flatten the narrow rail into a full-width text column — the bounded reading is a signature.
• Do not substitute a generic system-ui for GT Standard at render time — preload the woff2 or skip the page.
• Do not add bouncy or spring easings — the motion grammar is ease only.

• Typography must render with variable-font weight axes — static-weight substitutes break the design language.
• All shadows must honor the measured rgba values exactly; fabricated opacities break the elevation system.
• Spot colors must pass AA contrast when placed on their paired surfaces; demote to slate if they do not.
• Breakpoints stay within the Tailwind-standard ladder — no custom media queries.

• Does every card use shadow-sm (asymmetric double-layer), shadow-md (ambient glow) or shadow-lg (inset hairline) — and only one at a time?
• Is the reading column bounded to ~464px regardless of hero width?
• Are vivid spots (#3ab266 / #6a57e3 / #cd74dd) limited to interactive states, feature highlights and editorial emphasis — never fill surface?
• Do all interactive elements use 10px border radius, and do all surface cards use 16px?
• Does the typography use GT Standard Variable by default and Source Serif 4 Variable for editorial moments, both as preloaded woff2?
• Do dimensional transitions use 0.35s ease and surface micro-interactions use 0.2s ease-out?