Unsiloed AI Design System

Overview

Unsiloed AI presents a restrained, technically-minded visual identity built for enterprise credibility without sacrificing warmth. The design lives on a warm off-white canvas ({colors.canvas} — #f8f8f8) that feels more approachable than clinical pure white, while maintaining the precision expected of infrastructure-grade AI tooling. Near-black text ({colors.ink} — #000000) anchors headlines and UI chrome, stepping down to softer grays ({colors.body}, {colors.body-alpha}) for supporting copy, creating clear typographic hierarchy through color temperature alone before size or weight enters the equation.

The single brand voltage moment arrives in a vivid coral-orange ({colors.primary} — #f26522), deployed sparingly but strategically: it powers the Y Combinator badge accent in the hero's backing credential strip, and serves as the signature action color across the system. This color never backgrounds large surfaces—it operates at badge-scale and interactive-element-scale, functioning as a highlight rather than an environment. When paired against the near-black of the primary CTA button ({button-primary}), the contrast creates a binary action language: filled dark buttons for commitment actions, ghost/outlined alternatives for secondary paths.

The typography system centers on General Sans, a geometric grotesk with humanist undertones that reads cleanly at both the massive 52–56px display weights ({typography.display-lg}) and the compact 13–16px body scales ({typography.body-md}). Headlines carry significant negative letter-spacing (−1.04px at display sizes, −0.48px at title sizes), tightening the rhythm for a premium, editorial feel. A secondary typeface—ABC Favorit Mono—appears exclusively in label contexts ({typography.label}), lending a terminal-like, developer-facing voice to credential badges and metadata strips. This mono/dual-sans pairing signals "technical product" without resorting to code-editor aesthetics.

Shape language is aggressively minimal: the dominant radius is a mere 2px ({rounded.sm}), visible on the primary button and input fields. Corners are barely softened—this isn't a "friendly app" rounded-language; it's precision-tool geometry where sharpness conveys accuracy. The one exception is the isometric illustration treatment in the hero, which uses its own internal perspective rules rather than the component radius system.

Sub-systems visible include the hero dialect (large-type left rail + isometric right rail), the marquee dialect (full-width logo ticker stripes), and the credential badge dialect (monospace brackets with inline color highlights). These operate as distinct compositional modes within the same token set rather than requiring separate palettes.

Key Characteristics

• Warm off-white canvas ({colors.canvas} — #f8f8f8) replaces stark white for reduced eye strain and approachable tone
• Coral-orange brand accent ({colors.primary} — #f26522) reserved for badges and highlights, never large backgrounds
• Display typography at 52–56px with 600 weight and −1.04px tracking creates tight, confident headlines
• Mono label typeface ({typography.label} — ABC Favorit Mono, 13px) for technical credentials and metadata
• Minimal 2px border radius ({rounded.sm}) across all interactive components signals precision-tool positioning
• Near-black primary button ({button-primary} — #191919 background) provides maximum commitment-action contrast
• Body text uses 65% opacity black ({colors.body-alpha}) to create secondary hierarchy without introducing new hues
• Sticky navbar ({component.top-nav}) with transparent background matching canvas for seamless scroll continuity
• Full-width marquee sections with animated logo tickers create social proof bands without breaking the grid

Colors

Brand & Accent

• Primary ({colors.primary} — #f26522): Vibrant coral-orange used exclusively for brand-accent moments—the "Y" highlight in the Y Combinator badge, potential icon fills, and hover states on secondary elements.
• Primary Hover ({colors.primary-hover} — #e55a1b): Slightly deepened coral for interactive hover states on accent-colored elements.
• Primary Active ({colors.primary-active} — #cc500f): Pressed/depressed state for accent-colored interactive surfaces.
• Accent ({colors.accent} — #f26522): Alias for primary; the system treats them as identical in current usage.

Surface

• Canvas ({colors.canvas} — #f8f8f8): Primary page background—a warm neutral off-white that underlies the navbar, hero band, and all major sections.
• Surface ({colors.surface} — #fefefe): Slightly warmer white used for elevated cards and content containers (the article card uses this).
• Surface Strong ({colors.surface-strong} — #eeeeee): Medium-light gray for subtle surface differentiation and hover backgrounds on ghost buttons.
• Surface Dark ({colors.surface-dark} — #191919): Near-black used as solid fill for primary CTA buttons and high-emphasis surfaces.
• Surface Darker ({colors.surface-darker} — #151515): Deepest black variant for hover states on dark-filled buttons.
• Surface Deep ({colors.surface-deep} — #171717): Alternative near-black shade observed in edge text-color contexts.

Text & Ink

• Ink ({colors.ink} — #000000): Pure black for maximum-contrast headlines, navigation links on hover, and primary UI text.
• Body ({colors.body} — #404040): Medium-gray for navigational link default states and secondary body text.
• Body Alpha ({colors.body-alpha} — rgba(0, 0, 0, 0.65)): 65%-opacity black for hero descriptive paragraphs and extended reading content—softer than solid #404040.
• Muted ({colors.muted} — #191919): Near-black for headline text (h1/h2 elements use this rather than pure black).
• Muted Alpha ({colors.muted-alpha} — rgba(25, 25, 25, 0.64)): 64%-opacity near-black for the "Log in" nav link default state.
• On Primary ({colors.on-primary} — #ffffff): White text on coral-orange and colored backgrounds—satisfies AA contrast against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): White text on dark-filled buttons ({button-primary}).

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e5e5): Light divider lines for subtle separation—used in the navbar bottom border and grid guides.
• Border Strong ({colors.border-strong} — #191919): Near-black borders for outlined/ghost buttons and strong containment edges.
• Border Input ({colors.border-input} — #e5e7eb): Tailwind-default light gray for input field borders when not focused.

Semantic

• Error ({colors.error} — #dc2626): Red for form validation errors and destructive action feedback.
• Success ({colors.success} — #16a34a): Green for confirmation states and successful operation indicators.
• Warning ({colors.warning} — #d97706): Amber for caution states and attention-required messaging.
• Info ({colors.info} — #2563eb): Blue for informational tooltips and help text.
• Link ({colors.link} — #191919): Near-black default for inline links—links don't use a distinct blue, they inherit text hierarchy.
• Link Active ({colors.link-active} — #000000): Pure black for visited/focused link states.

Typography

Font Family

The system employs a dual-typeface architecture centered on General Sans (from Fontshare) as the workhorse for all UI, headline, and body contexts. General Sans is a geometric grotesk with slightly humanist proportions—it avoids the coldness of pure geometric faces (like Futura) while maintaining the engineering clarity needed for an AI/developer tooling audience. The fallback stack cascades through Inter → system-ui → -apple-system → sans-serif, ensuring graceful degradation across platforms. For monospace contexts—specifically the bracketed credential badges ("[ BACKED BY Y COMBINATOR ]")—the system deploys ABC Favorit Mono Unlicensed Trial, a refined monospace face loaded via local @font-face declarations (WOFF2/WOFF). This mono voice signals "technical metadata" and differentiates labeling from prose.

The distinction between headline and body font stacks is subtle: headlines include the full Inter/system fallback chain ("General Sans", Inter, system-ui, -apple-system, sans-serif) while body text uses the shorter "General Sans", sans-serif form. Both resolve to General Sans in production but maintain semantic clarity in the stylesheet.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 600 | 1.05 (≈58.8px) | −1.12px | Reserved hero-level statements (future expansion beyond current 52px) | | {typography.display-lg} | 52px | 600 | 1.05 (≈54.6px) | −1.04px | Hero h1 headline—"Document layer for Enterprise AI" | | {typography.title-md} | 52px | 600 | 1.05 (≈54.6px) | −1.04px | Section-level h2 headlines (same spec as display-lg) | | {typography.title-sm} | 24px | 500 | 1 (24px exact) | −0.48px | Subsection h3 headings, card titles | | {typography.body-md} | 16px | 400 | 1.5 (24px) | 0 | Paragraph text, hero description | | {typography.body-sm} | 15px | 400 | 1.5 | −0.02em | Navigation links, secondary UI text | | {typography.caption} | 13px | 400 | 1.4 (≈18.2px) | 0 | Fine print, timestamps, metadata | | {typography.button} | 15px | 500 | 1 | −0.02em | Button labels, CTA text | | {typography.label} | 13px | 400 | 1.4 | 0 | Badge labels, technical credentials (mono) | | {typography.nav-link} | 15px | 400 | 1 | −0.02em | Navbar menu item defaults | | {typography.nav-link-medium} | 15px | 500 | 1 | 0 | Navbar "Log in" link (medium weight) |

Principles

The typography system trusts size first, weight second, color third for establishing hierarchy. At the display level (52–56px), headlines lock into 600 weight—a deliberate choice that avoids the fragile thinness of 300-weight display type while stopping short of the aggression of 700+. This 600-weight sweet spot feels "engineered" rather than "shouted." Negative letter-spacing tightens the display rhythm significantly (−1.04px at 52px equals roughly −2% of em-width), creating the dense, premium texture associated with editorial design and SaaS landing pages in the 2024+ era.

Body text sits comfortably at 16px/1.5 (24px leading)—generous enough for long-form reading but compact enough to feel "dashboard-ready." The choice of 65% opacity black ({colors.body-alpha}) over a medium-gray hex for paragraph text is architecturally significant: it means body text automatically adapts to any background darkness without manual color-token swapping (though the current design uses it only on light surfaces). Navigation links drop to 15px (not 16px) with −0.02em tracking, subtly distinguishing UI chrome from content prose through micro-typographic detail.

The monospace label face ({typography.label}) operates as a voice shift within the system. When readers encounter ABC Favorit Mono at 13px enclosed in brackets, they immediately register "metadata" or "credential"—the typographic equivalent of a code comment. This is deployed once above the hero headline and should be reserved exclusively for similar trust-signals (backed-by badges, API version strings, status indicators).

Note on Font Substitutes

General Sans is available via Fontshare's free CDN (already linked in the page's <head>). If Fontshare access is restricted, the closest Google Fonts equivalent is Inter (variable font recommended), which shares the same geometric-grotesk DNA though with slightly wider proportions and less character in the numeral set. Define the substitution via CSS variable:

:root {
  --font-sans: 'General Sans', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'ABC Favorit Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
}

For ABC Favorit Mono, substitute with JetBrains Mono or SF Mono if the licensed WOFF files are unavailable. The monospace role tolerates substitution more gracefully than the headline face since it operates at small sizes for functional (not expressive) purposes.

Layout

Spacing System

• Base unit: 2px (with 4px as the practical minimum increment).
• Tokens: {spacing.xxs} (4px — icon gaps, tight internals), {spacing.xs} (6px — badge padding), {spacing.sm} (8px — element gaps), {spacing.md} (10px — button padding axis), {spacing.lg} (14px — button padding cross-axis), {spacing.xl} (20px — component gaps), {spacing.xxl} (32px — section-internal margins), {spacing.section-xl} (40px — card internal padding), {spacing.section} (48px — vertical section rhythm), {spacing.section-hero} (70px — hero band vertical padding).
• Section padding (vertical): {spacing.section-hero} (70px) used in the hero band; {spacing.section} (48px) used in subsequent sections.
• Card internal padding: {component.article-card} uses 48px 40px (vertical × horizontal) — asymmetric to give horizontal breathing room.
• Gutters: The main content container spans 1440px max-width (observed in section/header widths); inner content columns sit at approximately 433px width for the hero text rail.

Grid & Container

The layout operates on a wide, single-column editorial grid for the hero: a left text rail (~433px wide with 48px/40px internal padding) paired with a right illustration rail that consumes the remaining viewport width up to the 1440px container boundary. There is no multi-column body grid visible in the above-fold screenshot—the design favors full-width bands with internally-constrained content. The navbar spans the full viewport width with internal alignment matching the 1440px content zone. The marquee stripe below the hero breaks out to true full-viewport width, ignoring the content container constraint.

At desktop widths, the hero splits approximately 40/60 (text/illustration). The CTA group sits flush-left beneath the subtext paragraph with {spacing.xl} (20px) top margin separating it from content.

Whitespace Philosophy

The system practices editorial generosity—whitespace is a structural material, not absence. The 70px hero vertical padding and 48px section padding create breathing room that signals confidence (this isn't a cramped template). However, component-internal spacing remains tight: button padding is 8px 14px, badge spacing is minimal. This contrast—loose macro-spacing, tight micro-spacing—is characteristic of modern SaaS design that wants to feel both spacious and precise.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [Logo]     Playground   Docs   Pricing   Resources   Careers   │
│                                          Log in    [Book demo] │
└─────────────────────────────────────────────────────────────────┘
← 1440px max-content →  ← sticky, bg-canvas, 64px height →

The navbar uses a sticky positioning strategy (sticky top-0 z-50) with {colors.canvas} background, creating a seamless scroll overlay. Logo anchors left, navigation items center-left with equal spacing, utility links (Log in, Book a demo) anchor right. The "Book a demo" button is the sole filled interactive in the nav.

Hero Section

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│  ┌─────────────────────┐    ┌────────────────────────────────┐  │
│  │ [BACKED BY Y🟠COMB.]│    │                                │  │
│  │                     │    │    ╭─────╮                     │  │
│  │ Document layer      │    │    │     │  Isometric          │  │
│  │ for Enterprise AI   │    │    │ Doc │  Illustration       │  │
│  │                     │    │    │ UI  │  (wireframe docs)   │  │
│  │ We turn PDFs...     │    │    │     │                     │  │
│  │                     │    │    ╰─────╯                     │  │
│  │ [Book demo][Read]   │    │                                │  │
│  └─────────────────────┘    └────────────────────────────────┘  │
│  ← ~433px text rail →       ← remaining width →                │
│  ← 1440px container max →                                    │
└──────────────────────────────────────────────────────────────────┘

The hero follows a classic B2B SaaS pattern: credential badge → headline (52px, 600 weight, {typography.display-lg}) → subtext paragraph (16px, {colors.body-alpha}) → dual CTA stack (primary filled + secondary ghost, horizontally adjacent). The right rail contains an isometric wireframe illustration depicting document/layer metaphors—rendered in fine-line style with {colors.hairline}-tone strokes.

Marquee / Stripe Section

Below the hero, a full-width band contains an animated logo ticker (marquee). Observed logos include Mercedes-Benz, Honeywell, MIT, Y Combinator—rendered in muted grayscale ({colors.muted} opacity variants). The stripe uses the stripe-marquee keyframe animation (detected in CSS keyframes list) for continuous horizontal scroll.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat baseline | No shadow, {colors.canvas} or {colors.surface} background | Page body, navbar, hero band, footer | | 1 — Hairline outline | 1px {colors.border-strong} or {colors.hairline} border, no shadow | Ghost buttons, input fields, card edges | | 2 — Soft lift | Subtle {extensions.shadows.md} (if applicable) | Dropdowns, modals (inferred) | | 3 — Modal/elevated | {extensions.shadows.lg} | Dialog overlays (inferred) |

The system is predominantly flat—no box-shadows were detected in the extracted CSS data. Elevation is communicated through background-color steps (canvas → surface → surface-dark) and border presence rather than Z-axis depth. The primary button achieves prominence through solid dark fill ({colors.surface-dark}) against the lighter canvas, not through shadow casting. This flat aesthetic aligns with the "precision-tool" brand voice: shadows imply physical objects floating in space; Unsiloed's interface feels like engineered planes.

Input fields and ghost buttons use 1px borders ({colors.border-strong} for buttons, {colors.border-input} for inputs) as their sole elevation signal. On focus, these borders would theoretically intensify (though focus-state styling wasn't fully captured in the static extraction).

If decorative depth exists beyond the above-fold view, it likely takes the form of the isometric illustration (which creates illustrative depth through perspective drawing, not CSS layering) and the animated marquee stripes (which add kinetic depth through motion).

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 2px | Primary buttons, secondary buttons, input fields, all rounded corners in the visible UI | | {rounded.DEFAULT} | 2px | Default/fallback radius (identical to sm) | | {rounded.md} | 4px | Future cards or containers needing slightly softer corners | | {rounded.lg} | 8px | Larger containers, image frames (potential) | | {rounded.xl} | 12px | Modals, prominent cards (potential) | | {rounded.pill} | 9999px | Tags, pills (potential future use) |

The 2px radius dominates every interactive component visible in the screenshot. This is a deliberately conservative shape vocabulary—corners are barely perceptibly softened. The effect reads as "manufactured precision" rather than "friendliness," appropriate for enterprise AI tooling where accuracy is the core value proposition. Future components (image avatars, tag pills, notification toasts) may justify expanding to {rounded.pill} for specific semantic cases, but the base UI should remain at {rounded.sm}.

Photography Geometry

No photography was detected in the above-fold view—the hero uses vector-style isometric illustration instead. Based on the illustration's wireframe aesthetic, imagery in this system would likely follow:

• Aspect ratio: Free-form/isometric (hero illustration ignores standard photo ratios)
• Corner treatment: Sharp (no rounding on illustrations)
• Style: Line-art/wireframe with selective fill, using {colors.hairline} tones and {colors.primary} accent spots

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.button-primary-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal call-to-action button, appearing in the navbar ("Book a demo") and hero CTA group. Solid {colors.surface-dark} (#191919) background with {colors.on-dark} (#ffffff) white text. Uses {typography.button} (15px, 500 weight, −0.02em tracking), {rounded.sm} (2px radius), and 8px 14px internal padding with a fixed 36px height. Features a 1px {colors.border-strong} border matching the background color (creating a crisp edge). On hover, transitions to {component.button-primary-hover} which shifts background to {colors.surface-darker} (#151515).

{component.button-primary-hover} — Active/hover state for the primary button. Background deepens from {colors.surface-dark} to {colors.surface-darker} (#151515), maintaining all other properties (text color, radius, padding). The transition uses the system's 150ms cubic-bezier timing ({extensions.motion.easing}).

{component.button-secondary} — Ghost/outline button variant, visible in the hero as "Read the docs". Transparent background with {colors.border-strong} (#191919) 1px border and matching text color. Same dimensions and typography as primary ({typography.button}, 36px height, 2px radius). Represents the lower-commitment action path alongside {component.button-primary}.

{component.button-secondary-hover} — Hover state for the secondary button. Gains a {colors.surface-strong} (#eeeeee) background fill while retaining the border, with text color shifting to {colors.ink} (#000000) for increased contrast.

Cards & Containers

{component.article-card} — Content card container with {colors.surface} (#fefefe) background—slightly warmer than the page canvas. Generous 48px 40px internal padding (asymmetric: more vertical than horizontal). Uses {typography.body-md} for default interior text and inherits {rounded.DEFAULT} (2px) corner radius. Would house blog posts, feature explanations, or documentation previews in expanded page sections.

{component.hero-band} — The full-width hero section wrapper. {colors.canvas} background matching the page base, with {spacing.section-hero} (70px) vertical padding. Contains the two-column hero layout (text rail + illustration rail). Typography defaults to {typography.display-lg} for child headline elements.

{component.stripe-marquee} — Full-viewport-width band for the logo ticker. {colors.canvas} background with {spacing.lg} (14px) vertical padding. Houses the animated logo row powered by the stripe-marquee keyframe. Logos render in {colors.muted} tones.

Navigation

{component.top-nav} — Sticky header bar spanning full viewport width, 64px tall. {colors.canvas} background ensures visual continuity with the page body during scroll. Contains the logo mark (left), navigation links (center-left), and utility actions (right). Typography for nav items uses {typography.nav-link} (15px, 400 weight). Includes the navbar-dash-march keyframe animation for a subtle decorative dash movement along the navbar bottom edge.

{component.nav-link} — Default state for navbar menu items (Playground, Docs, Pricing, Resources, Careers). Transparent background, {colors.body} (#404040) text color, {typography.nav-link} styling. No padding beyond inherent link spacing. Transitions to {component.nav-link-hover} on interaction.

{component.nav-link-hover} — Hover state for nav links. Text color intensifies to {colors.ink} (#000000) for clearer affordance. Transition follows the 150ms color-timing convention.

{component.nav-login-link} — The "Log in" utility link in the navbar's right cluster. Uses {typography.nav-link-medium} (15px, 500 weight) for slight emphasis over standard nav items. Color is {colors.muted-alpha} (rgba(25,25,25,0.64))—noticeably softer than nav links to indicate lower priority. Transitions to {component.nav-login-link-hover} on hover.

{component.nav-login-link-hover} — Hover state for the login link. Color shifts to {colors.muted} (#191919), gaining solidity from the semi-transparent default.

Labels & Badges

{component.badge-label} — The bracketed credential label visible above the hero headline ("[ BACKED BY Y 🟠 COMBINATOR ]"). Uses {typography.label} — the ABC Favorit Mono face at 13px, 400 weight. Text color is {colors.ink} (#000000) for the bracketed portions. The "Y" character and "COMBINATOR" text are split into a highlighted span using {component.badge-highlight}.

{component.badge-highlight} — Inline highlight segment within {component.badge-label}. {colors.primary} (#f26522) background (small rectangular block behind the "Y" or accent word) with {colors.on-primary} (#ffffff) text. In the observed implementation, the "Y" carries a solid orange square background while "COMBINATOR" renders in orange text without background—both reference the primary color.

Inputs & Forms

{component.text-input} — Standard text input field (inferred from system patterns, not directly visible in hero). {colors.surface} background, {colors.ink} text, {typography.body-md} sizing. {rounded.DEFAULT} (2px) radius with 10px 14px internal padding and 44px fixed height. 1px {colors.border-input} border in default state.

{component.text-input-focus} — Focused state for text inputs. Retains {colors.surface} background and radius; border would transition to {colors.primary} or {colors.border-strong} per implementation convention (focus ring not captured in static CSS).

Signature Components

{component.hero-headline} — The H1 element displaying "Document layer for Enterprise AI". {typography.display-lg} (52px, 600 weight, −1.04em tracking) with {colors.muted} (#191919) text. Line height compressed to ≈54.6px for tight vertical stacking.

{component.hero-subtext} — Descriptive paragraph beneath the headline ("We turn PDFs, images, and spreadsheets into JSON..."). {typography.body-md} (16px, 400 weight, 1.5 line height) with {colors.body-alpha} (rgba(0,0,0,0.65)) text color. Provides softer visual weight than the headline while remaining fully readable.

{component.hero-cta-group} — Container for the stacked CTA buttons in the hero. No background, positions {component.button-primary} and {component.button-secondary} horizontally with gap spacing. Has {spacing.xl} (20px) top margin separating it from {component.hero-subtext}.

{component.logo-item} — Individual logo mark within the marquee stripe. Transparent background, {colors.muted} grayscale rendering. Size and aspect ratio vary per brand logo (Mercedes star, Honeywell wordmark, MIT seal, Y Combinator "Y").

{component.footer} — Page footer section (partially inferred). {colors.canvas} background, {typography.body-sm} for legal/navigation text, {spacing.section} (48px) vertical padding. Would contain copyright, links, and compliance information.

Do's and Don'ts

Do

• Do use {colors.body-alpha} (65% opaque black) for extended reading text—it softens the optical density without introducing new hue families.
• Do apply {typography.label} (ABC Favorit Mono, 13px) exclusively for credential badges, version strings, and technical metadata; reserve General Sans for all prose.
• Do maintain the 2px {rounded.sm} radius on all buttons and inputs—the shape language signals precision manufacturing, not friendliness.
• Do pair {component.button-primary} (filled dark) as the left-most CTA when presented alongside {component.button-secondary} (ghost)—the visual weight hierarchy guides the eye to commitment-first actions.
• Do use negative letter-spacing (−0.02em to −1.04px depending on scale) for all headline and button text; neutral or positive tracking will break the premium, tightened rhythm.
• Do place the {component.badge-label} (bracketed mono credential) immediately above the {component.hero-headline} with tight vertical spacing—it acts as a "pre-headline" trust signal.
• Do render the sticky {component.top-nav} with {colors.canvas} background so it blends seamlessly into the page body during scroll; avoid solid white or frosted-glass treatments.
• Do constrain hero text rails to ~433–450px width in desktop layouts to preserve the 40/60 text-to-illustration balance.
• Do use {colors.primary} (#f26522) only at badge-scale and interactive-highlight scale; never apply it as a section background or large fill.
• Do implement the navbar-dash-march keyframe animation along the navbar's bottom edge for subtle kinetic branding—the moving dashes add life without distraction.

Don't

• Don't substitute {colors.link} (#191919) for {colors.primary} (#f26522) when adding accent color to new components—link color is near-black and functionally invisible as a "highlight."
• Don't increase display headline weight beyond 600—the 52px/600 combination is the maximum-boldness ceiling; 700+ will feel aggressive and unrefined.
• Don't round corners beyond {rounded.sm} (2px) on any button, input, or nav element; larger radii belong to future avatar/toast subsystems only.
• Don't use shadows for elevation on cards or dropdowns—the system communicates depth through background-value steps and borders, not Z-axis projection.
• Don't apply {typography.display-lg} (52px) below the hero section—that scale is reserved for the single H1 moment; use {typography.title-sm} (24px, 500 weight) for section headings.
• Don't let the {component.button-secondary} ghost button disappear against {colors.canvas}—its {colors.border-strong} border must remain clearly visible (avoid light-gray borders here).
• Don't introduce new font families beyond General Sans and ABC Favorit Mono; the dual-typeface system is intentionally minimal and cohesive.
• Don't expand the color palette with additional brand colors (secondary purples, gradient accents)—the monochromatic-plus-one-accent scheme is a deliberate constraint.
• Don't remove the negative letter-spacing from {typography.button} (−0.02em)—even at 15px, the tight tracking distinguishes UI chrome from body text.
• Don't center-align the hero headline on mobile without re-evaluating—the left-aligned, narrow-rail composition is part of the brand's editorial voice.

Motion & Animation

Transition Tokens

--transition-colors: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-all: all 0.15s ease;

The system uses a unified 150ms duration with the cubic-bezier(0.4, 0, 0.2, 1) ease (standard Material Design "ease-in-out" curve) for all color-related transitions. This is notably fast—transitions complete in a single eye-blink—reinforcing the "responsive tool" feel over "animated experience."

Keyframe Animations

• spin — Standard 360° rotation, typically used for loading indicators (detected in keyframes list).
• stripe-marquee — Continuous horizontal translation for the logo ticker band; moves logo items in an infinite loop across the viewport.
• navbar-dash-march — Subtle horizontal dash-pattern animation along the navbar's bottom edge or separator line; adds kinetic interest to the otherwise-static header.
• logo-marquee — Variant or alias of stripe-marquee for logo-specific scrolling behavior.
• login-spin — Rotation animation tied to the login flow (possibly a loading spinner on the auth button).
• hero-fade — Opacity transition for hero elements on page load (fade-in entrance).
• hero-line-draw — SVG stroke-dashoffset animation for illustrative line art in the hero (isometric wireframe "draws in" on load).
• ingest-fade — Secondary fade animation, possibly for content sections entering the viewport on scroll.

Interaction Patterns

• Nav link hover: Text color transitions from {colors.body} (#404040) to {colors.ink} (#000000) over 150ms—no underline or position shift.
• Button hover lift: Primary button background shifts from {colors.surface-dark} (#191919) to {colors.surface-darker} (#151515); ghost button gains {colors.surface-strong} (#eeeeee) background fill.
• Hero entrance: Combined hero-fade (opacity 0→1) and hero-line-draw (SVG stroke animation) create a staged reveal where text fades first, then the isometric illustration draws its strokes.
• Marquee scroll: Logo stripe moves at constant velocity (linear timing function implied by marquee pattern) in an infinite loop; direction alternates per implementation.
• Focus rings: Inputs and buttons would acquire a {colors.primary} (#f26522) outline or glow on keyboard focus (inferred from accessibility best practices, not explicitly captured).
• Navbar stickiness: Navbar transitions from position: relative to position: sticky on scroll (instantaneous, no animation)—the navbar-dash-march continues playing throughout.

Imagery Style

• Illustration technique: Vector isometric wireframe with fine-line strokes (likely 1px or 0.5px weight) in {colors.hairline}-range grays; depicts abstract document-layer UI panels floating in 3D space.
• Color treatment: Predominantly monochromatic (grayscale line art) with selective {colors.primary} (#f26522) accent spots—possibly chart bars, status indicators, or focal UI elements within the illustration.
• Subject matter: Abstract representations of document processing, layered data structures, or dashboard interfaces—metaphorical rather than literal screenshots.
• Role in layout: Supports the headline rather than dominating it; occupies the right 60% of the hero band with generous left margin from the text rail.
• Style consistency: Technical/blueprint aesthetic reinforces the "infrastructure for AI" positioning—this is not friendly-flat illustration, it's engineered-diagram illustration.
• Background treatment: Illustration sits on bare {colors.canvas} (#f8f8f8) without container card, shadow, or offset background—floats directly in the hero space.
• Animation behavior: Likely participates in the hero-line-draw keyframe, revealing strokes sequentially on page load for a "construction" effect.
• No photography detected: The entire above-fold relies on typography + line-art illustration + logo marks—no photographic imagery in the current design iteration.

Icon System

• Library: Custom SVG icons (no third-party library detected in the extracted CSS class names or font references).
• Specific icons observed:
  • Logo mark (stylized "U" with circuit/node motif) in navbar left
  • Y Combinator "Y" square mark (within the badge label)
  • Mobile hamburger menu icon (inferred from responsive classes showing md:hidden menu button)
  • Potential chevron/down-arrows in dropdown triggers (not visible in hero but implied by nav architecture)
• Treatment: Stroke-based rendering (implied by the technical aesthetic); color set to currentColor for inheritance from parent text color; likely 16px–20px size range for nav-context icons, 24px for standalone decorative icons.
• Alignment: Icons sit inline with text (navbar items) or act as standalone marks (logo); vertical-centering via flexbox items-center.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Remix — matches Tailwind usage patterns
- Styling:        Tailwind CSS v3.4+ (utility-first, detected via class naming conventions)
- Fonts:          General Sans via Fontshare CDN (@fontsource/general-sans npm alternative)
                   ABC Favorit Mono via self-hosted Woff2 (local /fonts directory)
- Animation:      Tailwind-built-in transitions + CSS @keyframes (no JS animation library required)
- Icons:          Custom SVG components (Lucide acceptable for missing icons in dev)
- Component lib:  None (hand-rolled components matching this spec) or Radix UI primitives for accessible dropdowns/dialogs

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column hero (text stacks above illustration); hamburger menu replaces horizontal nav; CTA buttons stack vertically; marquee slows or pauses | | Tablet | 768px – 1024px | Two-column hero returns but with narrower text rail (~350px); nav links may collapse to icon-only or abbreviated labels | | Desktop | 1024px – 1440px | Full layout as designed: 433px text rail, full navbar, side-by-side CTAs | | Wide | > 1440px | Container maxes at 1440px; hero illustration gains additional horizontal padding; marquee logos spread further apart |

Touch Targets

• {component.button-primary}: 36px height × ~100px width (with 14px horizontal padding + text) — meets WCAG AAA minimum (44px) on height; width exceeds minimum comfortably.
• {component.button-secondary}: Identical 36px height dimension — passes touch-target guidelines.
• {component.nav-link}: Text-only links rely on inherited line-height for tap area; recommend increasing padding to 8px 12px on mobile to hit 44×44px minimum.
• **`{component.nav-login-link}``: Same consideration as nav links—add explicit min-height on touch devices.

Collapsing Strategy

• Navigation: Horizontal nav links hide behind a hamburger menu icon (md:hidden class detected on a 28×28px button) at mobile breakpoints; the menu likely slides in as a drawer or drops down as a fullscreen overlay.
• Hero columns: The two-column hero (text left, illustration right) collapses to single-column with text rail first, illustration second, at widths below ~900px. The text rail expands to near-full container width.
• CTA group: Horizontally-adjacent {component.button-primary} and {component.button-secondary} stack vertically on mobile with gap spacing between them; primary button remains top-positioned.
• Badge label: The {component.badge-label} (monospace credential) maintains position above headline but may reduce font-size slightly (11–12px) on narrow screens to prevent line-wrapping within the brackets.
• Marquee stripe: Full-width logo ticker persists at all breakpoints but may reduce logo count (showing 3–4 logos instead of 6–8) and slow animation speed to prevent motion-sickness on mobile.
• Sticky navbar: Remains sticky at all viewport heights; height may reduce to 56px on mobile for increased screen real estate.

Image Behavior

• Hero isometric illustration: Scales down proportionally on mobile (maintaining aspect ratio) and shifts below the text column. May reduce stroke-weight visibility at small sizes—consider serving a simplified/mobile variant with fewer details.
• Logo marks in marquee: Scale uniformly with the ticker container; very detailed logos (like the MIT seal) may lose legibility below 400px viewport width—consider swapping to simplified wordmarks on mobile.
• No photographic imagery: Current design has no photos to manage; future additions should follow a 3:2 or 16:9 aspect ratio with {rounded.sm} (2px) corners if contained within cards.

Iteration Guide

1. Initialize with Tailwind CSS v3.4+ and configure the tailwind.config.ts to accept the tokens defined in this DESIGN.md's YAML frontmatter as design tokens (use CSS variables or Tailwind's extend.theme for colors/spacing/typography/radius).
2. Map every {section.token} reference to your implementation's token system before writing any component markup. Never hard-code hex values (especially #f26522, #191919, #f8f8f8, #000000) that have corresponding token definitions.
3. Build the sticky navbar first ({component.top-nav}) as it establishes the 1440px container width, 64px height, and {colors.canvas} background that all subsequent sections reference. Include the navbar-dash-march keyframe early to verify animation support.
4. Implement the hero band next ({component.hero-band}) with its 70px vertical padding and two-column grid. Place {component.badge-label} → {component.hero-headline} → {component.hero-subtext} → {component.hero-cta-group} in strict order with the specified spacing tokens.
5. Add state variants for each interactive component following the frontmatter's separate-entry pattern: {component.button-primary-hover} is a sibling entry, not a nested :hover pseudo-class in your component file. Apply these via your framework's state conventions (Tailwind's hover: variant, CSS &:hover, etc.).
6. Integrate fonts correctly: Load General Sans from the Fontshare CDN link already present in the source HTML (https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600). Self-host ABCFavoritMono-Trial-Regular.woff2 in /public/fonts/ and declare via @font-face matching the provided CSS. Define CSS custom properties --font-sans and --font-mono for consistent consumption.
7. Reserve {typography.label} (ABC Favorit Mono) strictly for bracketed credentials and technical metadata. If you need a monospace font elsewhere (code snippets, API examples), consider adding a separate {typography.code} role rather than overloading the label face.
8. Maintain the 2px radius ceiling for all current-scope components. If you need a pill-shaped tag or circular avatar later, add those as new rounded tokens ({rounded.pill}, {rounded.full}) rather than changing existing component radii.
9. Run npx @google/design.md lint DESIGN.md after any edits to catch broken token references (broken-ref), missing component entries (orphaned-tokens), and contrast-ratio failures (contrast-ratio). The linter validates that every {token.path} in the markdown body resolves to a frontmatter definition.
10. When extending the system (adding new pages, pricing tables, dashboard previews), decide which sub-system the new content belongs to: Editorial/Hero Dialect (large type, generous padding, isometric illustrations), Marquee Dialect (full-width, animated, logo-driven), or Form/Input Dialect (tight spacing, 2px radius, focus states). Each sub-system uses the same tokens with different composition ratios.

Font Setup

/* Add to global CSS or tailwind.config.ts */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');

:root {
  --font-sans: 'General Sans', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'ABC Favorit Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  
  /* Reference tokens */
  --color-canvas: #f8f8f8;
  --color-ink: #000000;
  --color-body: #404040;
  --color-primary: #f26522;
  --radius-sm: 2px;
  --spacing-section-hero: 70px;
}

For General Sans (Fontshare free tier): No authentication required; the CDN link above works globally. For ABC Favorit Mono: Download the trial WOFF2/WOFF files from Dalton Maag's trial portal and serve from /public/fonts/. If the license cannot be obtained, substitute with JetBrains Mono (Google Fonts, variable font supported):

/* Fallback if ABC Favorit Mono unavailable */
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are documented as separate frontmatter entries ({component.button-primary-hover}, etc.) but the exact property changes (box-shadow? transform: translateY(-1px)?) are inferred rather than extracted.
• Loading/pending states: No skeleton loaders, spinners (beyond the detected spin keyframe), or shimmer effects were visible in the static hero screenshot. The login-spin keyframe implies spinner existence but its visual design (size, color, stroke-width) is unknown.
• Form validation states: Beyond {component.text-input-focus}, error/success/warning input border colors and accompanying message typography are not represented. Map to {colors.error}, {colors.success}, {colors.warning} tokens when implementing.
• Dashboard/authenticated surfaces: The screenshot captures only the public marketing landing page. Dashboard interfaces, settings panels, authenticated user flows, and data-table designs are entirely unobserved and may introduce new component types (sidebar navigation, data viz charts, table headers).
• Pricing or feature-comparison tables: Not present in the above-fold view; these would require new sub-components (tier cards, checklist items, highlight rows) potentially using {colors.primary} for "featured" column backgrounds.
• Dark mode: Despite extensions.mode: "dark" in the pre-assigned values, the visual design is unequivocally light-themed (off-white canvas, dark text). The mode field may reflect a CMS setting or future intention rather than current appearance. A true dark mode would require inverting surface/text relationships and desaturating {colors.primary} for reduced-vibrance dark backgrounds.
• Exact pixel values for pastel surfaces: The {colors.surface} (#fefefe) and {colors.surface-strong} (#eeeeee) values are derived from the extracted RGB data but may have been sampled from anti-aliased edges or gradient stops; verify against design-source-of-truth if available.
• Responsive breakpoint pixel-values: While md: (768px) and lg: (1024px) Tailwind breakpoints are inferred from class-name conventions, the exact widths where the hamburger menu appears and the hero column collapses are estimated from typical Tailwind configurations.
• Accessibility focus-visible rings: No explicit :focus-visible outlines were captured in the CSS. Implement focus rings using {colors.primary} (#f26522) with 2px offset and 50% opacity for keyboard-navigation users, ensuring WCAG 2.4.7 compliance.
• Mobile navigation drawer: The hamburger menu's open state (drawer panel, backdrop, animation) is entirely unobserved. Design the drawer to match the navbar's {colors.canvas} background and {typography.nav-link} styling for consistency.