# Expr3ss Design System

> High-contrast recruitment canvas pairing oversized Bricolage Grotesque headlines with a high-energy palette of Bowerbird blue and vibrant coral.

**Source:** https://expr3ss.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Expr3ss utilizes a high-impact "monochrome-plus" system where a stark white and off-white foundation is punctuated by large-scale blocks of Bowerbird blue (#a2b6fc) and coral (#ff6c3d). The typography is the primary driver of the brand's personality, featuring the expressive **Bricolage Grotesque** for headlines—often at massive scales up to 144px—paired with the functional **DM Sans** for UI and body text. Layouts are characterized by generous vertical spacing (up to 192px) and a mix of sharp-edged sections and soft-cornered cards (16px to 32px radii). The system avoids shadows entirely, relying on flat color blocks and 1px borders to define depth.

## Signature DNA
1. **Oversized Grotesque Display** (Bricolage Grotesque set at 80px+ with aggressive negative letter-spacing (-4px) creates a bold, modern editorial feel across all landing pages.)
2. **Chromatic Sectioning** (Full-width flood fills of #a2b6fc and #ff6c3d are used to transition between content themes, rather than traditional dividers.)
3. **Rounded Geometry** (A consistent 16px to 32px corner radius applied to cards and panels softens the high-contrast typography and flat color blocks.)

## Family Map
Not captured in source (no sub-brands identified).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| White | `#ffffff` | Primary page background and card surface | 19 | 1.0 | brand_page |
| Black | `#1c1e21` | Primary text color for readability | 382 | 1.0 | computed_style |
| People First | `#f2f0e6` | Warm off-white background for feature sections | 10 | 1.0 | brand_page |
| Ink | `#000000` | Secondary text and button labels | 168 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| Bowerbird | `#a2b6fc` | Primary brand accent; section backgrounds and primary surfaces | 11 | 1.0 | brand_page |
| Coral | `#ff6c3d` | Secondary brand accent; CTA backgrounds and high-attention blocks | 10 | 1.0 | brand_page |
| Link Blue | `#0000ee` | Standard hyperlink text | 98 | 0.8 | computed_style |
| Iguana | `#91ebb9` | Decorative only; decorative graphic elements | 0 | 0.9 | brand_page |
| Ocean | `#97dff0` | Decorative only; decorative graphic elements | 0 | 0.9 | brand_page |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Bricolage Grotesque | 500, 700 | Display and primary headlines | Bricolage Grotesque (Google Fonts) | OFL |
| DM Sans | 400, 500, 600, 700 | Sub-headings, UI labels, and body text | DM Sans (Google Fonts) | OFL |
| sans-serif | 400 | System fallback for body | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 144px | 129.6px | -4.32px | 500 | Hero display | `h2.framer-text` |
| `{type.display.xl}` | 80px | 80px | -4px | 700 | Primary page titles | `h1.framer-styles-preset-i7rmov` |
| `{type.display.lg}` | 56px | 56px | -1.68px | 700 | Section headers | `h2.framer-styles-preset-up4dse` |
| `{type.heading.md}` | 36px | 39.6px | -0.72px | 700 | Feature titles | `h4.framer-styles-preset-q7cryy` |
| `{type.heading.sm}` | 28px | 33.6px | -0.56px | 700 | Card titles | `h5.framer-styles-preset-1ybqq96` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Intro paragraphs | `p.framer-styles-preset-qbj87r` |
| `{type.body.md}` | 16px | 25.6px | 0.16px | 400 | Standard body text | `p.framer-styles-preset-1nbjjme` |
| `{type.body.sm}` | 14px | 22.4px | 0.14px | 400 | Captions and small text | `p.framer-styles-preset-oqgzui` |

### Principles
1. **Aggressive Kerning:** Display sizes (80px+) use negative letter-spacing between -4px and -4.32px to create a tight, interlocking typographic texture.
2. **Weight Contrast:** Headlines strictly use 700 weight for impact, while body text alternates between 400 (reading) and 700 (labels).
3. **Line Height Tightness:** Display line heights are set to 1.0 or less (e.g., 80px/80px) to maintain the blocky, structural feel of the Bricolage Grotesque font.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 12px | 21 |
| `{space.sm}` | 16px | 13 |
| `{space.md}` | 24px | 13 |
| `{space.lg}` | 48px | 11 |
| `{space.xl}` | 136px | 7 |
| `{space.section}` | 192px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Full-width section backgrounds | 579 occurrences |
| `{radius.md}` | 16px | Standard content cards | `Card` component |
| `{radius.lg}` | 24px | Feature panels and quote blocks | `Card` (observed once) |
| `{radius.xl}` | 32px | High-impact CTA cards and buttons | `Card` (8 occurrences) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All UI elements; the system is strictly 2D | No shadow tokens in evidence |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Base container for section layouts.
**Pages observed:** https://expr3ss.com, https://expr3ss.com/pricing
**Spec:** Background: `#ffffff` or `#a2b6fc` | Radius: `0px` | Padding: `0px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Card (Standard)
**Role:** Content grouping for features and pricing.
**Pages observed:** https://expr3ss.com, https://expr3ss.com/pricing
**Spec:** Background: `#ffffff` | Text: `#1c1e21` | Radius: `16px` | Padding: `9px 16px 7px`
**States observed:** Default: captured | Hover: not captured

#### Card (Accent)
**Role:** High-visibility feature cards.
**Pages observed:** https://expr3ss.com, https://expr3ss.com/pricing
**Spec:** Background: `#ff6c3d` | Text: `#0000ee` | Radius: `32px` | Padding: `12px 24px`
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific
#### Pricing Card
**Role:** Pricing tier display.
**Pages observed:** https://expr3ss.com/pricing
**Spec:** Background: `#ffffff` | Text: `#000000` | Radius: `16px` | Typography: DM Sans 14px/700
**States observed:** Default: captured

#### Quote Block
**Role:** Testimonial display.
**Pages observed:** https://expr3ss.com
**Spec:** Background: `#f2f0e6` | Radius: `24px` | Typography: DM Sans 18px/500
**States observed:** Default: captured

#### Hero CTA
**Role:** Primary page action.
**Pages observed:** https://expr3ss.com
**Spec:** Background: `#ff6c3d` | Text: `#ffffff` | Radius: `32px` | Padding: `12px 24px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 192px (vertical) |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Multi-column grids, mega display type (144px) |
| Mobile | 390px | Single column stack, display type scales to 56px-80px |

## Imagery & decoration
Expr3ss uses high-quality, warm lifestyle photography of people in workplace settings. These are often placed in large, rounded containers (16px-32px). Decorative elements include abstract geometric "stickers" in Iguana green (#91ebb9) and Ocean blue (#97dff0) that overlap section boundaries.

## Do's
- Use **Bricolage Grotesque** for all headlines above 24px.
- Apply negative letter-spacing of at least -0.72px on all headings.
- Use `#a2b6fc` (Bowerbird) for large-scale section backgrounds to create brand recognition.
- Keep all UI elements flat; avoid drop shadows.
- Maintain a minimum of 136px vertical spacing between major content sections.

## Don'ts
- **Wrong:** Using `#ff6c3d` for body text. **Right:** Use `#1c1e21`. **Reason:** Accessibility and readability.
- **Wrong:** Applying a 4px radius to cards. **Right:** Use `16px` or `32px`. **Reason:** The brand identity relies on soft, generous curves.
- **Wrong:** Mixing serif fonts into the system. **Right:** Stick to Bricolage Grotesque and DM Sans.
- **Wrong:** Using shadows to define card edges. **Right:** Use flat color contrast or 1px borders.

## Similar brands
- Linear (high-contrast typography)
- Framer (bold color blocks and grotesque type)
- Gumroad (flat UI and vibrant accent colors)

## Quick start
```css
/* CSS Variables */
:root {
  --color-bowerbird: #a2b6fc;
  --color-coral: #ff6c3d;
  --color-people-first: #f2f0e6;
  --color-black: #1c1e21;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-card: 16px;
  --radius-panel: 32px;
}
```

## Agent prompt examples
- "Create a feature section with a `#f2f0e6` background, a 56px Bricolage Grotesque headline with -1.68px letter-spacing, and three white cards with 16px border-radius."
- "Design a primary CTA button using `#ff6c3d` background, white text, 32px border-radius, and DM Sans 16px bold font."
- "Generate a hero section with a full-width `#a2b6fc` background and a centered 80px headline in Bricolage Grotesque weight 700."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Semantic colors (Success/Error) were not present on the analyzed marketing pages.
- Mobile-specific spacing tokens were inferred from layout shifts rather than explicit tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://expr3ss.com | 1440px | 2026-06-06 |
| Pricing | https://expr3ss.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://expr3ss.com | 390px | 2026-06-06 |