Every Design System

Overview

Every is a premium editorial product built for an audience of AI practitioners — developers, founders, and technical leaders who want to stay current without drowning in noise. The visual system reflects this positioning through a deliberately restrained, almost print-magazine aesthetic: a pure black canvas ({colors.surface-soft}), high-contrast white serif typography for headlines, and a single voltage point of bright cyan-blue on CTAs ({colors.accent-cyan}). The overall mood is sophisticated, confident, and slightly archival — like reading a well-designed journal that happens to be about the future.

The brand's visual personality lives in its typographic dualism. Display text uses Signifier (or the custom Every wordmark variant for the logo lockup) — a refined serif with old-style proportions that signals editorial authority. UI text, labels, navigation, and body copy default to Switzer, a geometric sans-serif with neutral clarity that stays out of the way. This pairing creates a hierarchy that feels intentional rather than arbitrary: serif = voice and argument; sans = interface and utility. Headlines never go bold — the system trusts scale, letter-spacing, and the inherent weight of the serif to carry emphasis.

Shape language is minimal but purposeful. Buttons are fully rounded pills ({rounded.pill}) that read as modern and approachable against the black canvas. The signature stamp cards — those colorful illustrated tiles showing Read, Email, Speak, Listen, Write, Organize — use a distinctive asymmetric radius ({rounded.stamp}): sharp bottom corners with slight rounding at top, evoking postage stamps or collectible prints. This small detail does enormous work for brand memorability.

A sub-system worth noting is the stamp card palette: six saturated, distinct hues ({colors.stamp-green} through {colors.stamp-yellow}) applied as solid backgrounds behind simple white labels and vintage-style illustrations. These aren't gradients or glassmorphism — they're flat, confident color blocks. They transform what could be a feature grid into something that feels curated and collectible.

Key Characteristics:

• Pure black canvas {colors.surface-soft} with white ink {colors.ink} — no grays, no gradients on the hero surface
• Single CTA voltage color {colors.accent-cyan} (bright cyan-blue) — never {colors.primary} blue for buttons
• Serif display typeface (Signifier) at large sizes ({typography.display-lg}, 52px) with weight 400 only
• Sans-serif UI face (Switzer) for everything interactive: nav, buttons, labels, body
• Pill-shaped CTAs {rounded.pill} contrasting against stamp-card asymmetric radii {rounded.stamp}
• Generous vertical spacing ({spacing.section-xl} = 80px) between hero bands and content
• Six-color stamp palette as signature imagery treatment
• Dark mode only — {extensions.mode} is "dark"; light surfaces appear only inside inputs

Colors

Brand & Accent

• Primary ({colors.primary} — #2563eb): Deep blue used for links, checkbox accents, and semantic brand references. Never used as a button background in this design.
• Primary Hover ({colors.primary-hover} — #1d4ed8): Darkened primary state for link interactions.
• Primary Active ({colors.primary-active} — #1e40af): Pressed state for primary-colored elements.
• Accent Cyan ({colors.accent-cyan} — #c0f0fb): Bright cyan-blue — THE conversion color. Used exclusively for Subscribe buttons ({component.nav-subscribe}, {component.hero-cta-subscribe}), creating high visibility against the black canvas while carrying cool-toned energy.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white. Appears only inside form inputs ({component.text-input-light}) and checkbox backgrounds — the rare light elements in this dark system.
• Surface Soft ({colors.surface-soft} — #000000): Pure black. The dominant ground plane: hero band, navigation bar, page background, drawer panel.
• Surface Strong ({colors.surface-strong} — #111111): Near-black. Used for elevated containers or cards needing subtle separation from the black ground.
• Surface Elevated ({colors.surface-elevated} — #18181b): Slightly warmer dark gray. Used for floating panels like the privacy popup.
• Surface Dark ({colors.surface-dark} — #0c1a1a): Cool-tinted near-black. A specialty surface for specific sections.
• Surface Warm ({colors.surface-warm} — #492711): Brown-tinged dark. Specialty surface for warm-content areas.
• Surface Slate ({colors.surface-slate} — #313c41): Medium-dark blue-gray. Specialty surface.
• Surface Charcoal ({colors.surface-charcoal} — #2c2c2c): Neutral medium-dark gray. Specialty surface.

Text

• Ink ({colors.ink} — #ffffff): Pure white. Primary text color for all headlines, navigation, body copy, and UI elements on dark surfaces.
• Body ({colors.body} — #000000): Pure black. Text color used inside light-background inputs where contrast must flip.
• On Primary ({colors.on-primary} — #ffffff): White text rendered on {colors.primary} or {colors.accent-cyan} backgrounds. Satisfies AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): Alias for white-on-dark-surface usage.
• Muted ({colors.muted} — #d6d3d1): Warm light gray. Secondary text — subheadlines, descriptions, timestamps.
• Muted Medium ({colors.muted-medium} — #d0d0d0): Neutral light gray. Tertiary text, less prominent annotations.
• Muted Soft ({colors.muted-soft} — #bcbbbb): Softer gray. Quaternary text, very de-emphasized content.
• Disabled ({colors.disabled} — rgba(255, 255, 255, 0.75)): White at 75% opacity. Used for hero subheadline ("Trusted by 100,000 builders") to create clear hierarchy below the main headline.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.1)): White at 10% opacity. Subtle dividers on dark surfaces.
• Border Input ({colors.border-input} — #6b7280): Medium gray. Checkbox and input border stroke color.

Semantic

• Link ({colors.link} — #2563eb): Same as primary blue. Inline text links.
• Error ({colors.error} — #ef4444): Red for validation errors.
• Success ({colors.success} — #22c55e): Green for confirmation states.

Signature / Brand-Specific (Stamp Card Palette)

• Stamp Green ({colors.stamp-green} — #2d8c5e): Forest green. Background for "Read" stamp card.
• Stamp Blue ({colors.stamp-blue} — #1d4ed8): Royal blue. Background for "Email" stamp card.
• Stamp Purple ({colors.stamp-purple} — #7c3aed): Vibrant purple. Background for "Speak" stamp card.
• Stamp Red ({colors.stamp-red} — #c2410c): Burnt orange-red. Background for "Listen" stamp card.
• Stamp Orange ({colors.stamp-orange} — #ea580c): True orange. Background for "Write" stamp card.
• Stamp Yellow ({colors.stamp-yellow} — #cab948): Mustard yellow. Background for "Organize" stamp card.

Typography

Font Family

The Every type system is built on two proprietary font families with carefully defined role boundaries:

Signifier (serif) is the voice of the publication. It appears in all display roles — the massive "EVERY" wordmark, the 52px hero headline, article titles, and any text that represents editorial opinion or narrative authority. It has old-style proportional figures, moderate contrast between thick and thin strokes, and a slightly condensed width that gives it presence without sprawl. When the custom Every wordmark variant is available (detected in font-face stacks for logo usage), it takes precedence for the brand lockup specifically, falling back to Signifier.

Switzer (sans-serif) is the utility layer. It handles navigation items, button labels, author bylines, UI captions, form inputs, and body copy at smaller sizes. It's geometric but humanist — clean without being sterile, readable at small sizes without demanding attention. The font stack includes Inter var as the primary web-font source (loaded via @font-face declarations for multiple unicode ranges and weights 100–900), then falls back through system sans-serifs.

The combined stack means most elements resolve to Inter var → Switzer → system fonts for sans, and Signifier → Georgia → Times for serif. This creates a robust fallback chain that preserves the design intent even if custom fonts fail to load.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 96px | 400 | 1.05 | -0.02em | "EVERY" wordmark / mega-display | | {typography.display-lg} | 52px | 400 | 1.1 | -0.01em | Hero headline | | {typography.display-md} | 32px | 400 | 1.25 | 0 | Section headings (serif) | | {typography.title-lg} | 32px | 500 | 1.3 | 0 | Stamp card labels (sans) | | {typography.title-md} | 18px | 500 | 1.5 | 0 | Small headings, UI titles | | {typography.body-md} | 26px | 400 | 1.375 | 0 | Body copy, subheadlines | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Standard body text | | {typography.caption} | 15px | 400 | 1.4 | 0 | Supporting text, meta info | | {typography.label-sm} | 14px | 500 | 1 | 0.02em | Author labels, tags, uppercase UI | | {typography.button} | 15px | 400 | 1.33 | 0 | Button text | | {typography.button-nav} | 16px | 400 | 1.5 | 0 | Navigation links |

Principles

The typography system's defining move is its weight restraint. No element exceeds font-weight 500, and the heaviest display role sits at 400. This is deliberate — in a dark-mode editorial context, heavy bold text reads as aggressive and cheapens the atmosphere. Instead, hierarchy is carried by size differential (96px → 52px → 26px → 16px), family contrast (serif vs. sans), color opacity ({colors.ink} vs. {colors.disabled} at 75%), and letter-spacing tightening on display sizes (-0.02em at 96px). The result is a system that feels spacious and confident rather than loud.

Serif is reserved for "voice" content — things that represent the publication's perspective or carry narrative weight. Sans-serif handles everything "interface" — navigation, forms, metadata, utility labels. The one exception is {typography.body-md} at 26px, which uses the Switzer+Signifier hybrid stack so it can resolve to either family depending on context; in practice it serves as the large body/subheadline size.

Uppercase appears sparingly: only in {typography.label-sm} author bylines (with text-transform: uppercase and tight tracking at 0.02em). Italics are not prominently observed in the extracted styles. Letter-spacing is normal (browser default) for all roles under 32px, with slight negative tracking applied only to the two largest display sizes to prevent the loose feel that afflicts big serif type.

Note on Font Substitutes

Both Signifier and Switzer are commercial/proprietary typefaces from Klim Type Foundry and Swiss Typefaces respectively, not available on Google Fonts. For open-source implementation:

• Signifier substitute: Playfair Display (Google Fonts) — similar contrast, old-style sensibility, serif category. Use weights 400–700.
• Switzer substitute: DM Sans or Plus Jakarta Sans (Google Fonts) — geometric humanist sans with similar proportions. The existing Inter var font loaded in the stylesheet is already an excellent substitute for Switzer in UI contexts.
• Every wordmark: Use Signifier with increased letter-spacing or Cormorant Garamond for the logo lockup specifically.

Define CSS variables for substitution:

--font-display: 'Playfair Display', 'Signifier', Georgia, serif;
--font-ui: 'DM Sans', 'Inter var', 'Switzer', system-ui, sans-serif;
--font-body: 'DM Sans', 'Inter var', 'Switzer', Georgia, serif;

Layout

Spacing System

• Base unit: 4px (implied by the xxs: 4px token).
• Tokens: {spacing.xxs} (4px — micro-gaps, icon padding), {spacing.xs} (5px — tight internal spacing), {spacing.sm} (8px — icon gaps, small padding), {spacing.md} (12px — most common internal gap, used 133 times in extracted CSS), {spacing.base} (16px — standard padding), {spacing.lg} (20px — comfortable padding), {spacing.xl} (24px — section-internal spacing, container padding), {spacing.xxl} (32px — large gaps), {spacing.section} (40px — vertical band spacing), {spacing.section-xl} (80px — hero-to-content gap).
• Section padding (vertical): {spacing.section-xl} (80px) — used between the hero band and the content grid start.
• Card internal padding: {spacing.lg} (20px) on stamp cards.
• Gutters: Navigation uses {spacing.base} (16px) horizontal padding. Main container uses {spacing.base} horizontal + {spacing.xl} (24px) top / {spacing.xxl} (32px) bottom.

Grid & Container

• Max content width: 1280px (applied via max-w-1280 class on <main>).
• Full-width sections: Header, hero section, and navigation span 1440px viewport width with max-width: none.
• Editorial density: Single-column centered hero with full-width stamp carousel below. Content grid switches to multi-column at tablet/desktop breakpoints (5-column at 976px, 4-column at 1099px).
• Specific behaviors at desktop: The hero is a flex column centered horizontally. Below the hero, a CSS Grid layout activates (grid-cols-5 at 976px, collapsing to grid-cols-4 at 1099px+) for article/content cards.
• Hero column splits: Single centered column, text-only (headline + subheadline + CTA), with the stamp illustration row positioned below.

Whitespace Philosophy

This is an editorial-airy system. The black canvas swallows excess whitespace visually, so actual spacing values are generous — 80px between major sections, 24px+ around containers. The system refuses density; there's no marketplace-grid cramming here. Even the stamp cards have breathing room between them. This spaciousness reinforces the premium, magazine-like positioning.

Header Architecture

|-----------------------------------------------------------------------|
| [≡]  [🔍]                                              [Sign in] [Subscribe] |
|                                                                       |
|                           EVERY                                       |
|                                                                       |
|-----------------------------------------------------------------------
  ↑{spacing.base} px horizontal          pill button {rounded.pill}
  sticky at top-0 on 976px+
  bg-black ({colors.surface-soft})

Navigation is a sticky header (at 976px breakpoint and above) with flush-left icon buttons (menu hamburger, search), flush-right utilities (Sign in text link, Subscribe pill button), and a massive centered "EVERY" wordmark below the utility row. The header spans full viewport width with the black background extending edge-to-edge.

Hero Section

|-----------------------------------------------------------------------|
|                                                                       |
|                           EVERY                                       |
|                                                                       |
|     The Only Subscription You Need                                    |
|     to Stay at the Edge of AI                                         |
|                                                                       |
|              Trusted by 100,000 builders                              |
|                                                                       |
|                    [ Subscribe ]                                      |
|                                                                       |
|  [🟩 Read] [🟦 Email] [🟪 Speak] [🟥 Listen] [🟧 Write] [🟨 Organize]   |
|                                                                       |
|-----------------------------------------------------------------------
  centered single column
  headline: {typography.display-lg}, {colors.ink}
  subheadline: {colors.disabled} (75% opacity)
  CTA: {component.hero-cta-subscribe}
  stamps: horizontal scrollable row (mobile), static grid (desktop)

The hero is the entire above-fold experience. It combines the wordmark (which lives inside the nav area), the editorial headline in Signifier serif, a de-emphasized trust signal, a single cyan CTA, and the colorful stamp card row acting as both feature illustration and visual anchor.

Stamp Card Row

The six stamp cards (Read, Email, Speak, Listen, Write, Organize) render as a horizontal scrollable carousel on mobile (overflow-auto) with JS-driven infinite scroll behavior, and as a static flex/grid row on desktop. Each card uses its dedicated {colors.stamp-*} background token with {rounded.stamp} geometry (rounded top, sharp bottom corners mimicking postage stamps).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border, direct on {colors.surface-soft} | Hero band, navigation bar, page body | | 1 — Hairline | {colors.hairline} at 10% opacity | Subtle dividers (if any) | | 2 — Soft drop | {extensions.shadows.sm} — 0 1px 2px rgba(0,0,0,0.3) | Slight lift on hover states | | 3 — Modal/Dropdown | {extensions.shadows.md} — 0 4px 12px rgba(0,0,0,0.35) | Drawers, dropdown menus | | 4 — Elevated panel | {extensions.shadows.lg} — 0 10px 32px rgba(0,0,0,0.35) | Privacy popup, floating panels | | 5 — Card depth | {extensions.shadows.card} — same as lg | Stamp cards when elevated |

The depth philosophy here is layered-minimal. Because the base canvas is pure black, traditional drop shadows don't "read" the same way they do on white. Shadows are darker and more blended — notice all shadow definitions use rgba(0,0,0) at 30-35% opacity, never colored or cool-toned. Elevation is communicated more often through background value shifts (moving from #000000 to #18181b to #2c2c2c) than through shadows. The system prefers color-block separation over cast shadows.

Stamp cards appear flat against the black canvas in the hero view, but would gain {extensions.shadows.card} elevation if floated as independent elements elsewhere.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small inner elements, minor rounding | | {rounded.DEFAULT} | 6px | Default radius for generic containers, inputs | | {rounded.md} | 8px | Panels, popups | | {rounded.lg} | 10px | Cards, larger containers | | {rounded.xl} | 12px | Major containers | | {rounded.stamp} | 5px 5px 0px 0 | Stamp cards — rounded top, square bottom (signature shape) | | {rounded.pill} | 9999px | Buttons, subscribe CTAs, fully rounded elements | | {rounded.full} | 9999px | Avatar circles, icon circles |

Photography Geometry

Imagery in this system appears primarily as stamp card illustrations — each stamp contains a vintage-style graphic (newspaper texture for Read, envelope for Email, microphone for Speak, bust for Listen, typewriter for Write, building for Organize). These are rendered as flat illustrations within the stamp card containers using {rounded.stamp} corner treatment. No photographic photography is visible in the hero; the visual language is illustrative and graphic. Aspect ratio for stamps appears roughly 3:4 or similar portrait proportion within the stamp frame.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.nav-subscribe-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.nav-subscribe} — The primary conversion button in the navigation bar. Bright cyan background ({colors.accent-cyan}), black text ({colors.body}), fully pill-shaped ({rounded.pill}), with horizontal padding of 20px and vertical of 8px. Uses {typography.button} at 15px weight 400. Its hover state is {component.hero-cta-subscribe-hover} which darkens the cyan slightly. This same component style is reused in the hero as {component.hero-cta-subscribe} with slightly larger padding (24px horizontal, 10px vertical).

{component.hero-cta-subscribe} — The hero's primary call-to-action button. Identical styling to {component.nav-subscribe} with marginally larger padding for prominence. Positioned below the "Trusted by 100,000 builders" subheadline. On interaction, transitions to {component.hero-cta-subscribe-hover}.

{component.nav-sign-in} — Ghost/text button for authentication. Transparent background, white text ({colors.ink}), {typography.button-nav} at 16px. No border, no background fill — purely typographic. Located to the left of the Subscribe pill in the nav.

{component.nav-icon-button} — Icon-only buttons for menu toggle (hamburger) and search. Transparent background, white icon color, 24×24px hit area. No visible border or background treatment.

Navigation

{component.top-nav} — The persistent header container. Black background spanning full viewport width, containing the utility row (icons left, actions right) and the centered "EVERY" wordmark below. Becomes position: sticky; top: 0 at 976px+. Height is auto-determined by content (logo + padding). Internal padding is {spacing.base} horizontal, {spacing.xl} (24px) top, and {spacing.section-xl} (80px) bottom on desktop (50px at 976px).

{component.nav-logo} — The "EVERY" wordmark. Uses {typography.display-xl} at 96px in the custom Every/Signifier serif. Centered horizontally in the nav, sitting below the utility row. White on black. No background, no border — pure typography.

Hero Components

{component.hero-band} — The full-viewport-height hero section container. Black background ({colors.surface-soft}), spanning edge-to-edge. Contains the headline, subheadline, CTA, and stamp row vertically stacked and centered. Vertical padding of {spacing.section-xl} (80px).

{component.hero-headline} — The main headline: "The Only Subscription You Need to Stay at the Edge of AI". {typography.display-lg} at 52px, Signifier serif, weight 400, white text. Center-aligned. Line height 1.1 ensures tight leading appropriate for display size.

{component.hero-subheadline} — "Trusted by 100,000 builders". {typography.caption} at 15px, white at 75% opacity ({colors.disabled}). Creates clear hierarchy separation from the headline above.

Stamp Cards

{component.stamp-card} (and variants read, email, speak, listen, write, organize) — The signature visual components of the Every brand. Each is a rectangular card with {rounded.stamp} corner treatment (5px radius on top corners only, sharp bottom). Background color cycles through the six stamp palette tokens ({colors.stamp-green} through {colors.stamp-yellow}). Text is white ({colors.ink}) at {typography.title-lg} (32px, weight 500, Switzer sans-serif). Internal padding is {spacing.lg} (20px). Each contains a vintage-style monochrome illustration matching its label concept.

These six components are structurally identical except for their backgroundColor value. They render as a horizontally scrollable row on mobile (with JS infinite-scroll behavior detected in the extracted scripts) and as a static grid/flex row on desktop. They sit directly on the black hero background with no card shadow in this view.

Input & Form Components

{component.text-input-light} — Standard text input with light background. White canvas ({colors.canvas}), black text ({colors.body}), 14px font size, {spacing.sm} (8px) internal padding, {rounded.DEFAULT} (6px) radius. No visible border (border is 0px none). Used wherever a form field appears on a dark page — the white box creates strong affordance.

{component.text-input-dark} — Transparent-background input for dark-surface contexts. Transparent background, white text ({colors.ink}), 16px size, no padding visible, no border. Used for subtler input needs like search fields within the dark nav.

{component.checkbox-input} / {component.checkbox-checked} — Checkbox form control. White background ({colors.canvas}) with {colors.border-input} (gray) 1px border. Check mark color is {colors.primary} (blue). Square (radius 0), 16px size.

Overlay & Drawer Components

{component.drawer-overlay} — Semi-transparent backdrop for the mobile navigation drawer. Black at 50% opacity (rgba(0, 0, 0, 0.5)), fixed position covering full viewport, z-index 100000. Fades in/out with opacity transition.

{component.drawer-panel} — Slide-out navigation drawer. Full-height fixed panel from left edge, black background ({colors.surface-soft}), white text. Contains navigation links vertically stacked. Padding {spacing.xl} (24px). Transforms in from -100% left position. Has thin scrollbar styling for dark UI context.

{component.privacy-popup} — Fixed-position informational popup (bottom-left). {colors.surface-elevated} background (#18181b), {colors.muted} text, {typography.body-sm}, {rounded.md} (8px) corners, {spacing.md}/{spacing.lg} internal padding. Shadow {extensions.shadows.md}.

Layout Containers

{component.main-container} — The primary content wrapper. Transparent background, max-width 1280px, centered with mx-auto. Padding: 24px top, 16px horizontal, 48px (12×4px) bottom. Contains the article/content grid.

{component.section-container} — Full-width section wrapper. Black background, no max-width constraint (spans 1440px), no padding. Used for hero and header sections that extend edge-to-edge.

{component.content-grid} — Multi-column grid for articles/posts. Transparent background, switches from 1-column (mobile) to 5-column (976px+) to 4-column (1099px+). Gap collapses to 0 at 1099px+ for seamless card-to-card rendering.

Label & Metadata Components

{component.author-label} — Author attribution text. Transparent background, white text, {typography.label-sm} (14px, weight 500), uppercase via CSS text-transform, tight letter-spacing (0.02em). Used for bylines like "Every Staff" or author names.

Do's and Don'ts

Do

• Do use {colors.accent-cyan} (#c0f0fb) for all primary CTAs and conversion buttons — this bright cyan is the system's sole voltage color against black, not {colors.primary} blue.
• Do keep display typography at font-weight 400 maximum — the system achieves hierarchy through size (up to 96px), family contrast (serif vs. sans), and opacity ({colors.disabled} at 75% for secondary text), never through bolding.
• Do apply {rounded.stamp} (5px top-radius, 0px bottom) to all stamp card components — this asymmetric corner treatment is the signature shape motif that makes the brand memorable.
• Do reserve Signifier (or Playfair Display substitute) for display/headline roles only — navigation, buttons, labels, and body text must use Switzer/Inter sans-serif.
• Do maintain {spacing.section-xl} (80px) vertical gaps between the hero band and content sections — this generous whitespace is essential to the editorial, uncluttered feel.
• Do use {colors.surface-soft} (#000000 pure black) as the primary page background — avoid dark grays for the main canvas; save {colors.surface-strong} and beyond for elevated containers.
• Do set {typography.display-xl} (96px) letter-spacing to -0.02em — large serifs need slight tightening to prevent optical loosening at display sizes.
• Do make the mobile menu drawer cover the full viewport height with {component.drawer-panel} sliding from -100% left position — the extracted JS confirms this slide-in pattern.
• Do apply {rounded.pill} (9999px) to all subscribe/conversion buttons — the fully rounded shape reads as friendly and modern against the stark black canvas.
• Do render stamp card text in {typography.title-lg} (32px, weight 500, sans-serif) even though the cards are illustrative — the label typography is intentionally large and bold relative to typical card designs.

Don't

• Don't use {colors.primary} (#2563eb blue) as a button background — this blue is reserved for links and checkbox accents; CTAs must use {colors.accent-cyan}.
• Don't introduce gradient overlays, blur effects, or glassmorphism on any surface — the design is explicitly flat and color-block based; depth comes from value shifts (#000000 → #18181b), not frosted glass.
• Don't add visible borders to buttons or nav items — the system relies on color contrast (cyan on black, white on black) for affordance, never strokes.
• Don't use font-weight above 500 for any element — the heaviest weight in the entire system is 500 (on {typography.title-md} and {typography.label-sm}); going bold breaks the editorial restraint.
• Don't place light-gray text directly on {colors.surface-soft} black unless it's at 75%+ opacity — pure {colors.muted} (#d6d3d1) is for slightly lighter surface contexts; hero subheadlines specifically need {colors.disabled} (75% white).
• Don't expand the radius vocabulary beyond the defined tokens — the system has clear semantics: {rounded.pill} for buttons, {rounded.stamp} for stamps, {rounded.DEFAULT}/{rounded.md} for everything else.
• Don't center-align body copy in content sections — the hero is centered by design, but the article grid below follows standard left-aligned editorial flow.
• Don't add drop shadows to stamp cards in the hero view — they sit flat on the black canvas; reserve {extensions.shadows.card} for when stamps float independently (modal contexts, etc.).
• Don't mix serif into UI controls — checkboxes, inputs, and navigation must stay in the Switzer/Inter sans-serif family; serif is for voice/display only.
• Don't reduce the hero headline below 52px ({typography.display-lg}) — this size is the minimum for proper display impact in the editorial hierarchy.

Motion & Animation

Transition Tokens

Extracted CSS transitions from the live DOM:

/* Core transition */
--transition-base: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Transform-only transitions */
--transition-transform-spring: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-transform-standard: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-transform-smooth: transform 0.3s cubic-bezier(0, 0, 0.2, 1);

/* Opacity transitions */
--transition-opacity-slow: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity-combo: opacity 0.25s, transform 0.25s;

The base transition duration is 150ms with the standard ease curve (cubic-bezier(0.4, 0, 0.2, 1)). Spring physics (cubic-bezier(0.34, 1.56, 0.64, 1)) are used for playful transform animations — note the overshoot values (1.56) indicating bounce. Opacity fades use longer durations (250ms–700ms) for graceful entrances/exits.

Keyframe Animations

The following keyframe names were detected in the stylesheet (likely from an animation library like animate.css being bundled):

• ping — Radiating indicator pulse (notification dot).
• pulse — Gentle scale pulse (loading states).
• scroll — Continuous scroll offset (marquee/stamp carousel).
• spin — Full rotation (loading spinners).
• enter / exit — Generic fade+slide entrance/exit (drawer, modals).
• checkmark — SVG path drawing animation (confirmation states).
• lightbox-fade-in / lightbox-fade-out — Image viewer overlay transitions.
• bounce, flash, rubberBand, shakeX, shakeY, headShake, swing, tada, wobble, jello, heartBeat — Attention-grabbing micro-animations from animate.css library. Likely used sparingly for delight moments, not core UI.

Interaction Patterns

• Drawer slide-in: The mobile navigation drawer animates from translateX(-100%) to translateX(0) using transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) with an overlay fade (opacity 0.7s). Detected in the inline <script> block controlling openDrawer/closeDrawer.
• Stamp carousel scroll: Horizontal infinite scroll on mobile using the scroll keyframe. JS-driven with DOMContentLoaded listener for mobile detection.
• Hover spring: Elements with --transition-transform-spring (0.3s with cubic-bezier overshoot) likely lift or scale subtly on hover — common for stamp cards and buttons.
• Focus rings: No explicit focus-ring tokens detected, but inputs would gain browser-default or Tailwind focus outlines on interaction.
• Sticky nav reveal: At 976px+, the header becomes position: sticky; top: 0 — no scroll-animation detected for show/hide, just standard sticky behavior.

Imagery Style

• Illustration-dominant, not photographic: The hero and feature visuals use flat, vintage-style graphic illustrations (envelope, microphone, classical bust, typewriter, newspaper texture, architectural columns) rather than photography. This reinforces the editorial/publication identity.
• Monochrome on color: Illustrations within stamp cards render in white or off-white line-art style against saturated color backgrounds — high contrast, screen-print aesthetic.
• Stamp/postcard metaphor: The {rounded.stamp} corner treatment + "mail" concepts (Read= newspaper, Email=envelope, Speak=microphone) evoke postal stamps, postcards, and collected correspondence — suggesting ideas "delivered" to subscribers.
• Saturated, flat color blocks: Each stamp gets a single solid background from the six-stamp palette. No gradients, no textures, no shadows within the card itself.
• Collectible arrangement: The six cards are presented as a set/series — equal sizing, consistent labeling convention, sequential left-to-right order implying completeness.
• No hero photography or 3D: Unlike many SaaS landing pages, Every avoids stock photos, abstract 3D shapes, or gradient meshes entirely. The visual language is graphic-design-first.
• Vintage/historical illustration style: The art direction skews retro-classical (Roman bust for Listen, typewriter for Write) — aligning with the "ideas worth keeping" editorial posture.
• Full-bleed potential: While shown inline on the hero, these stamp graphics would work as full-bleed section backgrounds or alternating-band imagery lower on the page.

Icon System

• Library: Custom SVG icons (no icon font library detected in the extracted data). The framework.iconLibs array is empty.
• Specific icons observed:
  • Hamburger menu (three horizontal lines) — {component.nav-icon-button}
  • Search/magnifying glass — {component.nav-icon-button}
  • Checkbox checkmark (SVG-based, animated via checkmark keyframe)
• Treatment: Icons use currentColor inheriting from parent text color (white {colors.ink} on dark surfaces). Size appears to be 20–24px for nav icons, 16px for inline/utility icons. Stroke-based rendering (not filled).
• Alignment: Icons are flex-aligned center with adjacent text (detected flex items-center gap-2 classes on buttons with icons). Gap between icon and text is approximately 8px ({spacing.sm}).
• Logo as typographic icon: The "EVERY" wordmark functions as the primary brand icon/mark — it's pure typography at 96px using the Every or Signifier font, not a graphical symbol.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Astro — SSR-friendly, matches the 
                  static-home / posts routing structure detected in classes
- Styling:        Tailwind CSS v3+ (definitive — framework.tailwindLikely: true,
                  utility classes pervasive: px-4, py-6, bg-black, max-w-1280,
                  grid-cols-5, etc.)
- Fonts:          Self-hosted woff2 files (Signifer/Switzer proprietary) +
                  Google Fonts fallbacks: Playfair Display (serif substitute),
                  DM Sans / Inter (sans substitute, Inter already loaded)
- Animation:      CSS transitions + @keyframes (animate.css bundle detected),
                  vanilla JS for drawer/carousel logic
- Icons:          Custom SVG inline (Lucide optional for consistency if needed)
- Component lib:  None (custom components; no Radix/shadcn detected)
- Build:          Vite or Next.js built-in (font-face declarations suggest 
                  asset pipeline handling woff2 splitting)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 976px | Single-column layout, hamburger menu, stamp carousel scrolls horizontally, hero padding reduced, drawer overlay active | | Tablet | 976px – 1099px | Sticky header activates, 5-column content grid, hero min-height 94dvh, nav bottom padding increases to 50px | | Desktop | 1099px – 1280px | 4-column content grid (gap collapses to 0), max-content 1280px container | | Wide | > 1280px | Full 1440px header/hero sections, 1280px constrained content area |

Breakpoint values derived from Tailwind responsive prefixes detected: 976: (appears 8+ times for sticky nav, grid changes, padding adjustments), 1099: (grid column count change), 1280: (max-width constraint).

Touch Targets

• {component.nav-subscribe} / {component.hero-cta-subscribe}: ~44px+ height (8px–10px vertical padding + 15px text ≈ 38–40px, approaching WCAG AAA). Pill shape extends touch area.
• {component.nav-icon-button}: 24×24px icon with transparent expanded hit area (padding inferred from container). Should be expanded to minimum 44×44px for mobile touch compliance.
• {component.stamp-card}: Full card is tappable — estimated 140–200px wide × 180–220px tall on mobile. Exceeds 44×44mm minimum easily.
• {component.text-input-light}: Height determined by 14px font + 8px padding ≈ 36–40px. Recommend increasing to 44px minimum for mobile.

Collapsing Strategy

• Navigation: Below 976px, the horizontal nav collapses to a hamburger menu icon ({component.nav-icon-button}) triggering the {component.drawer-panel} slide-in overlay with full-screen navigation links. Above 976px, nav is always visible with sticky positioning.
• Hero layout: Remains single-column centered at all breakpoints. Font size may reduce on mobile (not explicitly detected but implied by 52px being very large for small screens). The stamp row switches from static grid to horizontal overflow scroll (overflow-auto with JS infinite-loop behavior).
• Content grid: Collapses from 4-column (1099px+) → 5-column (976px+) → 1-column (mobile). Gap between cards collapses to 0 at 1099px+, suggesting无缝 card edges at larger sizes.
• Header padding: Nav vertical padding increases from 24px (mobile) to 50px (976px+) to 74px+ (larger screens) — the hero breathes more as viewport grows.

Image Behavior

• Stamp cards: Maintain aspect ratio across breakpoints. On mobile, they're narrower (fitting ~2 visible in viewport with overflow scroll). On desktop, all 6 fit in a row with consistent spacing.
• Hero illustration row: The stamp carousel uses will-change: transform hint (detected in .hero-scroll-container style) for GPU-accelerated horizontal scrolling on mobile.
• Logo/wordmark: "EVERY" scales responsively — at 96px it's optimized for desktop; mobile likely reduces via fluid typography or breakpoint-specific sizing (not explicitly extracted but standard practice).

Iteration Guide

1. Start with the canvas. Initialize your project with {colors.surface-soft} (#000000) as the root background. Set CSS variables for every color token in the frontmatter before writing any component code — this system is meaningless without exact hex values.

2. Implement the type system first. Define @font-face declarations for Inter var (already partially present in the extracted font-faces — complete the unicode range coverage). Map Signifier → Playfair Display and Switzer → DM Sans via @import from Google Fonts as fallbacks. Create .font-display and .font-ui utility classes mapping to the font-family stacks.

3. Build the navigation shell. Implement {component.top-nav} as a sticky header (sticky activates at 976px) with the ASCII layout: hamburger + search (left), Sign in link + Subscribe pill (right), EVERY wordmark centered below. The Subscribe button must use {colors.accent-cyan} background with {rounded.pill} — this is the most recognizable UI element.

4. Construct the hero band next. Single centered column: {typography.display-lg} headline (Signifier, 52px, weight 400), {typography.caption} subheadline at {colors.disabled} (75% opacity white), then {component.hero-cta-subscribe}. Wrap in {component.hero-band} with 80px vertical padding.

5. Build the stamp card row as a sub-system. Create a base stamp-card component accepting a color prop (mapping to {colors.stamp-*} tokens). Apply {rounded.stamp} (5px 5px 0 0) — this is non-negotiable for brand recognition. Render all 6 variants (Read through Organize). Implement horizontal scroll with overflow-auto on mobile; detect 976px+ breakpoint to switch to flex/grid static row.

6. Wire up the mobile drawer. Implement {component.drawer-panel} as a fixed full-height panel starting at translateX(-100%). Add {component.drawer-overlay} at z-index: 100000 with background: rgba(0,0,0,0.5). Connect the hamburger icon to a JS toggle using the openDrawer/closeDrawer pattern detected in the extracted <script> block. Add transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1).

7. Set up the content grid below the hero. Use {component.main-container} (max-width 1280px, centered) wrapping {component.content-grid}. Implement responsive column switching: 1 col (< 976px), 5 cols (976px–1099px), 4 cols (1099px+). Collapse gap to 0 at 1099px+ per the extracted 1099:gap-0 class.

8. Add state variants per your stack's conventions. The spec documents Default and Active/Pressed for buttons and inputs. Add :hover states yourself: {component.nav-subscribe} hover should darken {colors.accent-cyan} slightly toward #9ae0f5; {component.stamp-card} hover should apply transform: translateY(-4px) with the spring easing (cubic-bezier(0.34, 1.56, 0.64, 1)) and {extensions.shadows.md}.

9. Validate token resolution. After implementing, run a script checking that every {token.path} reference in your codebase resolves to a defined token. Broken refs (like using {colors.accent} instead of {colors.accent-cyan}) are the most common implementation error in this system because of the specific accent-cyan naming.

10. Respect the motion budget. Limit animations to the extracted transitions: 150ms base, 300ms for transforms with spring physics for playful moments (stamp hovers, drawer slides). Avoid adding new animation types — the animate.css bundle detected suggests the project imports a comprehensive library but uses only 2-3 patterns (enter/exit, checkmark, scroll). Restraint is part of the brand.

Font Setup for Implementation:

/* Add to your global CSS or tailwind.config.js fontFamily extension */
:root {
  --font-display: 'Signifier', 'Playfair Display', 'Hoefler Text', 'Baskerville Old Face', Garamond, Georgia, 'Times New Roman', serif;
  --font-ui: 'Switzer', 'Inter var', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Switzer', 'Signifier', 'Inter var', 'Hoefler Text', Georgia, serif;
}

/* Tailwind config */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: ['var(--font-display)'],
        ui: ['var(--font-ui)'],
        body: ['var(--font-body)'],
      },
    },
  },
};

Load Inter from Google Fonts: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
Load Playfair Display as Signifier substitute: <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400..900&display=swap" rel="stylesheet">

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are absent from this spec. The {component.hero-cta-subscribe-hover} entry provides the active/pressed anchor, but subtle hover lifts, color shifts, and cursor feedback must be implemented at build time.
• Loading/skeleton states: No loading spinner, skeleton placeholder, or pending-state styling was extractable from the static screenshot. The pulse and spin keyframes suggest these exist but their DOM targets weren't visible.
• Form validation states: Beyond the basic checkbox and text input, error states ({colors.error}), success states ({colors.success}), and validation messaging layouts are not represented in the above-fold content.
• Authenticated/user dashboard surfaces: The screenshot shows the public/home page only. Subscriber dashboard, settings pages, reading list views, and authenticated navigation states are unknown.
• Article/detail page layout: The content grid container exists but no individual article card component, reading view, or typography-for-long-form was captured.
• Footer component: No footer was visible in the screenshot or extracted DOM. Copyright, links, newsletter signup footer (common on editorial sites) is undocumented.
• Exact stamp card dimensions: Width and height of stamp cards are inferred from visual proportion (~3:4 aspect, ~160px–200px wide on desktop). Pixel-exact values require measuring the rendered output.
• --theme_xxx variable misleading: No misleading CSS variable names were detected in this extraction — the codebase uses Tailwind utility classes predominantly rather than semantic CSS custom properties for theming, reducing substitution risk.
• Search interaction: The search icon ({component.nav-icon-button}) is present but the search overlay/expansion behavior, input focus state, and results dropdown are completely absent from the static capture.
• Dark/light mode toggle: The system is dark-only (extensions.mode: "dark"). No light mode variant, toggle mechanism, or alternative surface tokens for a light theme were detected or implied.