--- version: alpha name: Hyperframe description: "Black steel snapping together in a dark hangar — one lime bolt throws the switch." colors: on-surface-variant: "#7E7E87" on-surface: "#F3F3F3" surface: "#151517" primary: "#CBFB45" forge: "#232325" gunmetal: "#3A3A3E" steel: "#777777" zinc-bright: "#898990" signal-white: "#FFFFFF" ink: "#000000" olive-lime: "#70833C" forge-orange: "#E76D1E" typography: caption: fontFamily: Everett fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0em tag: fontFamily: Everett fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0em label: fontFamily: Everett fontSize: 15px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0em body-sm: fontFamily: Everett fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0em body: fontFamily: Everett fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0em heading-sm: fontFamily: Everett fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0em heading: fontFamily: Everett fontSize: 44px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0em heading-lg: fontFamily: Everett fontSize: 54px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0em mega: fontFamily: Everett fontSize: 260px fontWeight: 400 lineHeight: 1 letterSpacing: 0em rounded: default: 0px cards: 15px spacing: tight: 6px unit: 10px 3x: 30px card: 36px section-drop: 300px --- # Hyperframe — Style Reference > Black steel snapping together in a dark hangar — one lime bolt throws the switch. **Theme:** dark Hyperframe sells a steel framing system that snaps together without tools, and the site is built exactly like the product: a matte near-black canvas (`#151517`), zero borders, zero shadows, and photoreal parts floating in space like an exploded assembly diagram. One color carries every signal — Hyper Lime `#CBFB45`, the lightning bolt in the wordmark — striking the headline's lead line, the subscribe link, and the single circular button; nothing else on the page is allowed to glow. Everything is set in Everett at weight 400, thinning to Light 300 only when type balloons to 260px display numerals — the bigger it gets, the lighter it gets. Depth is a three-step surface luminance ladder (`#151517` → `#232325` → `#3A3A3E`) because the computed border and shadow sets are empty by design; the only curves in the system are a 15px card radius and one perfect 100% circle. Sections periodically invert to a chalk `#F3F3F3` field where headings flip to Iron and the lime steps down to olive `#70833C` to stay legible. The result reads like a power tool: black steel, one live wire. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Iron | `#151517` | `--color-iron` | Page canvas — the near-black hangar every render floats in. Flips to primary heading/text color on Chalk inversion sections. Deliberately not `#000`. | | Forge | `#232325` | `--color-forge` | First lift off the canvas — full-width section bands and deep card wells (captured with a 300px bottom drop). One quiet step, never a border. | | Gunmetal | `#3A3A3E` | `--color-gunmetal` | Highest dark surface — the 15px-radius card fill at 36px padding. The only rounded fill in the system; reaching it means "this is a contained object". | | Steel | `#777777` | `--color-steel` | Mid-grey utility fill from the computed background set — the galvanized-steel tone for supporting graphics and inert UI. Never a text color. | | Zinc | `#7E7E87` | `--color-zinc` | Muted secondary text on dark — a cool grey with a faint violet cast that keeps quiet copy from going dead. | | Zinc Bright | `#898990` | `--color-zinc-bright` | The lighter muted step — captions and meta labels on dark surfaces. | | Chalk | `#F3F3F3` | `--color-chalk` | The system's dual-role workhorse and its most frequent hex (55 hits in the scan): primary text on dark AND the entire canvas of light inversion sections. | | Signal White | `#FFFFFF` | `--color-white` | The bolt-and-wordmark logo fill — rare pure-white punctuation one notch above Chalk. Not a body text color. | | Ink | `#000000` | `--color-ink` | Input text, verbatim from the computed form field — true black, used nowhere else in the palette. | | Hyper Lime | `#CBFB45` | `--color-hyper-lime` | THE signal — the primary brand action color. It is the logo bolt, the headline's lead line ("Meet Hyperframe,"), the Subscribe for updates link, and the circle button fill. One live wire; its rarity is the voltage. | | Olive Lime | `#70833C` | `--color-olive-lime` | Hyper Lime stepped down for Chalk surfaces — the text-size link color on light inversion sections, where full lime would burn out. | | Forge Orange | `#E76D1E` | `--color-forge-orange` | Warm secondary accent appearing below the captured viewport (12 scan hits); exact role unverified — treat as an editorial warm note that must never compete with the lime. | ## Tokens — Typography ### Everett — the only typeface on the site: nav, body, headings, and 260px display numerals all in one Swiss grotesk, weight 400 as the default voice with Light 300 reserved for the very largest sizes · `--font-everett` - **Substitute:** Helvetica Neue, Neue Haas Grotesk, Inter - **Weights:** 300 (Light), 400 (Regular), 500 (Medium — loaded as EverettMedium for sparing label emphasis) - **Sizes:** 11px, 13px, 15px, 16px, 18px, 30px, 44px, 54px, 260px - **Line height:** ~1.1 at display sizes to ~1.5 at body *(read from the rendered capture; the computed styles carried no explicit values)* - **Letter spacing:** near-neutral throughout — Everett's tight native fit does the work; no decorative tracking observed - **Role:** The only typeface on the site: nav, body, headings, and 260px display numerals all in one Swiss grotesk, weight 400 as the default voice with Light 300 reserved for the very largest sizes. ### Type Scale | Role | Size | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 11px | ~1.4 | — | `--text-caption` | | tag | 13px | ~1.4 | — | `--text-tag` | | label | 15px | ~1.4 | — | `--text-label` | | body-sm | 16px | ~1.5 | — | `--text-body-sm` | | body | 18px | ~1.5 | — | `--text-body` | | heading-sm | 30px | ~1.2 | — | `--text-heading-sm` | | heading | 44px | ~1.15 | — | `--text-heading` | | heading-lg | 54px | ~1.15 | — | `--text-heading-lg` | | mega | 260px | ~1.0 | — | `--text-mega` | Line heights are read from the rendered page (the scan computed none) — treat the `~` values as targets, not law. The hard law is the weight map: 400 from 11px all the way through 54px, and 300 only at the 260px mega step. ## Tokens — Spacing & Shapes **Base unit:** 10px **Density:** comfortable ### Spacing Scale | Name | Value | Token | |------|-------|-------| | tight | 6px | `--spacing-tight` | | unit | 10px | `--spacing-unit` | | 3x | 30px | `--spacing-30` | | card | 36px | `--spacing-card` | | section-drop | 300px | `--spacing-section-drop` | ### Border Radius | Element | Value | |---------|-------| | Default (inputs, sections, media, links) | 0px | | Cards | 15px | | Circle button / scroll ring | 100% | ### Layout - **Page max-width:** none observed — full-bleed canvas with wide gutters; content pins to the viewport corners - **Section gap:** up to 300px of bottom drop on deep section bands — the page exhales between chapters - **Card padding:** 36px on gunmetal cards - **Element gap:** 10px base rhythm; 30px heading offsets ## Components ### Top Navigation Bar **Role:** Persistent site header — brand left, links and the single CTA cluster right. Fully transparent over the Iron (`#151517`) canvas — no fill, no border, no blur. Left: the Signal White (`#FFFFFF`) bolt glyph + HYPERFRAME wordmark. Right: Installation / Specs / About us in Everett 16px weight 400 Chalk (`#F3F3F3`), then "Subscribe for updates" in Hyper Lime (`#CBFB45`), then the lime circle button. The lime pair at the row's end is the only color in the chrome — the nav's entire hierarchy is one hue. ### Lime Circle Button **Role:** The single filled control in the viewport — the brand's power switch. A perfect circle (`border-radius: 100%`), solid Hyper Lime (`#CBFB45`) fill, dark Iron (`#151517`) arrow glyph centered, roughly 56px across *(diameter read from the render)*. No border, no shadow, no label — against a page of black steel, one lime disc reads as ON. Never duplicate it; one per view. ### Subscribe Text Link **Role:** The text-form CTA sitting beside the circle button. Everett 16px weight 400 in Hyper Lime (`#CBFB45`), no underline, no padding, no radius — bare computed link. Color alone signals interactivity: lime text IS the affordance in this system. ### Hero Headline Lockup **Role:** The opening statement, anchored to the bottom-left corner of the viewport. Everett 54px weight 400, ~1.15 leading, left-aligned, three stacked lines: the lead line "Meet Hyperframe," in Hyper Lime (`#CBFB45`), the remainder ("the steel framing system / that snaps together.") in Chalk (`#F3F3F3`). The lime-then-chalk handoff is the brand's signature sentence — the accent strikes once, then the copy carries on in neutral. ### Floating Steel Render **Role:** The hero's entire visual payload — the product as an exploded diagram. Photoreal 3D renders of the actual hardware — black roll-formed track and galvanized studs with stamped connection plates — floating mid-assembly on the Iron void, occupying the right two-thirds of the frame. No frame, no card, no ground plane: the parts hang in studio lighting exactly as they'd snap together. The render is the diagram; the diagram is the sell. ### Scroll Ring Indicator **Role:** Bottom-right scroll affordance closing the hero's corner composition. A hairline-stroke circle with a vertical plumb line dropping through it, drawn in a muted steel grey *(stroke color pixel-read from the render, near `#777777`)*. Unfilled — it echoes the circle button's geometry at ghost weight, pointing the way down without spending any lime. ### Gunmetal Card **Role:** The contained content object — the only rounded surface in the system. Background Gunmetal (`#3A3A3E`), `border-radius: 15px`, 36px padding on all sides, no border, no shadow — the two-step luminance jump from the Iron canvas does all the containment. Visible copy on gunmetal renders in Chalk (`#F3F3F3`) with muted lines in Zinc (`#7E7E87`). ### Forge Section Band **Role:** The full-width chapter surface between canvas and card. Background Forge (`#232325`), square corners, captured with up to 300px of bottom padding — a deliberate deep exhale before the next chapter. One luminance step up from Iron is the entire section boundary; there is no divider line anywhere on the page. ### Chalk Inversion Section **Role:** The light-mode flip — same system, poles reversed. Full-bleed Chalk (`#F3F3F3`) field. Headings drop to Iron (`#151517`) at 54px weight 400, links run Iron (`#151517`) at 16px with lime accents stepped down to Olive Lime (`#70833C`), and the bare input's text is true Ink (`#000000`). Nothing else changes — no new radii, no borders, no shadows. The inversion proves the system: it survives with its polarity flipped and its accent dimmed. ### Mega Numeral Display **Role:** Statement-scale stat/figure typography deeper in the page. Everett Light — weight 300 — at 260px in Chalk (`#F3F3F3`). This is the one place the system sheds weight: at billboard scale the stroke thins so the numeral reads as drawn steel, not poured concrete. Never bold at this size; the inverse-weight law is absolute. ### Bare Input **Role:** Email capture / form field, reduced to pure typography. Transparent background, no border, `border-radius: 0`, padding 6px 0, Everett 18px weight 400, text in Ink (`#000000`) on the chalk section. No box, no outline, no chrome — the field is just a place where typing happens, consistent with a system that refuses to draw containers. ### Text Link Set **Role:** Inline and nav links across both polarities. Everett 16px weight 400, zero padding, zero radius, no underline at rest. Three context colors, verbatim from the computed set: Iron (`#151517`) on chalk surfaces, Chalk (`#F3F3F3`) on dark surfaces, Hyper Lime (`#CBFB45`) when the link is the signal. Color is the only state language. ## Do's and Don'ts ### Do - Reserve Hyper Lime `#CBFB45` for signal moments only — the logo bolt, one headline lead line, the subscribe link, the circle button. One live wire per view; its rarity is the voltage. - Step lime down to Olive Lime `#70833C` for text-size links on Chalk `#F3F3F3` surfaces — full lime is a dark-canvas color. - Hold weight 400 for every heading from 30px through 54px, and drop to Light 300 only at the 260px mega step — bigger means lighter, never bolder. - Build depth exclusively with the surface ladder `#151517` → `#232325` → `#3A3A3E` — the computed border and shadow sets are empty, and that emptiness is the design. - Keep the radius vocabulary to two words: 15px on gunmetal cards, 100% on the circle button and scroll ring. Everything else — inputs, sections, media, links — stays square at 0px. - Compose the hero by its corners: logo top-left, nav top-right, headline bottom-left, scroll ring bottom-right, with the steel render running diagonally through the middle. - Work the 10px base unit — 36px card padding, 30px heading offsets — and let deep sections exhale with up to 300px of bottom drop. ### Don't - Never draw a border. Not a hairline, not a divider, not an input underline — separation is luminance or whitespace, full stop. - Never add a shadow. Nothing on this page casts one; a floating render on a void is the only "elevation" allowed. - Never let Forge Orange `#E76D1E` compete with the lime — it is a below-the-fold warm note, not a second action color. - Never substitute a brighter hover lime for the canonical `#CBFB45` as the brand action color. - Never round a control into a pill — the only curved control is a perfect circle, and there is exactly one of it. - Never bold anything: 500 Medium is the ceiling and it is rare. Hierarchy comes from size, placement, and the lime. - Never set body copy in pure `#FFFFFF` — white belongs to the wordmark; running text is Chalk `#F3F3F3` with Zinc `#7E7E87` for the quiet lines. ## Surfaces | Level | Name | Value | Purpose | |-------|------|-------|---------| | 0 | Iron Canvas | `#151517` | Base page background — the dark hangar the product floats in. | | 1 | Forge Band | `#232325` | Section bands and deep wells — one quiet luminance step up. | | 2 | Gunmetal Card | `#3A3A3E` | Contained card objects — the only 15px-rounded fill. | | Inversion | Chalk Field | `#F3F3F3` | Full light-mode section flip — canvas becomes chalk, text becomes iron. | | Utility | Steel | `#777777` | Mid-grey supporting fill for inert graphics — never text, never a card. | ## Elevation There are no shadows and no borders — both computed sets came back empty, and that is the system's most opinionated fact. Depth is a three-step luminance ladder: Iron `#151517` → Forge `#232325` → Gunmetal `#3A3A3E`, each step roughly doubling the brightness of the one below, so a card "rises" by getting lighter, never by casting anything. The 15px radius on gunmetal is the only other cue that a surface is an object rather than a region. The single filled circle button lifts by hue, not by depth — lime against black needs no help. Everything else separates by whitespace, and there is a lot of it. ## Imagery Photoreal 3D product renders are the entire visual language: black roll-formed steel track and galvanized studs with stamped connection plates, floating mid-assembly on the Iron void, lit like a studio product shoot. The renders behave like an exploded engineering diagram — parts hover in the positions they're about to snap into, which demonstrates the product's one promise (it snaps together) without a word of copy. No lifestyle photography, no people, no environments appear in the captured viewport; the machine is the model. The only graphic motifs beyond the renders are the lightning-bolt logo glyph and the hairline scroll ring — a bolt and a circle, energy and precision. ## Layout Full-bleed, corner-anchored, and diagonal. There is no visible content column in the hero — the composition pins to the viewport's four corners (wordmark top-left, nav links top-right, headline bottom-left, scroll ring bottom-right) while the steel render cuts a diagonal through the middle two-thirds of the frame. Below the hero the page stacks full-width square-cornered bands that flip between the dark ladder (`#151517`, `#232325`, `#3A3A3E`) and the Chalk `#F3F3F3` inversion field, separated by luminance alone — no rules, no dividers. Vertical rhythm is generous to the point of theatrical: section wells carry up to 300px of bottom drop, giving each chapter of the assembly story its own dark silence. ## Typography Signature One family, one law. Everett does every job on the site — nav label, body paragraph, 54px headline, 260px numeral — and hierarchy is governed by an inverse-weight law: weight 400 holds from 11px caption all the way through the 54px hero, then at the 260px mega step the stroke *thins* to Light 300. Bigger means lighter — at billboard scale the letterforms read as drawn steel profiles rather than poured mass, which keeps a 260px figure from crushing the dark canvas. Medium 500 exists in the loaded set but is spent sparingly on labels; bold does not appear at all. Tracking stays near-neutral everywhere — the grotesk's tight native fit is trusted as-is — so the only typographic drama left is scale, and the system uses an enormous range of it: 11px to 260px, a 24× spread inside a single family and effectively a single weight. ## Agent Prompt Guide ## Quick Color Reference - background: `#151517` (section bands `#232325`, inversion sections `#F3F3F3`) - text: `#F3F3F3` on dark / `#151517` on light; muted `#7E7E87` and `#898990`; input text `#000000` - surface: `#232325` band / `#3A3A3E` card (15px radius) / `#777777` utility fill - border: none — the system draws no borders; separation is luminance only - accent: `#CBFB45` Hyper Lime (`#70833C` olive for links on light surfaces) - primary action: `#CBFB45` (lime circle button + lime text CTAs — the single brand action color) ## Example Component Prompts 1. **Hero section**: Full-viewport `#151517` background, no borders or shadows anywhere. Top-left: white `#FFFFFF` bolt glyph + "HYPERFRAME" wordmark. Top-right: nav links "Installation Specs About us" in Everett 16px weight 400 `#F3F3F3`, then "Subscribe for updates" in `#CBFB45`, then a solid `#CBFB45` circle (border-radius 100%, ~56px) with a `#151517` arrow. Bottom-left: a three-line headline in Everett 54px weight 400, line-height 1.15 — first line "Meet Hyperframe," in `#CBFB45`, remaining lines in `#F3F3F3`. Bottom-right: a hairline grey circle with a vertical line through it as a scroll cue. Center-right: a floating photoreal render of black steel track and galvanized studs on the void. 2. **Gunmetal card**: Background `#3A3A3E`, border-radius 15px, padding 36px, no border, no shadow, on a `#151517` or `#232325` section. Heading in Everett 30px weight 400 `#F3F3F3`, body in Everett 16px weight 400 `#7E7E87`, optional link in `#CBFB45` at 16px with no underline. 3. **Chalk inversion band**: Full-width `#F3F3F3` section, square corners. Heading in Everett 54px weight 400 `#151517`, body in Everett 18px weight 400 `#151517`, inline links in `#70833C`. Below, a bare email input: transparent background, no border, border-radius 0, padding 6px 0, Everett 18px weight 400, text `#000000`. 4. **Mega stat block**: On `#151517`, a single numeral or figure set in Everett Light — weight 300 — at 260px, color `#F3F3F3`, line-height ~1.0, with a caption beneath in Everett 15px weight 400 `#898990`. No box, no rule, no accent color. 5. **Lime CTA pair**: A text link "Subscribe for updates" in Everett 16px weight 400 `#CBFB45` (no underline, no padding) sitting 10px left of a solid `#CBFB45` circle button, border-radius 100%, containing a `#151517` arrow glyph. No border, no shadow — this is the only filled control on the page. ## Similar Brands - **Nothing** — flagship-hardware minimalism on a dark canvas: monochrome product reverence with a single disciplined signal color. - **Teenage Engineering** — the machine photographed as sculpture, spec-sheet typography, and industrial parts presented as the entire aesthetic. - **Framework** — the same modular, snaps-together hardware ethos told through exploded product renders and engineering-first restraint. - **CAKE** — Scandinavian electric-machine minimalism: the vehicle floating on a void canvas, one functional accent, zero decoration. - **Polestar** — engineered restraint at scale; monochrome surfaces, a single grotesk voice, and the product render doing all emotional work. ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-iron: #151517; --color-forge: #232325; --color-gunmetal: #3A3A3E; --color-steel: #777777; --color-zinc: #7E7E87; --color-zinc-bright: #898990; --color-chalk: #F3F3F3; --color-white: #FFFFFF; --color-ink: #000000; --color-hyper-lime: #CBFB45; --color-olive-lime: #70833C; --color-forge-orange: #E76D1E; /* Typography — Families */ --font-everett: 'Everett', 'Helvetica Neue', Helvetica, ui-sans-serif, system-ui, sans-serif; /* Typography — Scale */ --text-caption: 11px; --text-tag: 13px; --text-label: 15px; --text-body-sm: 16px; --text-body: 18px; --text-heading-sm: 30px; --text-heading: 44px; --text-heading-lg: 54px; --text-mega: 260px; --leading-display: 1.1; --leading-heading: 1.15; --leading-body: 1.5; /* Typography — Weights */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; /* Spacing */ --spacing-tight: 6px; --spacing-unit: 10px; --spacing-30: 30px; --spacing-card: 36px; --spacing-section-drop: 300px; /* Border Radius */ --radius-none: 0px; --radius-card: 15px; --radius-circle: 100%; /* Surfaces */ --surface-iron-canvas: #151517; --surface-forge-band: #232325; --surface-gunmetal-card: #3A3A3E; --surface-chalk-field: #F3F3F3; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-iron: #151517; --color-forge: #232325; --color-gunmetal: #3A3A3E; --color-steel: #777777; --color-zinc: #7E7E87; --color-zinc-bright: #898990; --color-chalk: #F3F3F3; --color-white: #FFFFFF; --color-ink: #000000; --color-hyper-lime: #CBFB45; --color-olive-lime: #70833C; --color-forge-orange: #E76D1E; /* Typography */ --font-everett: 'Everett', 'Helvetica Neue', Helvetica, ui-sans-serif, system-ui, sans-serif; /* Typography — Scale */ --text-caption: 11px; --text-tag: 13px; --text-label: 15px; --text-body-sm: 16px; --text-body: 18px; --text-heading-sm: 30px; --text-heading: 44px; --text-heading-lg: 54px; --text-mega: 260px; --leading-display: 1.1; --leading-heading: 1.15; --leading-body: 1.5; /* Spacing */ --spacing-tight: 6px; --spacing-unit: 10px; --spacing-30: 30px; --spacing-card: 36px; --spacing-section-drop: 300px; /* Border Radius */ --radius-none: 0px; --radius-card: 15px; --radius-circle: 100%; } ```