` renders at 52px with weight 500 and negative tracking — meaning the primary lead paragraph is typographically *indistinguishable from h1*. This is the editorial "pull quote as hero" pattern: the prose IS the headline. - **Body at 16/24 with −0.4px.** Even body copy gets the Graphik tracking treatment — −0.4px keeps the type dense and crisp, matching the display treatment at a smaller scale. **What's absent:** no italic, no display alternate face, no serif. Graphik + two weights is the entire typographic system. --- ## 4. Component Stylings **Primary button pill** — e.g. "Sign In", "Try Luma" - Background: white pill on dark hero / black pill on white shelf (contextual inversion) - Border-radius: `3.35544e+07px` — this is the CSS parser's interpretation of a very large px number (likely `border-radius: 100vmax` or `9999px` being computed against a container size). Effectively: **full capsule**. - Text: Graphik 16px/24 weight 400, `−0.4px` tracking - No shadow, no transform, no hover changes detected in the extracted data — focus is the only interactive state surfaced (native `rgb(0, 95, 204) auto 1px`) **Cards / content surfaces** - Border-radius: `24px` — a generous but not pill corner, used on video wrappers and feature cards - Background: `oklch(100% 0 0)` white on the light shelf; `rgb(0, 0, 0)` on dark sections - Border: `oklch(92.2% 0 0)` — a 92% lightness hairline that reads as the faintest of lines against white **Links / nav items** ("Product", "Pricing", "Enterprise", "News", "Join Us") - Transparent background, `rgb(255, 255, 255)` text (on the dark nav bar) - Class `.typo-label` suggests a semantic class system for small-cap type — exact label treatment not in the extracted data - No hover state detected — navigation is feedback-free until focus - Focus ring: `rgb(0, 95, 204) auto 1px` (browser default) **Inputs** - Border: `oklch(75% 0 0)` — slightly darker than `--border` to signal an editable affordance **Shadows** — none in the extracted system. Depth is binary (dark hero above, white shelf below). --- ## 5. Layout Principles - **Video-hero over content-shelf.** The hero occupies roughly the top 70% of the first viewport and plays video with the headline overlaid in the lower-left; below the fold a clean white section houses copy, cards, and product features. - **Sticky dark nav bar.** The navigation bar is `rgb(0, 0, 0)` with white text — it sits against the dark hero without a visible transition. On scroll, the bar presumably holds the dark treatment as the page transitions to white (a deliberate "masthead" strategy rather than a chameleon nav). - **Section padding: `0 32px`.** Global horizontal rails at 32px keep content pulled in from the viewport edges. - **Footer padding: `0 32px 160px` with `gap: 80px`.** The footer ends with deep breathing room — 160px below content — treating the page close as an editorial margin, not a flush cutoff. - No breakpoints are extracted — the layout almost certainly uses container queries or `clamp()`-based scaling given the OKLCH token system and the modern Tailwind CSS stack. **Detected stacks**: Next.js + Tailwind CSS — consistent with the OKLCH token usage and the obfuscated Graphik class names. --- ## 6. Depth & Elevation Depth is **binary**: a dark hero video pane sits above a pure-white content pane. There is no gradient between them; the transition is a hard edge. Within each pane: - On the dark side: a subtle dotted-grid texture (visible in the screenshot on the right edge) provides the only sub-pane depth cue. No shadows. - On the light side: cards sit on the white canvas with `oklch(92.2% 0 0)` hairline borders — luminance 0.92 against 1.00, so the separation is barely perceptible but legibly carded. **No `box-shadow` values in the extracted data.** Elevation is achieved through contrast of luminance, not through shadow — and the dark/light hard edge between hero and shelf is the entire depth system of the page. --- ## 7. Do's and Don'ts **Do** - Use **OKLCH** for every token. Luma's restraint is only credible because the neutrals are perceptually tuned — RGB grayscale breaks the tonal math. - Pick **Graphik** (or equivalent: Söhne, Neue Haas Grotesk, Helvetica Now Display) as the single typeface. Ship 400 and 500 only. - Apply negative tracking scaled to ~−5% of font-size across the whole ramp — including body. - Invert chrome based on context: dark hero → white pill, white shelf → black pill. The capsule shape is constant; the inversion does the visual work. - Reserve chroma for destructive/error states only. `oklch(57.7% 0.245 27.325)` is the only saturated hue in the system. - Use `24px` card radii and full-capsule button radii (`border-radius: 9999px` or `100vmax`) — nothing in between. - Treat paragraphs as potential hero type. Luma's `
` at 52px is a deliberate flattening of h1/p into a single editorial voice. **Don't** - Don't introduce a brand accent color. The token system doesn't have one; adding one breaks the editorial neutrality. - Don't use drop-shadows — the system has none, and adding them would undermine the hard hero/shelf edge. - Don't use a third font-weight. 400 + 500 is the full palette; 300 looks anemic in Graphik and 600+ breaks the display-over-text hierarchy. - Don't soften the hero-to-shelf transition with a gradient. The hard edge is load-bearing. - Don't use positive letter-spacing on display type — the whole look depends on tight, dense headlines. - Don't place the nav over the hero without explicit dark styling — letting it "adapt" to the hero will blur Luma's masthead posture. --- ## 8. Responsive Behavior No breakpoints are extracted — Luma is using a modern Next.js + Tailwind CSS v4 setup with OKLCH tokens, which typically means responsive scaling happens via `clamp()`, container queries, or Tailwind utility breakpoints (`sm/md/lg/xl/2xl`) rather than explicit `@media` rules captured in stylesheets. The practical behavior: the 52px h1 likely scales down to ~36–40px on tablet and ~28–32px on mobile via `clamp(...)`, keeping the negative tracking proportional. The hero video maintains aspect ratio while the shelf expands upward to fill the shorter viewport. Section padding of `0 32px` compresses to `0 16px` or `0 20px` on narrow screens. The key responsive invariant: the dark-hero-over-light-shelf composition must survive every breakpoint — collapsing to a single scroll column but never abandoning the binary contrast. --- ## 9. Agent Prompt Guide > Build a UI that matches Luma's design language. Use **OKLCH** color tokens: page bg `oklch(100% 0 0)`, foreground `oklch(14.5% 0 0)`, border `oklch(92.2% 0 0)`, muted `oklch(97% 0 0)`, ring `oklch(70.8% 0 0)`. Reserve chroma for destructive states only: `oklch(57.7% 0.245 27.325)` is the one allowed hue. Typography: **Graphik** (or Söhne/Neue Haas) at weights **400 and 500 only**. Display (H1, H2, H3, hero P) is weight 500 with negative tracking scaled to ~−5% of font-size (e.g. 52px → −2.6px, 48px → −1.44px, 32px → −1.28px). Body is 16/24 with `−0.4px` tracking at weight 400. Layout: a dark hero pane (`rgb(0, 0, 0)` bg with video + dotted grid texture) sits directly above a pure-white content shelf — **hard edge, no gradient**. Nav bar is dark (`rgb(0, 0, 0)` bg, white text) and stays dark through the transition. Primary CTA is a **full capsule pill** that inverts based on context: white pill with black text on dark surfaces, black pill with white text on light surfaces. Cards get `24px` radius. No box-shadows anywhere — depth is binary luminance contrast. Keep section padding at `0 32px`; footer padding at `0 32px 160px` with `gap: 80px` so the page ends with generous editorial breathing room. Let Graphik and the OKLCH neutrals carry the entire brand — no illustrations, no colored icons, no decorative chrome. --- *Generated by Sparkbites — extracted from live CSS analysis*