--- version: alpha name: dylanbrouwer-design-analysis description: "A high-contrast, motion-forward portfolio interface built on a gradient dark-to-light canvas, dominated by an oversized ABC Gravity display headline, a Die Grotesk B grotesque for headings and UI labels, and IBM Plex Mono for body/meta text. The system reads as a designer's showcase — near-monochrome greys, a single hot-orange accent, zero-radius editorial buttons and cards, and enormous typographic scale used as the primary visual event." colors: ink: "#3c3a3e" ink-soft: "#7b7a7c" graphite: "#333333" black: "#000000" near-black: "#040305" surface-dark: "#161616" surface-dark-elevated: "#222222" muted: "#a2a2a2" muted-soft: "#b9b7bb" hairline: "#c9c7cc" hairline-soft: "#dddddd" hairline-softer: "#cccccc" canvas: "#f1f1f1" surface: "#ffffff" surface-off: "#fafafa" accent-orange: "#ff4c24" accent-orange-active: "#ff6436" accent-blue: "#3898ec" accent-indigo: "#2d40ea" typography: display-hero: fontFamily: "ABC Gravity Variable, Archivo Black, sans-serif" fontSize: 274px fontWeight: 400 lineHeight: 0.74 letterSpacing: -0.02em heading-lg: fontFamily: "Die Grotesk B, Space Grotesk, sans-serif" fontSize: 60px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.03em heading-md: fontFamily: "Die Grotesk B, Space Grotesk, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.03em body-mono: fontFamily: "IBM Plex Mono, ui-monospace, monospace" fontSize: 12px fontWeight: 500 lineHeight: 1.3 letterSpacing: -0.01em button: fontFamily: "Die Grotesk B, Space Grotesk, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.3 letterSpacing: -0.01em rounded: none: 0px md: 12px lg: 14px spacing: xxs: 4px xs: 6px sm: 8px md: 12px lg: 24px xl: 48px xxl: 72px section: 96px jumbo: 120px components: top-nav: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.button}" padding: 24px nav-link: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 0px contact-pill: backgroundColor: "{colors.surface-dark}" textColor: "{colors.muted}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 12px button-primary: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 0px hero-headline: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.display-hero}" hero-lede: backgroundColor: transparent textColor: "{colors.surface}" typography: "{typography.heading-md}" meta-label: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.body-mono}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" project-card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body-mono}" rounded: "{rounded.none}" project-tag: backgroundColor: "{colors.accent-orange}" textColor: "{colors.surface}" typography: "{typography.body-mono}" rounded: "{rounded.none}" process-card: backgroundColor: "{colors.surface-off}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.lg}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-mono}" padding: 48px --- ## Overview dylanbrouwer.design is a designer's portfolio built as one continuous motion event. The landing surface opens on a **gradient dark-to-light canvas** — a near-black top (`{colors.black}` / `{colors.surface-dark}`) that dissolves down into the light `{colors.canvas}` (#f1f1f1) that carries the rest of the page. The dominant visual is an enormous **ABC Gravity** display headline ("SITES THAT MOVE") set at ~274px — the type IS the hero art, layered over a floating monitor render. The type voice is a three-way split: **ABC Gravity Variable** (a heavy variable display face) for the marquee headline only; **Die Grotesk B** (a tight grotesque) for section headings and UI/button labels; and **IBM Plex Mono** (open-source monospace) for all body copy, meta lines, timestamps, and captions. The monospace body against the massive display headline is the signature tension of the system. Color is near-monochrome — a full range of greys from `{colors.ink}` (#3c3a3e) through `{colors.muted}` (#a2a2a2) up to white and the #f1f1f1 canvas — punctuated by a single hot **`{colors.accent-orange}`** (#ff4c24) used on tags and small status dots. The palette is disciplined and industrial. **Key Characteristics:** - Gradient dark-to-light hero canvas — the page floor shifts from `{colors.black}` at the top to `{colors.canvas}` (#f1f1f1) below, with grey project sections following. - Oversized ABC Gravity display headline (`{typography.display-hero}` — ~274px, weight 400, line-height 0.74, -0.02em tracking) rendered in `{colors.muted}` grey against the dark canvas. - Die Grotesk B grotesque (`{typography.heading-lg}` / `{typography.heading-md}`) for section titles and all button/nav labels at tight -0.03em tracking. - IBM Plex Mono at 12px for every body, meta and caption line — the monospace against giant display type is the core contrast. - Zero border-radius on buttons and cards (measured `radius: 0px`) — hard editorial rectangles. A secondary 12–14px radius appears only on a small number of surfaces (process cards / image crops). - Single hot-orange accent (`{colors.accent-orange}` — #ff4c24) reserved for tags, status dots and the "+ CONTACT" marker. Everything else is greyscale. - No shadows measured anywhere — depth comes entirely from the canvas gradient and from photographic project renders, not from elevation tokens. ## Colors ### Accent - **Accent Orange** (`{colors.accent-orange}` — #ff4c24): The single brand accent. Appears on the "+ CONTACT" dot, project tags, and small status markers. Its active/warmer variant is `{colors.accent-orange-active}` (#ff6436). - **Accent Blue** (`{colors.accent-blue}` — #3898ec) and **Accent Indigo** (`{colors.accent-indigo}` — #2d40ea): Low-frequency accents (7 hits each) — these are Webflow platform defaults (focus rings / form states) rather than deliberate brand hues. See Known Gaps. ### Text / Ink - **Ink** (`{colors.ink}` — #3c3a3e): The strongest text tone on light surfaces — used for headings on the light canvas. - **Ink Soft** (`{colors.ink-soft}` — #7b7a7c): Secondary grey text. - **Graphite** (`{colors.graphite}` — #333333): A darker neutral used sparingly on text/dividers. - **Muted** (`{colors.muted}` — #a2a2a2): The measured button/label text color and the grey used to render the huge hero headline against the dark canvas. - **Muted Soft** (`{colors.muted-soft}` — #b9b7bb): Tertiary grey. ### Surface - **Black** (`{colors.black}` — #000000) and **Near-black** (`{colors.near-black}` — #040305): The top of the hero gradient and monitor/laptop renders. - **Surface Dark** (`{colors.surface-dark}` — #161616) and **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #222222): Dark UI chrome — the contact pill and dark nested surfaces. - **Canvas** (`{colors.canvas}` — #f1f1f1): The default page floor below the hero gradient. - **Surface** (`{colors.surface}` — #ffffff): Cards and project image frames. - **Surface Off** (`{colors.surface-off}` — #fafafa): A barely-off-white for process cards. ### Hairline - **Hairline** (`{colors.hairline}` — #c9c7cc), **Hairline Soft** (`{colors.hairline-soft}` — #dddddd), **Hairline Softer** (`{colors.hairline-softer}` — #cccccc): The 1px divider / border tones between light sections. ## Typography ### Font Family Three families run the system: - **ABC Gravity Variable** — a heavy variable display face (Dinamo). Used only for the marquee hero headline at ~274px. - **Die Grotesk B** — a tight grotesque. Used for section headings (`{typography.heading-lg}` / `{typography.heading-md}`) and all button + nav labels. - **IBM Plex Mono** — open-source monospace. Used for all body copy, meta lines ("DESIGN BY DYLAN", "NL 15:06 CET"), captions and tags. Both ABC Gravity and Die Grotesk B are commercial/custom typefaces. Substitutes are documented below. ### Hierarchy | Token | Family | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---|---| | `{typography.display-hero}` | ABC Gravity Variable | 274px | 400 | 0.74 | -0.02em | The one giant hero headline ("SITES THAT MOVE") | | `{typography.heading-lg}` | Die Grotesk B | 60px | 500 | 1.0 | -0.03em | Section heads (h2) | | `{typography.heading-md}` | Die Grotesk B | 36px | 500 | 1.0 | -0.03em | Sub-heads, hero lede, process card titles (h3) | | `{typography.body-mono}` | IBM Plex Mono | 12px | 500 | 1.3 | -0.01em | Body, meta lines, captions, tags | | `{typography.button}` | Die Grotesk B | 12px | 500 | 1.3 | -0.01em | Button + nav labels | ### Principles The hero display size is a deliberate spectacle — line-height 0.74 lets "SITES THAT" and "MOVE" overlap and crowd the frame. Section headings stay at line-height 1.0 with tight -0.03em tracking for a dense grotesque block. Body copy is exclusively monospace at a small 12px — the mono-against-display tension is the intentional voice; never set running body in Die Grotesk B or the display face. ### Note on Font Substitutes - **ABC Gravity Variable** is a licensed Dinamo typeface and cannot ship as a public web font. The closest open-source substitute is **Archivo Black** (heavy, geometric, condensed feel); **Anton** is a viable narrower alternative for the giant headline. - **Die Grotesk B** is a commercial grotesque. **Space Grotesk** (weight 500) is the closest open substitute; **Inter** at 500 with -0.03em tracking is a fallback. - **IBM Plex Mono** is open-source (SIL OFL) and ships as-is. ## Layout ### Spacing System - **Base unit:** approximately 4px, but the measured scale is irregular (heavy clustering at 6px and 12px). - **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 6px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 24px · `{spacing.xl}` 48px · `{spacing.xxl}` 72px · `{spacing.section}` 96px · `{spacing.jumbo}` 120px. - **Micro rhythm:** 6px (most frequent) and 12px dominate small padding/gaps — labels, meta rows, tag chips. - **Section rhythm:** 72px / 96px / 120px separate the large editorial bands. - A measured 274px gap mirrors the display-hero cap-height — the headline's own scale sets the top-of-page rhythm. ### Grid & Container - Landing is a full-bleed single column: the hero headline spans the viewport width, with the floating monitor render centered beneath it. - The hero lede ("I craft experience-driven websites…") is anchored bottom-right; meta line ("DESIGN BY DYLAN / NL 15:06 CET") bottom-left — a classic corner-anchored editorial layout. - Project cards below sit in an asymmetric, staggered layout (portrait and landscape crops at varying vertical offsets) rather than a strict grid. - The process band ("Define / Design / Develop") is a 3-up card row. ### Whitespace Philosophy The page is spacious and confident — the giant headline consumes the entire first viewport, then long stretches of quiet grey canvas separate project artifacts. The whitespace is theatrical: it exists to make the oversized type and the floating device renders feel weightless. ## Elevation & Depth No shadow tokens were measured (`shadows: []`). Depth is created entirely by two devices: | Level | Treatment | Use | |---|---|---| | Flat | No shadow, no border | All buttons, cards, and UI chrome | | Canvas gradient | Dark-to-light vertical gradient across the hero | The primary depth cue — top goes `{colors.black}`, bottom resolves to `{colors.canvas}` | | Photographic render | 3D device mockups (monitor, laptop) with their own internal lighting | Project artifacts carry their own depth as content, not as system tokens | The system deliberately avoids drop shadows. The floating-monitor render and gradient canvas do all of the depth work. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `{rounded.none}` | 0px | Buttons and cards (measured `radius: 0px`) — the default editorial rectangle | | `{rounded.md}` | 12px | A small number of image crops / nested surfaces | | `{rounded.lg}` | 14px | Process cards and rounded image frames (highest-frequency radius, 27 hits) | The system is bimodal: measured interactive components (button, card) render at **0px**, while a set of image/content surfaces round to **12–14px**. Treat 0px as the default for UI and 14px for photographic content frames. ### Photography Geometry Project imagery is shown as photographic device renders (monitors, laptops) and rectangular crops — some sharp-cornered, some at `{rounded.lg}` (14px). Aspect ratios vary (portrait and landscape) to feed the staggered project layout. ## Components ### Navigation **`top-nav`** — Transparent bar pinned over the dark hero. Left: the "B" monogram mark. Center: text nav links ("+ ABOUT", "+ SERVICES", "+ WORK") in `{typography.button}` (Die Grotesk B 12px / 500) colored `{colors.muted}`. Right: the contact pill. Padding ~24px. **`nav-link`** — Transparent text button, `{colors.muted}` label, `{typography.button}`, zero radius, zero padding. Each link is prefixed with a "+" glyph. **`contact-pill`** — The "● CONTACT" control at top-right. Dark `{colors.surface-dark}` background, `{colors.muted}` label, `{typography.button}`, with a small `{colors.accent-orange}` status dot. Rounded `{rounded.md}` (derived — the pill's radius is inferred from screenshot; measured buttons read 0px). ### Buttons **`button-primary`** — The measured button style: transparent background, `{colors.muted}` (#a2a2a2) label text, `{typography.button}`, `{rounded.none}` (0px), 0px padding. dylanbrouwer's buttons are minimal text-buttons ("+ MORE ABOUT ME", "SHOW ALL", "+ DISCOVER MORE") — a Die Grotesk B label with a leading "+" glyph, no fill, no rounded corners. ### Hero **`hero-headline`** — The marquee display type ("SITES THAT MOVE") in `{typography.display-hero}` (ABC Gravity ~274px), rendered `{colors.muted}` grey against the dark gradient. Line-height 0.74 forces the two lines to overlap. **`hero-lede`** — Bottom-right supporting sentence in `{typography.heading-md}` (Die Grotesk B 36px), rendered near-white (`{colors.surface}`) over the darker mid-gradient. **`meta-label`** — Corner meta text ("DESIGN BY DYLAN", "NL 15:06 CET") in `{typography.body-mono}` (IBM Plex Mono 12px), `{colors.muted}`. ### Cards & Content **`card`** — The base card: `{colors.surface}` (white) background, `{colors.ink}` text, `{rounded.none}` (0px), no shadow (both measured). **`project-card`** — Staggered portfolio artifact. White/photographic surface, zero radius, with a `{typography.body-mono}` caption row beneath ("+ WELDEN & KAZRA — DESIGN / DEVELOPMENT"). Some crops round to `{rounded.lg}` (14px). **`project-tag`** — Small status/label chip on project imagery. `{colors.accent-orange}` fill, `{colors.surface}` label, `{typography.body-mono}`, zero radius. The only place the hot orange fills a surface. **`process-card`** — The "Define / Design / Develop" cards. `{colors.surface-off}` (#fafafa) surface, `{typography.heading-md}` title, rounded `{rounded.lg}` (14px). Each carries an abstract greyscale glyph above the label. ### Footer **`footer`** — Light `{colors.canvas}` footer closing the page. Link columns (About / Services / Work / Contact, FAQ / Awwwards / Certified Partner) in `{typography.body-mono}`, `{colors.ink}` text, plus a "GET IN TOUCH" control. Padding ~48px. ## Do's and Don'ts ### Do - Reserve `{typography.display-hero}` (ABC Gravity ~274px) for the single hero marquee. It is the page's main event — one per page. - Keep all body, meta and caption text in `{typography.body-mono}` (IBM Plex Mono 12px). The monospace is the voice. - Use Die Grotesk B for section heads and every button/nav label at tight -0.03em tracking. - Keep buttons and cards at `{rounded.none}` (0px) — the hard rectangle is the system default. - Reserve `{colors.accent-orange}` (#ff4c24) for tags, status dots and the contact marker. Never fill a large surface with it. - Let the canvas gradient (`{colors.black}` → `{colors.canvas}`) carry depth instead of shadows. - Prefix nav links and buttons with the "+" glyph — it is a consistent house convention. ### Don't - Don't set running body copy in Die Grotesk B or ABC Gravity — body stays monospace. - Don't add drop shadows; no shadow tokens exist in the system. - Don't round buttons or cards — 0px is intentional. Reserve `{rounded.lg}` (14px) for photographic/content frames only. - Don't introduce the Webflow-default blues (`{colors.accent-blue}` / `{colors.accent-indigo}`) as brand colors — they are platform artifacts. - Don't use more than one giant display headline per page. - Don't add hover-state documentation — default + pressed only. ## Responsive Behavior ### Breakpoints Only the landing page (desktop) was captured; breakpoints below are inferred from the layout and marked accordingly. | Name | Width | Key Changes (inferred) | |---|---|---| | Mobile | < 768px | Hero display type scales down dramatically from ~274px; nav collapses; project cards stack single-column | | Tablet | 768–1024px | Staggered project layout tightens toward 2-up; hero lede reflows | | Desktop | > 1024px | Full-width hero marquee with corner-anchored lede + meta; staggered multi-offset project layout | ### Touch Targets - Text buttons (`{component.button-primary}`) are measured at 0px padding — on touch the effective tap area would need to be enlarged beyond the label bounds (a likely gap for mobile). - Nav links are compact 12px labels; touch sizing is not captured. ### Collapsing Strategy - The oversized hero headline must scale by viewport width — at ~274px it only fits desktop; mobile requires a substantial size reduction (derived). - Staggered project cards reduce to a single stacked column on narrow screens. - The 3-up process row collapses to stacked cards. ## Iteration Guide 1. Focus on ONE component at a time; reference its YAML key directly (`{component.project-card}`, `{component.process-card}`). 2. Variants live as separate entries in `components:`. 3. Use `{token.refs}` everywhere — never inline a hex in a component. 4. Never document hover. Default and pressed states only. 5. The type trinity is strict: ABC Gravity (hero only) → Die Grotesk B (headings + labels) → IBM Plex Mono (everything else). Do not blur it. 6. Depth comes from the canvas gradient and photographic renders, not shadows — don't add elevation tokens casually. 7. When in doubt about emphasis: bigger ABC Gravity before adding color. The system is monochrome with one orange spark. ## Known Gaps - Only the **landing** page was captured; About, Services, Work and Contact surfaces were not measured. All non-hero component specs are inferred from the single landing screenshot. - **ABC Gravity Variable** and **Die Grotesk B** are commercial/custom typefaces (not flagged in `fonts_licensed` but confirmed as licensed faces); documented open-source substitutes must be used to ship. Only IBM Plex Mono is freely available. - Button and card measurements returned `radius: 0px` and `padding: 0px` — real tap padding and the contact-pill radius are inferred from screenshots and marked derived. - The `{colors.accent-blue}` (#3898ec) and `{colors.accent-indigo}` (#2d40ea) values are low-frequency Webflow platform defaults (focus/form states), not confirmed brand colors. - No shadow tokens were measured; if elevation is later introduced it must be re-extracted. - The hero canvas gradient stops (dark-to-light) are observed from screenshots, not measured as explicit gradient tokens — exact color stops and angle are unknown. - Responsive breakpoints, mobile hero type scaling, and animation/scroll-motion timings (the site is explicitly motion-forward — "sites that move") are entirely out of scope of the static capture. - Form validation, focus, and disabled states were not observed.