--- version: alpha name: NewGenre-design-analysis description: "A cinematic studio portfolio landing built on a full-bleed vertical gradient that runs from near-black navy-espresso at the top down to a warm off-white floor. The system is editorial and near-monochrome — a large condensed serif display headline over a light-on-dark hero, quiet Saans-grotesque supporting type, and a single soft gray pill CTA. Voltage comes from the gradient canvas and the oversized serif headline rather than from color accents." colors: ink: "#000000" link: "#0000ee" canvas: "#ffffff" on-dark: "#f9fafb" primary: "#99a1af" surface-dark: "#0c1018" accent-slate: "#44546b" accent-espresso: "#1e1310" accent-blue: "#007aff" typography: display: fontFamily: "Serrif Condensed, Georgia, serif" fontSize: 72px fontWeight: 400 lineHeight: 1.05 letterSpacing: -0.02em heading: fontFamily: "Saans Variable, Inter, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.01em body: fontFamily: "Saans Variable, Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.01em rounded: none: 0px sm: 8px lg: 16px pill: 50px pill-xl: 90px spacing: xxs: 4px xs: 6px sm: 8px base: 10px md: 16px lg: 24px xl: 32px xxl: 48px section: 64px components: top-nav: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.body}" wordmark: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.body}" hero-band: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display}" padding: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill-xl}" padding: 16px 24px text-link: backgroundColor: transparent textColor: "{colors.link}" typography: "{typography.body}" input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" site-badge: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body}" rounded: "{rounded.none}" --- ## Overview New Genre's landing surface is a single, cinematic full-bleed hero: one continuous vertical gradient that begins in near-black navy-espresso at the top of the page (`{colors.surface-dark}` — #0c1018, with the warmer `{colors.accent-espresso}` — #1e1310 tinting the very top band) and dissolves downward through slate-blue (`{colors.accent-slate}` — #44546b) into a warm off-white floor. The effect reads as a sunrise seen through a window — editorial, restrained, confident. The type voice is a deliberate two-face pairing: a large **condensed serif** display headline (`{typography.display}` — Serrif Condensed, 72px) carrying the entire brand statement ("New Genre is a global design & technology studio accelerating tomorrow's ideas."), and a quiet **Saans** grotesque (`{typography.heading}` / `{typography.body}`) handling navigation, sub-copy, and UI labels. The serif does the talking; everything else recedes. Color is near-monochrome. There is no marketing palette — the interest lives entirely in the gradient and in the black-on-white/white-on-dark contrast. The only chromatic UI moments are the default hyperlink blue (`{colors.link}` — #0000ee) captured on anchors and a soft gray pill CTA (`{colors.primary}` — #99a1af). A single black vertical "Site of the Day" badge (`{component.site-badge}`) is pinned to the right edge. **Key Characteristics:** - Full-page vertical gradient canvas — dark navy-espresso top to warm off-white bottom. No section bands, no cards; the gradient IS the layout. - Oversized condensed serif display headline (`{typography.display}` — 72px, weight 400, -0.02em) as the single hero element and primary brand voltage. - Saans grotesque (`{typography.heading}` / `{typography.body}`) for nav, labels, and body — quiet, tight (-0.01em), weight 400 throughout. - One soft gray pill CTA (`{component.button-primary}`) — background `{colors.primary}` (#99a1af), black label, fully rounded at `{rounded.pill-xl}` (90px). - Light-on-dark text at the top of the hero (`{colors.on-dark}` — #f9fafb) resolving toward dark-on-light lower down. - Near-monochrome system; the only accent hues are the anchor blue (`{colors.link}`) and a barely-used iOS-blue (`{colors.accent-blue}` — #007aff). - Vertical "Site of the Day" black badge pinned to the right viewport edge — the one hard-edged black block in the composition. ## Colors ### Brand & Accent - **Ink** (`{colors.ink}` — #000000): The dominant text and hard-block color — the wordmark, the display headline lower in the gradient, and the vertical badge block. - **Link** (`{colors.link}` — #0000ee): Anchor color captured across the page's links. This is the classic browser link blue — used for inline text links (`{component.text-link}`). - **Accent Slate** (`{colors.accent-slate}` — #44546b): A mid-gradient slate-blue that forms the middle of the hero wash. - **Accent Espresso** (`{colors.accent-espresso}` — #1e1310): The warm brown-black tinting the very top of the gradient behind the nav — a single-instance measured tone. - **Accent Blue** (`{colors.accent-blue}` — #007aff): A near-unused bright blue captured once. Reserved; not a UI staple. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): The base page floor where the gradient resolves toward the bottom, and the surface behind form inputs. - **Surface Dark** (`{colors.surface-dark}` — #0c1018): The near-black navy at the top of the hero gradient — the darkest measured surface. ### Text - **Ink** (`{colors.ink}` — #000000): Dark text against the light lower gradient and the wordmark against the dark top. - **On Dark** (`{colors.on-dark}` — #f9fafb): Near-white paragraph/nav text used against the dark top of the hero (measured on `p.color`). ### UI - **Primary** (`{colors.primary}` — #99a1af): A soft gray-blue used as the "Our work" pill CTA background (`{component.button-primary}`). The button's label is `{colors.ink}` black. ## Typography ### Font Family The system pairs two custom faces: **Serrif Condensed** (a high-contrast condensed serif used only for the display headline) and **Saans Variable** (a neutral grotesque by Displaay, used for navigation, headings, and body). The split is strict — serif for the hero statement, grotesque for everything else. Both are weight 400 throughout; the system never bolds. ### Hierarchy | Token | Family | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---|---| | `{typography.display}` | Serrif Condensed | 72px | 400 | 1.05 | -0.02em | Hero brand statement (h1) | | `{typography.heading}` | Saans Variable | 32px | 400 | 1.1 | -0.01em | Section headings (h2, h3) | | `{typography.body}` | Saans Variable | 16px | 400 | 1.0 | -0.01em | Nav links, labels, body copy, button labels | ### Principles The display serif is the entire brand voice — at 72px, weight 400, with -0.02em tracking, it carries the hero alone. Never bold it; the elegance depends on the regular weight of a condensed high-contrast serif. Saans handles all supporting roles at tight -0.01em tracking and stays at weight 400. The two-face contrast (condensed serif vs. neutral grotesque) is the signature. ### Note on Font Substitutes Both faces are custom/licensed and should not be assumed available. For **Serrif Condensed**, an open-source substitute is **Playfair Display** or **Bodoni Moda** (both high-contrast serifs; use a condensed axis or negative tracking to approximate). For **Saans Variable**, substitute **Inter** or **Space Grotesk** at weight 400 with -0.01em tracking. The fallback stacks declared here walk `Georgia, serif` for the display and `Inter, sans-serif` for Saans. ## Layout ### Spacing System - **Base unit:** effectively 2px, but the measured rhythm clusters on `{spacing.base}` (10px, highest frequency) and `{spacing.md}` (16px). - **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 6px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 64px. - **Button padding:** 16px × 24px on `{component.button-primary}`. - **Large gaps:** `{spacing.section}` (64px) appears as the largest recurrent structural gap. ### Grid & Container - The captured page is a single full-viewport hero. The wordmark sits top-left, the nav row top-right, and the display headline occupies the left ~60% of the viewport. - The "Our work" pill anchors near the lower-left of the first viewport. - The vertical "Site of the Day" badge is pinned flush to the right viewport edge, vertically centered in the hero. ### Whitespace Philosophy The composition is deliberately sparse — a single headline, a single CTA, and a nav row floating over an uninterrupted gradient. Whitespace (or rather, gradient-space) is the primary compositional device: the headline breathes against a large empty expanse of wash below it. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat | No shadow, no border | Nav, headline, wordmark — everything sits directly on the gradient | | Inset hairline | `rgba(0,0,0,0.05) 0 0 0 1px inset` | A single measured inset ring — the softest possible edge definition, likely on the pill CTA or an input | | Gradient depth | Vertical color wash | The dark-to-light gradient itself supplies all perceived depth; there are no drop shadows | The elevation philosophy is essentially flat. The only measured shadow is a 1px inset hairline at 5% black alpha — there are no drop shadows anywhere. Depth is created entirely by the gradient wash, not by layering. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `{rounded.none}` | 0px | Form inputs (hard-edged), the vertical badge block | | `{rounded.sm}` | 8px | Small rounded surfaces (most frequent radius) | | `{rounded.lg}` | 16px | Larger rounded surfaces / containers | | `{rounded.pill}` | 50px | Fully-rounded small elements | | `{rounded.pill-xl}` | 90px | The "Our work" pill CTA (`{component.button-primary}`) | The system runs two radius personalities simultaneously: hard 0px edges (inputs, the black badge) and fully-rounded pills (the CTA at 90px). The 8px/16px radii cover intermediate rounded surfaces. ### Photography Geometry No photography is present in the captured hero — the visual field is a pure gradient. Any imagery treatment is out of scope for this capture. ## Components ### Navigation **`top-nav`** — Horizontal nav row floating over the dark top of the gradient. Transparent background, `{colors.on-dark}` (#f9fafb) light text in `{typography.body}` (Saans 16px / 400). Menu items: Work, Approach, Services, News, About, then a short divider dash, then Join, Contact. **`wordmark`** — "NEW GENRE" set top-left in `{typography.body}` (Saans), `{colors.on-dark}` against the dark top band. Transparent background. ### Hero **`hero-band`** — The full-viewport hero. Background is the vertical gradient anchored at `{colors.surface-dark}` (#0c1018) at the top. Text `{colors.on-dark}` at the top. Carries the display headline in `{typography.display}` (Serrif Condensed 72px) and the CTA. Structural padding around `{spacing.section}` (64px). ### Buttons **`button-primary`** — The single "Our work" CTA. Background `{colors.primary}` (#99a1af), label `{colors.ink}` (#000000) in `{typography.body}`, fully-rounded at `{rounded.pill-xl}` (90px), padding 16px × 24px. Sits low-left in the hero. The soft gray fill and pill shape are the system's one interactive accent. ### Links **`text-link`** — Inline anchors captured in `{colors.link}` (#0000ee), `{typography.body}`. Transparent background. This is the default anchor color measured across the page. ### Forms **`input`** — Text input with hard 0px corners (`{rounded.none}`), `{colors.canvas}` background, `{colors.ink}` text, `{typography.body}`. The sharp-cornered input contrasts deliberately with the fully-rounded button. ### Badge **`site-badge`** — A vertical black block pinned flush to the right viewport edge, reading "W. / Site of the Day" (rotated). Background `{colors.ink}` (#000000), text `{colors.canvas}` (#ffffff), `{typography.body}`, hard corners (`{rounded.none}`). The single hard black block in the composition. ## Do's and Don'ts ### Do - Let the vertical gradient (`{colors.surface-dark}` top → light bottom) carry the entire layout. It is the page, not a decoration on the page. - Keep the display headline in Serrif Condensed at weight 400. The condensed high-contrast serif at regular weight is the brand. - Use Saans (`{typography.body}` / `{typography.heading}`) for all nav and supporting type at tight -0.01em tracking, weight 400. - Keep the CTA a single soft gray pill (`{component.button-primary}`) at `{rounded.pill-xl}` (90px) with a black label. - Switch text color from `{colors.on-dark}` at the dark top to `{colors.ink}` as the gradient resolves toward light — legibility depends on it. - Keep the "Site of the Day" badge (`{component.site-badge}`) as a hard black block; it is the intentional counterpoint to the soft gradient. ### Don't - Don't bold the display serif or the Saans body. The system is weight-400 throughout. - Don't introduce marketing accent colors. The palette is near-monochrome — the gradient and black/white contrast do the work. - Don't round the form inputs; they are deliberately hard-edged (`{rounded.none}`) against the pill CTA. - Don't add drop shadows. The only measured depth cue is a 5%-alpha inset hairline; keep the system flat. - Don't crowd the hero. The composition depends on a single headline, single CTA, and large empty gradient expanse. ## Responsive Behavior ### Breakpoints Only a desktop landing capture and its full-height mobile-proportioned render were provided; breakpoint values are not measured. Observed behavior: | Name | Behavior (observed) | |---|---| | Desktop | Wordmark top-left, full horizontal nav top-right, 72px display headline left-aligned, pill CTA lower-left, vertical badge pinned right edge | | Narrow / mobile | Layout compresses proportionally; the display headline and nav scale down but retain the same left-aligned, single-column arrangement over the gradient | Exact breakpoint widths, nav collapse behavior, and mobile type scaling were not captured — see Known Gaps. ### Touch Targets - `{component.button-primary}` at 16px × 24px padding on a 16px label comfortably exceeds a 44px tap height. - Nav links in `{typography.body}` (16px) are the smallest interactive targets; spacing between them was not individually measured. ### Collapsing Strategy Not measured. The single-viewport hero suggests the nav would collapse to a menu affordance at small widths, but no mobile nav pattern was captured. ## Iteration Guide 1. Focus on ONE component at a time. Reference its YAML key directly (`{component.button-primary}`, `{component.site-badge}`). 2. Variants (`-active`, `-disabled`, `-focused`) live as separate entries in `components:` when measured — none were captured here. 3. Use `{token.refs}` everywhere — never inline hex. 4. Never document hover. Default and Active/Pressed states only. 5. The display serif stays Serrif Condensed 400; supporting type stays Saans 400. The pairing does not blur. 6. The gradient is the system's signature — treat `{colors.surface-dark}` as the top anchor and let it resolve to `{colors.canvas}` at the bottom. 7. When adding emphasis, reach for scale in the serif before any color accent. ## Known Gaps - The dominant hero gradient (navy-espresso → slate → warm off-white) is not a single measured token; only its stop colors (`{colors.surface-dark}`, `{colors.accent-slate}`, `{colors.accent-espresso}`, resolving to `{colors.canvas}`) were captured. The exact gradient angle, stops, and percentages are not measured. - Only the landing page was captured; interior pages (Work, Approach, Services, News, About) and their component vocabulary are out of scope. - **Serrif Condensed** and **Saans Variable** are custom/licensed faces (not flagged in `fonts_licensed`, which was empty, but treated as custom); open-source substitutes are documented in the Typography section — do not assume the originals ship. - Body `line-height` was measured at 1.0, which is unusually tight and may reflect a single-line measured element rather than a paragraph setting; multi-line body leading is unconfirmed. - Button and link interactive states (active/pressed/focus) were not captured — only default styling is documented. - The `{colors.link}` value (#0000ee) is the default browser anchor blue and may indicate unstyled anchors in the capture rather than an intentional link treatment. - `{colors.accent-blue}` (#007aff) appeared once and is documented as reserved; its actual usage is unconfirmed. - Responsive breakpoints, mobile nav collapse behavior, and animation/transition timings (gradient motion, CTA interaction) were not extracted.