Hyperstudio Design System

Overview

Hyperstudio's visual identity is built on a foundation of radical darkness—a near-black canvas ({colors.surface-darker}) that allows content and imagery to breathe with cinematic confidence. This is not a timid dark mode; it's a deliberate atmospheric choice that positions the studio's work as premium, technical, and unapologetically modern. The system trusts in high-contrast legibility over safety margins, rendering headlines in {colors.body} at {typography.display-lg} scale with surgical precision.

Brand voltage lives sparingly but potently. The primary coral ({colors.primary}) appears on CTAs and interactive moments, never as a background wash. It's warm where the environment is cool, organic where the geometry is rigid. Secondary warmth emerges through the tan accent ({colors.surface-tan}) and blue-gray ({colors.surface-blue-gray}) surfaces that appear in project showcases, suggesting material variety without breaking the dark-mode contract.

The typographic signature is Aeonik—a geometric humanist sans-serif deployed at remarkably restrained weights (never exceeding 400). Hierarchy comes from dramatic size shifts rather than weight modulation: the jump from {typography.display-lg} at 63px down to {typography.body-md} at 17.3px creates a 3.6x ratio that feels architectural rather than typeset. Monospaced Input makes cameo appearances for labels and status indicators ({typography.label-md}), introducing a technical counter-voice that says "this was built by people who understand systems."

Shape language favors soft geometry without surrendering to pill-mania. Buttons use {rounded.md} (9–10px)—confidently round but still rectangular. Status badges go fully pill-shaped ({rounded.pill}). Cards breathe with {rounded.xl} (20px), softening the container edges while maintaining clear boundary definition. The overall impression is refined brutalism: structural clarity dressed in gentle curves.

Key Characteristics:

• Dark-first canvas at {colors.surface-darker} (#080808) with no light-mode alternative documented
• Single brand color {colors.primary} (#f74f39) — warm coral reserved for CTAs and links
• Display typography at 63px weight 400 via {typography.display-lg} with tight tracking (-0.7px letter-spacing)
• Monospaced label tier ({typography.label-md} using Input) for status badges and technical annotations
• Glass-morphism surfaces ({colors.surface-glass}, {colors.surface-glass-strong}) for elevated interactive elements
• Pill-radius pattern ({rounded.pill}: 99px) for badges and nav CTAs; moderate rounding (8–10px) for buttons
• Stippled/dot-matrix illustration style as signature decorative texture
• Opacity-based text hierarchy: {colors.body} → {colors.muted} → {colors.muted-soft} → {colors.muted-faded}
• Section spacing anchored at {spacing.section} (20px internal) scaling to {spacing.section-xxl} (80px vertical rhythm)

Colors

Brand & Accent

• Primary ({colors.primary} — #f74f39): Warm coral-red used exclusively on primary call-to-action buttons and hyperlink states. Appears as solid fill on {component.button-primary} backgrounds.
• Primary Hover ({colors.primary-hover} — #e03d28): Slightly deepened coral for interactive hover states on brand-colored elements.
• Primary Active ({colors.primary-active} — #c93321): Pressed/active state for primary interactions, providing tactile feedback depth.
• Link ({colors.link} — #f74f39): Alias for primary; used on standalone hyperlinks within body copy.
• Link Hover ({colors.link-hover} — #ff6b57): Lightened coral for link hover states, maintaining warmth while signaling interactivity.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white, used sparingly as button face fills ({component.button-primary}) and on primary CTA surfaces where maximum contrast against {colors.ink} is required.
• Surface Dark ({colors.surface-dark} — #101010): Standard content background for cards, sections, and secondary containers. Slightly lifted from pure black for perceptible depth.
• Surface Darker ({colors.surface-darker} — #080808): Deepest background—the hero band and footer ground. Creates maximum contrast envelope for headline typography.
• Surface Elevated ({colors.surface-elevated} — #141414): Input field backgrounds and hover-state surfaces; one step lighter than surface-dark.
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.10)): Subtle translucent overlay for ghost button hover states and glassmorphic panel treatments.
• Surface Glass Strong ({colors.surface-glass-strong} — rgba(255, 255, 255, 0.33)): High-opacity glass treatment for the nav CTA ({component.nav-cta-button}), creating distinct elevation without solid fill.
• Surface Tan ({colors.surface-tan} — #e7c59a): Warm metallic gold/tan appearing on signature showcase surfaces and select accent elements. Provides organic warmth against the cool dark palette.
• Surface Blue Gray ({colors.surface-blue-gray} — #a5b7bc): Muted blue-gray for secondary project surfaces and neutral decorative blocks.

Text & Ink

• Ink ({colors.ink} — #333333): Near-black for text rendered on light surfaces (white buttons, canvas contexts). The functional inverse of {colors.on-dark}.
• Body ({colors.body} — #f3f3f3): Primary text color for headlines and prominent body copy on dark surfaces. Cool-toned off-white with slight warmth.
• Body Solid ({colors.body-solid} — #f2f2f2): Non-transparent variant of body text for contexts requiring opaque rendering.
• Muted ({colors.muted} — rgba(255, 255, 255, 0.75)): Secondary text—nav links, supporting descriptions, metadata. 75% opacity preserves readability while receding.
• Muted Soft ({colors.muted-soft} — rgba(255, 255, 255, 0.60)): Tertiary text for captions, timestamps, and low-emphasis UI labels.
• Muted Faded ({colors.muted-faded} — rgba(243, 243, 243, 0.90)): Near-body opacity for transitional text states.
• On Dark ({colors.on-dark} — #f3f3f3): Alias for {colors.body}; explicit semantic token for any text-on-dark-surface context.
• On Primary ({colors.on-primary} — #333333): Text color for content overlaid on {colors.primary} backgrounds. Dark ink ensures WCAG compliance against the bright coral.
• On Surface ({colors.on-surface} — #ffffff): Pure white for highest-priority text on dark surfaces—hero headlines, active nav items, featured copy.
• Text Gray ({colors.text-gray} — #dadada): Medium-light gray for dividers, disabled states, and placeholder text in mixed contexts.
• Text Gray Deep ({colors.text-gray-deep} — #686868): Medium gray for subtle annotation text that must remain readable but clearly secondary.
• Text Subtle ({colors.text-subtle} — #cccccc): Light gray used in hover-state button backgrounds and subtle decorative lines.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.15)): Barely-visible dividers and rule lines. 15% white opacity creates separation without visual noise.
• Border Light ({colors.border-light} — rgba(255, 255, 255, 0.10)): Subtle borders for input fields and contained elements at rest state.
• Border Strong ({colors.border-strong} — #cccccc): Visible borders for focus rings, active containers, and emphasized boundaries.

Semantic

• Success ({colors.success} — #22c55e): Green for the availability dot indicator in {component.hero-status-badge} signaling open capacity/spots remaining.
• Error ({colors.error} — #ef4444): Reserved for validation errors and destructive actions (inferred; not directly observed in hero).

Typography

Font Family

The system is built on Aeonik, a geometric humanist sans-serif designed by CoType Foundation. Aeonik serves every role except monospaced annotations—it carries display headlines at 63px, body text at 17.3px, navigation at 13px uppercase, and button labels at 14px. Its character is clean, slightly wide-set, and confidently neutral without being generic. The fallback stack is Aeonik, sans-serif, ensuring graceful degradation to system fonts when the proprietary WOFF2 fails to load.

Input Mono (from Font Bureau) provides the technical counter-voice. Deployed at {typography.label-md} (17.5px), it renders status badges, availability indicators, and any element requiring a "system output" or "terminal" aesthetic. Its presence signals precision and engineering literacy. The fallback stack is Input, Arial, sans-serif.

Geist is declared in font-face definitions but does not appear prominently in above-fold typography; it may serve utility or body-copy roles in deeper page sections.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 400 | 1.05 | -0.04em | Hero-scale headlines (inferred for larger breakpoints) | | {typography.display-lg} | 63px | 400 | 1.05 | -0.011em | Primary hero headline, major section titles | | {typography.title-md} | 63px | 400 | 1.05 | -0.011em | Alternate title role at same scale (section headers) | | {typography.title-sm} | 23.3px | 400 | 1.07 | 0 | Card titles, sub-section headings | | {typography.label-md} | 17.5px | 400 | 1.31 | 0 | Status badges, technical labels (Input Mono) | | {typography.body-md} | 17.3px | 400 | 1.35 | 0 | Primary paragraph text, descriptions | | {typography.body-sm} | 15px | 400 | 1.5 | 0 | Secondary body, footnotes | | {typography.caption} | 14px | 400 | 1.4 | 0 | Metadata, timestamps, legal | | {typography.button} | 14px | 400 | 1 | 0.02em | Button labels, small CTAs | | {typography.button-lg} | 16px | 400 | 1 | 0.02em | Large button labels, nav CTAs | | {typography.nav-link} | 13px | 400 | 1 | 0.08em | Navigation items (uppercase) |

Principles

The most defining typographic decision in this system is weight discipline: nothing exceeds 400 (regular). There is no bold. Hierarchy is achieved entirely through size differential (3.6× between display and body), color value (four tiers of white opacity), letter-spacing manipulation (-0.7px tracking on 63px headlines pulls characters tighter for a locked-up feel), and occasional uppercase transformation (nav links at 0.08em tracking expansion). This restraint produces a quiet authority—the design doesn't shout because the scale already commands attention.

Letter-spacing follows a clear logic: large display type gets negative tracking (tightening) to optically correct for the exaggerated size; small uppercase UI text gets positive tracking (expansion) for breathability at tiny sizes; body text sits at normal (0) for optimal readability. The {typography.button} role adds a subtle 0.02em expansion that helps all-caps or short-label rendering feel deliberate rather than cramped.

The monospaced Input font at {typography.label-md} functions as a semantic signal rather than a stylistic flourish. When you see it, you're reading a system state—"2/5 SPOTS LEFT FOR MAY"—not editorial content. This dual-font architecture (Aeonic for voice, Input for data) is a mature pattern borrowed from developer-tool design and applied here to studio communications.

Color-as-hierarchy is deployed aggressively: the hero headline uses {colors.body} (#f3f3f3) while its supporting subhead drops to {colors.muted-soft} (60% white), and tertiary metadata falls further to {colors.muted-soft} or below. This four-stop opacity ladder replaces what lesser systems achieve with font-weight changes.

Note on Font Substitutes

Aeonik is a proprietary commercial font without a Google Fonts equivalent. For prototyping or open-source implementations, substitute with DM Sans (Google Fonts) which shares geometric humanist proportions and a similarly wide, confident character. Define CSS variables:

--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

Input Mono can be substituted with JetBrains Mono or IBM Plex Mono for the label/annotation role. Both preserve the slightly technical, engineered feeling of the original while being freely available.

Layout

Spacing System

• Base unit: Derived from {spacing.base} (7px), though {spacing.section} (20px) functions as the dominant operational module for component internals.
• Tokens: {spacing.xxs} (2px) for micro-adjustments and hairline offsets; {spacing.xs} (3px) for icon gaps; {spacing.sm} (4px) for inline element spacing; {spacing.md} (6px) for compact padding; {spacing.base} (7px) for baseline rhythm; {spacing.lg} (8px) for small component gaps; {spacing.xl} (10px) for button padding; {spacing.xl2} (11px) for medium gaps; {spacing.xl3} (14px) for form field spacing; {spacing.section} (20px) for card internal padding and horizontal gutters; {spacing.section-xl} (40px) for vertical band padding; {spacing.section-xxl} (80px) for major section breaks.
• Section padding (vertical): {spacing.section-xxl} (80px) — applied to {component.hero-band} and major content bands between scroll sections.
• Card internal padding: {spacing.section-xl} (40px) for {component.card-surface}; {spacing.section} (20px) for {component.card-glass}.
• Gutters: Horizontal page gutter is {spacing.section} (20px); inner-container gutters between columns range from {spacing.section-xl} (40px) to {spacing.section-xxl} (80px) depending on density requirements.

Grid & Container

• Max content width: 1440px (extracted from <main> container). Content centers within viewport with horizontal padding.
• Density choice: Editorial-sparse. Hero section uses a single centered column (~800px text width) with full-width illustration bleeding below. No multi-column text grids observed in above-fold.
• Grid behavior: The layout appears to use a fluid-centered approach rather than a strict column grid. Sections are full-width bands with content constrained to the 1440px box. Within that box, flexbox or manual positioning handles element distribution.
• Hero column split: Text content (headline, badge, CTAs) stacks vertically in a centered column; the stippled illustration occupies the lower portion as a full-width (or nearly full-width) bleed element beneath the text block.

Whitespace Philosophy

Whitespace is treated as a structural material, not absence. The hero band deploys roughly 120–160px of vertical padding combined, allowing the 63px headline to float in darkness before the dotted illustration begins. This is not airy-editorial whitespace (like a fashion magazine); it's cinematic framing—the darkness itself is content, and the pauses between elements carry as much weight as the type. Component interiors maintain tight padding (20px, 40px) to keep interactive surfaces compact, while macro-spacing between sections breathes generously.

Header Architecture

|← 1440px max container →|
┌─────────────────────────────────────────────────────┐
│ [HYPERSTUDIO]   SERVICES  PORTFOLIOⁿᵉʷ  PROCESS  │ [🧑 LET'S CHAT] │
│                                                                 │
└─────────────────────────────────────────────────────┘
  ↑ logo          ↑ nav links (centered)           ↑ CTA (right)
                  ↑ badge superscript

Navigation uses a flex row with: logo left, navigation center (with "NEW" superscript badge on PORTFOLIO), and pill-shaped CTA right. Height approximately 72px. Background is transparent ({component.top-nav}), letting the dark page background show through.

Hero Section

|← ~800px centered text col →|
┌───────────────────────────────────────────┐
│                                           │
│            ● 2/5 SPOTS LEFT FOR MAY       ← status-badge (pill)
│                                           │
│     World-class branding and              ← display-lg headline
│     websites for startups.                │
│                                           │
│   [ START NOW ↗ ]  [ VIEW WORK ↓ ]        ← cta pair
│                                           │
│  ══════════════════════════════════════   │
│  ▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒  ← stippled illustration
│  ▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒  (full-width or near-FW)
│  ▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒▓▓▓▒▒▒  (bleeds below fold)
└───────────────────────────────────────────┘

Status badge sits above the headline with comfortable separation (~32–40px). Headline wraps naturally (two lines in viewport). CTA pair sits below headline with ~40px gap. Illustration begins after CTAs and extends downward, likely transitioning into the next section or fading.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat Baseline | No shadow, {colors.surface-darker} background | Page ground, footer, hero band | | 1 – Hairline Outline | 1px {colors.hairline} border or {colors.border-light} | Dividers, input fields at rest | | 2 – Glass Elevation | {colors.surface-glass} or {colors.surface-glass-strong} background with translucency | Nav CTA, hovered ghost buttons, floating panels | | 3 – Surface Lift | {colors.surface-dark} (#101010) background on {colors.surface-darker} ground | Cards, content blocks | | 4 – Canvas Pop | Solid {colors.canvas} background | Primary buttons, highest-CTA elements |

Philosophy: This system rejects traditional drop-shadow elevation almost entirely (no box-shadows detected in extracted CSS). Depth is communicated through luminance layering—background value changes from #0808108 → #101010 → #141414 → glass overlays → solid white. This is a dark-mode-native approach where "closer to viewer" means "brighter or more opaque." The glass-morphism treatment ({colors.surface-glass-strong} at 33% white) is the primary elevation mechanism for interactive elements, creating a frosted-acrylic effect that feels premium without the physicality of cast shadows.

If decorative depth exists in lower sections (gradient washes, photographic layers), it would appear as additional levels beyond Level 4, but the above-fold relies purely on value-based stratification.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4.5px | Subtle rounding for small elements, tags | | {rounded.DEFAULT} | 8px | Default radius—input fields, small containers | | {rounded.md} | 9px | Primary button radius ({component.button-primary}, {component.button-secondary}) | | {rounded.lg} | 10px | Glass panels, nav-cta-button variant | | {rounded.xl} | 20px | Large cards ({component.card-surface}), image containers | | {rounded.pill} | 99px | Status badges, nav CTA, fully-rounded elements | | {rounded.full} | 9999px | Avatar circles, icon-only buttons |

Photography Geometry

The hero features a stippled/dot-matrix illustration rendered in white dots against the dark ground. This is not photography but a signature graphic treatment—likely SVG or canvas-rendered point-cloud imagery depicting abstract forms (hands/shapes suggested by the dot pattern). The illustration bleeds horizontally at full width (or near-full) and extends vertically below the text content zone. No corner rounding is applied to this illustrative layer; it meets the container edge sharply.

For actual photography (project thumbnails, team headshots—inferred from portfolio context), the system would likely apply {rounded.xl} (20px) to match the card vocabulary, maintaining consistency with the rounded-card container language.

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.input-field-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-primary} — The primary conversion action. Solid {colors.canvas} (white) background with {colors.ink} (near-black) text at {typography.button} (14px, 0.02em expanded tracking). Rounded {rounded.md} (9px) with generous padding 16px 28px. Contains directional arrow indicator (↗) as inline SVG. On hover, transitions to {component.button-primary-hover} with {colors.text-subtle} background for subtle lift. Used once in hero as "START NOW ↗".

{component.button-primary-hover} — Active/hovered state of primary button. Background shifts from pure white to {colors.text-subtle} (#cccccc), reducing contrast slightly to signal interaction while maintaining readability.

{component.button-secondary} — Ghost/outline-style companion CTA. Transparent background with {colors.body} text at {typography.button}. Same dimensions and radius as primary. Contains downward arrow (↓) indicator. On hover becomes {component.button-secondary-hover} with {colors.surface-glass} background filling in. Used as "VIEW WORK ↓" alongside primary.

{component.button-secondary-hover} — Hovered ghost button. Gains {colors.surface-glass} (10% white) background fill and shifts text to {colors.on-dark} for clearer visibility against the new backing.

{component.nav-cta-button} — The persistent "LET'S CHAT" button in top navigation. Uses {colors.surface-glass-strong} (33% white) background creating a translucent pill, with {colors.ink} text at {typography.button-lg} (16px). Rounded {rounded.pill} (99px) with padding 12px 24px. Contains user/head icon prefix. Hover state {component.nav-cta-button-hover} solidifies to {colors.canvas}. This is the most prominent persistent CTA on the page.

{component.nav-cta-button-hover} — Nav CTA on hover/focus. Background becomes solid {colors.canvas}, removing translucency for a decisive "ready-to-click" signal.

Cards & Containers

{component.card-surface} — Standard content card. {colors.surface-dark} (#101010) background providing one step of lift from page ground. {colors.body} text color. Generous {rounded.xl} (20px) corners with {spacing.section-xl} (40px) internal padding. Likely used for portfolio previews, service descriptions, and testimonial blocks below fold.

{component.card-glass} — Translucent variant for overlay or elevated contexts. {colors.surface-glass} (10% white) background with {rounded.lg} (10px) and tighter {spacing.section} (20px) padding. Used for tooltips, dropdown panels, or modals that must float above content without fully obscuring it.

{component.hero-band} — The full-width hero section container. {colors.surface-darker} (#080808) background matching page ground. Centers content with {spacing.section-xxl} (80px) vertical padding and {spacing.section} (20px) horizontal. Houses the headline, status badge, and CTA assembly.

{component.section-band} — Reusable full-width section wrapper. Same surface treatment as hero-band, used for scrolling content sections below the hero.

Navigation

{component.top-nav} — Fixed or sticky header bar. Transparent background allowing page color to show through. Height ~72px. Contains logo left, centered nav links, and right-aligned CTA. Text color {colors.on-dark} at {typography.nav-link} (13px uppercase, 0.08em tracking).

{component.nav-logo} — "Hyperstudio" wordmark. Renders at {typography.body-md} (17.3px) in {colors.on-dark}. Left-aligned in nav container.

{component.nav-link} — Individual navigation menu item ("SERVICES", "PORTFOLIO", "PROCESS"). Uppercase {typography.nav-link} styling in {colors.muted} (75% white). Padding {spacing.xxs} {spacing.sm}. Hover triggers {component.nav-link-hover} shifting to {colors.on-dark}.

{component.nav-link-hover} — Navigation link on hover/focus. Text color lifts from {colors.muted} to {colors.on-dark} (full white), creating clear affordance indication.

{component.nav-badge-new} — Superscript badge attached to "PORTFOLIO" nav item. Small rounded rectangle ({rounded.DEFAULT}: 8px) containing "NEW" text at {typography.caption} (14px) in {colors.muted-soft} color. Tight padding 2px 6px. Positioned as typographic superscript.

Inputs & Forms

{component.input-field} — Text/email input at rest. {colors.surface-elevated} (#141414) background—one step lighter than card surface—creating subtle inset appearance. {colors.body} text color at {typography.body-md}. {rounded.DEFAULT} (8px) corners with padding 14px 18px. Height ~44–48px. {colors.border-light} (10% white) border may be present at 1px.

{component.input-field-focus} — Input on focus. Background remains {colors.surface-elevated}, text may shift to {colors.on-dark} (pure white) for emphasis. Border potentially upgrades to {colors.border-strong} or {colors.primary} for focus ring indication.

Status & Indicator Components

{component.hero-status-badge} — The "● 2/5 SPOTS LEFT FOR MAY" availability indicator. Semi-transparent dark background (rgba(0, 0, 0, 0.40)) with {colors.muted} text rendered in monospaced {typography.label-md} (Input font, 17.5px). Fully pill-rounded ({rounded.pill}). Padding 10px 20px. Contains {component.dot-indicator} (success-green circle) as prefix. Positioned above hero headline with significant spacing.

{component.dot-indicator} — Small circular status dot. {colors.success} (#22c55e) fill, 8px diameter. Used inside {component.hero-status-badge} to visually signal "open/available" state.

Typography Components

{component.hero-headline} — Main H1 headline "World-class branding and websites for startups." Transparent background, {colors.body} text at {typography.display-lg} (63px, -0.7px letter-spacing). Multi-line, centered or left-aligned within text column.

{component.hero-subhead} — Supporting descriptive text below headline (if present). {colors.muted-soft} at {typography.body-md}. Would sit between headline and CTA pair.

{component.link-text} — Inline hyperlink within body content. {colors.on-surface} (white) at {typography.caption} (14px), no underline at rest. Hover transitions to {component.link-text-hover} with {colors.link} (coral) color.

{component.email-link} — Email address link (observed in footer/contact areas). {colors.on-surface} at {typography.button-lg} (16px). Larger than standard links for contact-context prominence.

Decorative & Structural

{component.divider-line} — Horizontal rule element. 1px height, {colors.hairline} (15% white) color. Full-width or contained width. Used to separate content zones without visual weight.

{component.footer} — Page footer container (inferred). {colors.surface-darker} background matching hero ground. {colors.muted-soft} text at {typography.body-sm}. Generous {spacing.section-xl} vertical padding. Contains copyright, secondary links, contact info.

Do's and Don'ts

Do

• Do reserve {colors.primary} (#f74f39) exclusively for conversion actions and hyperlink states—never use it as a background wash or decorative fill.
• Do maintain the weight ceiling at 400 across all Aeonik typography; use size, color opacity, and letter-spacing for hierarchy instead of bold weights.
• Do apply {typography.label-md} (Input Mono) whenever rendering system states, counts, availability badges, or technical metadata—this is the agreed signal for "data, not voice."
• Do use {rounded.pill} (99px) for status badges and the nav CTA, but switch to {rounded.md} (9px) for all action buttons to preserve the soft-rectangular button language.
• Do leverage the four-tier opacity text hierarchy ({colors.body} → {colors.muted} → {colors.muted-soft} → {colors.muted-faded}) for nested information density rather than reducing font size below 14px.
• Do keep the hero headline at {typography.display-lg} (63px) with negative letter-spacing (-0.011em) for that locked-up display feel; don't loosen it for "readability"—the tightness is intentional.
• Do use {colors.surface-glass-strong} (33% white) for the persistent nav CTA to create elevation without solid-fill commitment; reserve {colors.canvas} for the hero's primary conversion button only.
• Do allow the stippled/dot-matrix illustration to bleed to viewport edges without container rounding—it's meant to dissolve into the dark ground, not sit inside a card.
• Do space sections with {spacing.section-xxl} (80px) vertical padding; the darkness needs room to breathe between content blocks.
• Do render navigation links in uppercase at {typography.nav-link} (13px) with 0.08em expanded tracking—this micro-type treatment is essential to the premium-technical voice.

Don't

• Don't introduce font weights above 400 (bold, 600, 700) anywhere in the Aeonik type stack; the system's authority comes from restraint, not emphasis.
• Don't substitute {colors.link} (#f74f39) for {colors.primary} in non-link contexts—they're semantically identical in value but conceptually distinct in usage.
• Don't add drop-shadows or box-shadows to cards and elevations; this system achieves depth through background-value layering (#0808108 → #101010 → #141414 → glass → white), not cast shadows.
• Don't round the hero headline's container or add background panels behind it—the headline floats directly on {colors.surface-darker} ground; any backing would break the cinematic darkness.
• Don't use {rounded.full} (9999px) for anything other than avatars or perfect circles; the pill radius ({rounded.pill}: 99px) is the correct token for elongated rounded elements like badges.
• Don't render body paragraphs in {colors.on-surface} (pure white)—that level is reserved for headlines and primary nav items; body text must use {colors.body} (#f3f3f3) or softer to establish proper hierarchy.
• Don't expand the radius vocabulary beyond the defined scale (4.5px → 8px → 9px → 10px → 20px → 99px); intermediate values like 12px or 16px introduce inconsistency.
• Don't place {colors.surface-tan} (#e7c59a) or {colors.surface-blue-gray} (#a5b7bc) surfaces in the hero or navigation—they belong to project-specific showcase contexts, not the global shell.
• Don't remove the textTransform: uppercase from {typography.nav-link}; the all-caps nav is a signature detail that separates this from generic dark-mode templates.
• Don't compress vertical section padding below 60px; the spacious rhythm (80px standard) is fundamental to the system's editorial-cinema mood.

Motion & Animation

Transition Tokens

--transition-all: all ease;
--transition-opacity: opacity 0.2s ease;

Extracted CSS reveals minimal transition declarations: a catch-all all transition with ease timing function, and an explicit opacity 0.2s ease for fade behaviors. These suggest the system prefers state-switch animations (opacity crossfades, background-color shifts) over spatial transforms (translates, scales, rotations). Motion is functional and fast—200ms duration places interactions firmly in the "responsive" category without lingering.

Keyframe Animations

No @keyframes declarations were detected in the extracted stylesheet. Any scroll-triggered animations, parallax effects, or entrance reveals visible on the live site are likely implemented via JavaScript libraries (GSAP, Lenis, ScrollTrigger) or Intersection Observer callbacks rather than CSS keyframes.

Interaction Patterns

• Button hover: Background color shift from base to hover-state value (white → #cccccc for primary; transparent → 10% white glass for secondary). Duration ~200ms, ease timing.
• Nav link hover: Text color lift from 75% white to 100% white. Instantaneous or near-instant for responsive feel.
• Glass elevation: Nav CTA transitions from 33% white translucent to 100% opaque white on hover, creating a "solidifying" effect.
• Focus rings: Input fields likely gain border-color or subtle glow on focus (inferred from standard patterns; exact treatment not captured in static extraction).
• Scroll-triggered fades: Lower-page content (projects, testimonials) likely fades/slides into view on scroll—common in agency sites with this aesthetic. Implement via Intersection Observer with opacity 0.2s ease transitions.
• Stipple animation: The dot-matrix hero illustration may feature subtle animation (particle drift, density pulsing) — this would be canvas/SVG-driven, not CSS-animated.
• Status badge pulse: The green availability dot could feature a subtle pulse or breathing animation to draw attention to scarcity messaging.

Recommended default for any added motion: 200ms duration, ease (or ease-out) timing function, opacity/background-color properties only. Avoid transforms unless simulating physical interaction (button press scale). Keep motion "subtle" per the {extensions.motion.level} designation.

Imagery Style

• Dominant technique: Dot-matrix / stippled point-cloud illustration rendered in white dots against dark ground. This is the hero's signature visual—abstract forms (suggesting hands reaching, or landscape topology) built from discrete points of varying density.
• Color treatment: Pure {colors.on-surface} (white) or {colors.body} (#f3f3f3) dots on {colors.surface-darker} background. No gradients within the stipple pattern itself—density creates tonal variation.
• Role in composition: Illustration occupies the lower 40% of the hero viewport, acting as a visual anchor beneath the typographic content. It bleeds horizontally full-width (or near-full) without container rounding.
• Style family: Technical-diagrammatic meets generative-art. The aesthetic references blueprint plotting, ASCII art elevation, and particle-system visualization. It signals "we think in systems and pixels."
• Photography inference: While not visible in the above-fold, portfolio sections almost certainly feature product screenshots, brand applications, and device mockups. These would likely use {rounded.xl} (20px) corner treatment, subtle {colors.surface-dark} backgrounds, and possibly glass-morphism overlays on hover.
• No stock photography: The studio's positioning (award-winning, Web3/AI/SaaS specialist) suggests custom photography, 3D renders, or abstract compositions rather than lifestyle stock imagery.
• Texture preference: Digital-noise grain, scan-line artifacts, or subtle film-grain overlays may appear on photographic elements to harmonize with the lo-fi/digital aesthetic of the stippled illustration.
• Illustration geometry: Aspect ratio appears to be ultra-wide (2:1 or greater) for the hero graphic, emphasizing horizontal sweep and cinematic panorama feel.
• Animation potential: Static in screenshot, but this style of generative illustration often features slow drift, density waves, or mouse-reactive parallax in production implementations.

Icon System

• Library: Custom SVG. No third-party icon library (Lucide, Heroicons, Material) detected in the framework analysis. Icons appear hand-crafted or sourced from a private set.
• Specific icons observed:
  • Arrow up-right (↗) — External link / outbound navigation indicator on "START NOW" button
  • Arrow down (↓) — Scroll-down or section-navigation cue on "VIEW WORK" button
  • User/person silhouette (🧑) — Prefix icon on "LET'S CHAT" nav CTA, suggesting conversation/human contact
  • Green dot (●) — Status indicator inside the availability badge (rendered as colored circle, technically a shape not icon font)
• Treatment: Stroke-based line icons (inferred from the arrow glyphs' appearance). Color is currentColor inheriting from parent text color. Size approximately 16–18px for button icons, aligned inline with {typography.button} text baseline.
• Alignment: Icons sit inline with text with ~6–8px gap (likely {spacing.sm} or {spacing.md}). No background circles or icon containers—icons flow naked within button/link text.
• Stroke weight: Appears consistent at 1.5–2px, matching the refined-but-not-delicate visual weight of the overall system.
• Missing from above-fold: Social media icons, search icons, menu hamburger (nav is always-open desktop view), close/X icons, carousel controls—all presumably exist in mobile view or lower sections.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (static-first)
                 Rationale: Agency sites prioritize LCP and CLS; Astro's island 
                 architecture or Next.js ISR fits image-heavy portfolio patterns.
- Styling:        CSS Modules or vanilla CSS with custom properties
                 Rationale: Extracted CSS shows no Tailwind utility fingerprints;
                 the site likely uses Webflow-exported CSS or hand-authored 
                 stylesheets. CSS Variables for theming, no preprocessor required.
- Fonts:          Self-hosted WOFF2 files (aeonik-regular.woff2, geist-regular.woff2,
                 input-mono.ttf) served from /static/fonts/. Fallback: 'DM Sans' 
                 for Aeonik, 'JetBrains Mono' for Input.
- Animation:      GSAP + ScrollTrigger (for scroll-driven reveals) or Framer Motion 
                 (if React-based). Lenis for smooth scroll.
- Icons:          Custom SVG components (inline React components or <symbol> sprite)
- Component lib:  None (custom-built). Radix primitives acceptable for 
                 accessibility-layered dropdowns/dialogs if needed.
- Build tool:     Vite or Next.js内置 bundler

Note on Webflow origins: The class naming conventions (hyperlink-95, div-block-207288, button1) strongly suggest this site was originally built in Webflow and may have been exported or replicated. If rebuilding from scratch, adopt a cleaner BEM or component-scoped naming convention while preserving all computed values exactly.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; nav collapses to hamburger; hero headline scales down (~36–40px); illustration may simplify or hide; CTAs stack vertically | | Tablet | 640px – 1024px | Two-column potential for content; nav remains horizontal but may truncate; hero headline ~48px; reduced horizontal padding | | Desktop | 1024px – 1440px | Full layout as observed; 1440px max-content container; all components at specified sizes | | Wide | > 1440px | Container centers with auto margins; hero may gain additional horizontal padding; illustration expands to fill |

Touch Targets

• {component.button-primary}: Padding 16px × 28px yields approximate touch area 60px × 56px (with text) — exceeds 44×44px WCAG AAA minimum comfortably.
• {component.button-secondary}: Identical dimensions to primary — compliant.
• {component.nav-cta-button}: Padding 12px × 24px with pill shape — estimated height ~44px, width varies by text length — compliant.
• {component.nav-link}: Text-only link at 13px — may need invisible padding expansion (min 44px tap area) for mobile touch targets.
• {component.input-field}: Padding 14px × 18px with ~44–48px total height — compliant.
• {component.hero-status-badge}: Padding 10px × 20px — estimated height ~38px, consider increasing to 12px × 24px vertical for mobile compliance.

Collapsing Strategy

• Navigation: At tablet/mobile breakpoint, the horizontal nav links (SERVICES, PORTFOLIO, PROCESS) collapse into a hamburger menu or slide-out drawer. The "LET'S CHAT" CTA may persist visibly or move inside the menu.
• Hero headline: {typography.display-lg} (63px) scales down proportionally—likely to 36–40px on mobile, 48px on tablet. Letter-spacing may reduce absolute value but maintain proportional tightness.
• CTA pair: Horizontal arrangement ("START NOW" beside "VIEW WORK") stacks vertically on mobile, with primary button first (conversion hierarchy).
• Stippled illustration: May reduce dot density or crop to narrower aspect ratio on mobile to preserve performance and visual impact. Could become a fixed-position background element rather than in-flow content.
• Section padding: {spacing.section-xxl} (80px) reduces to {spacing.section-xl} (40px) or {spacing.section} (20px) on mobile to avoid excessive scroll depth.
• Container gutters: 20px horizontal padding may increase slightly to 16–24px on mobile (viewport-edge comfort), then widen back to 20px+ on tablet.

Image Behavior

• Hero stipple illustration: Likely served as an adaptive image (WebP/AVIF) with responsive srcset. On mobile, may switch to a simplified version (fewer dots, shorter height) or a cropped focal region. Consider lazy-loading with intersection observer since it's below initial viewport.
• Portfolio thumbnails (inferred): Would use aspect-ratio CSS property (likely 16:10 or 4:3) with object-fit: cover and {rounded.xl} corners. On mobile grid (single column), images span full container width with maintained aspect ratio.
• Team/project imagery: If present below fold, would follow same rounding and aspect-ratio patterns as cards, potentially with hover zoom or opacity overlay effects.

Iteration Guide

1. Initialize with correct mode: Set your root background to {colors.surface-darker} (#0808108) immediately. This is a dark-first system—do not start with a white canvas and "add dark mode later." Every color, component, and spacing decision assumes a near-black ground.

2. Import font files correctly: Host aeonik-regular.woff2, geist-regular.woff2, and input-mono.ttf locally (or use CDN URLs if available). Define @font-face declarations with font-display: swap. Map CSS variables --font-sans: 'Aeonik', sans-serif and --font-mono: 'Input', monospace. Never use system fonts as primary—they cannot replicate Aeonik's character.

3. Build the token infrastructure first: Before writing any component markup, define all CSS custom properties from the YAML frontmatter. Group them logically: --color-primary, --radius-md, --spacing-section-xl, --font-display. Every downstream reference must consume these variables—no magic numbers in component code.

4. Implement the hero band skeleton: Start with {component.hero-band} (full-width, #0808108 background, 80px vertical padding). Add the centered text column (max-width ~800px). Place {component.hero-status-badge} above the headline. Render the H1 at {typography.display-lg} (63px, Aeonik, -0.011em tracking, #f3f3f3). Stack the two CTAs below with 40px gap.

5. Add the stippled illustration: Below the CTA row, insert the dot-matrix graphic as an <img> or inline SVG. Let it bleed horizontally. Ensure it uses {colors.on-surface} (white) dots. If you cannot source the original asset, generate a placeholder using a point-cloud pattern at similar density—this texture is too central to the identity to omit.

6. Build the navigation bar: Fixed-position or sticky {component.top-nav} (72px height, transparent bg). Flex layout: logo (left, {typography.body-md}), nav links (center, {typography.nav-link} uppercase), pill CTA (right, {component.nav-cta-button}). Attach the "NEW" superscript badge to PORTFOLIO using {component.nav-badge-new} styling.

7. Implement state variants as separate classes: Create .btn-primary, .btn-primary--hover, .btn-primary--active, .btn-primary--disabled (even if disabled isn't in the spec yet). Follow this pattern for every interactive component. The frontmatter lists hover/active states explicitly—code them.

8. Apply the opacity-based text hierarchy: When nesting information (headline → subhead → body → metadata), step down the opacity ladder: {colors.body} (100%) → {colors.muted} (75%) → {colors.muted-soft} (60%) → {colors.muted-faded} (90% of body, for transitional). Never use gray hexes for this—use the rgba() values defined in tokens.

9. Respect the no-bold rule: As you implement headings, buttons, and labels, confirm that no font-weight exceeds 400. If you find yourself wanting to emphasize something, increase size, change color, adjust letter-spacing, or use the monospaced font—but do not reach for 600 or 700.

10. Run linting and audit: After implementation, validate contrast ratios (especially {colors.primary} against {colors.on-primary}, and {colors.body} against {colors.surface-darker}). Check that every {token.path} reference resolves. Verify touch targets meet 44×44px minimum on mobile breakpoints. Test the site in dark-room viewing conditions—the subtlety of the opacity hierarchy should remain legible.

Font Setup for Prototyping:

/* If Aeonik is unavailable, use DM Sans as nearest equivalent */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

:root {
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

Replace these imports with @font-face declarations pointing to /static/fonts/aeonik-regular.woff2 and /static/fonts/input-mono.ttf when assets are available.

Known Gaps

• Hover state specifics: While {component.*-hover} variants are documented structurally, exact transition curves, transform values (scale, translateY), and shadow changes on hover are inferred from system patterns, not extracted from live CSS. The all ease and opacity 0.2s ease transitions are the only concrete motion data.
• Mobile navigation behavior: The screenshot shows only the desktop expanded nav. Hamburger menu structure, slide-out drawer styling, and mobile nav CTA placement are not observable from the provided viewport.
• Loading/skeleton states: No loading skeletons, shimmer effects, or pending-state UI were extractable. Design for image-heavy portfolio sections will require assumed skeleton treatments.
• Form validation states: Beyond {component.input-field-focus}, error states (red border, error message typography, icon indicators) and success states are not present in above-fold DOM.
• Below-fold components: Portfolio grid, service cards, testimonial block, team section, contact form, and footer interior are referenced structurally but not visually confirmed. Their specific layouts, component composition, and spacing relationships are extrapolated from the established design language.
• Stippled illustration source: The hero dot-matrix graphic is a critical brand asset whose generation method (SVG path data, canvas script, exported PNG/WebP) is unknown. Reimplementation requires either access to the original asset or careful reconstruction of the point-cloud pattern.
• Accessibility focus indicators: Focus-ring styles for keyboard navigation (outline offset, color, radius on :focus-visible) are not present in extracted CSS. These must be designed to satisfy WCAG 2.4.7 without violating the minimal-shadow philosophy.
• Dark/light mode toggle: The system is dark-mode-native ({extensions.mode}: "dark"). Whether a light-mode alternative exists (and how surfaces/text invert) is not determinable from the provided data. Assume dark-only unless client specifies otherwise.
• Print stylesheet: No print-specific CSS was extracted. The high-contrast dark design requires explicit print overrides (invert backgrounds, ensure text remains dark on white paper).
• CSS variable naming mismatches: Webflow-generated class names (div-block-207288, section-96) are presentational and non-semantic. A rebuild should use meaningful component-class names while preserving all computed pixel values exactly.