Brand guidelines.

Brand

Overview

The settings at a glance.

• Background #08080a
• Ink #f4f4f2
• Accent lime #d6ff3f
• Display Inter Tight 600
• Labels Roboto Condensed 700, uppercase
• Container 82rem
• Measure 60ch
• Standard WCAG 2.2 AA

Identity

The mark

P, X and D, stacked: Pure Experience Design. Each initial is Inter Tight SemiBold turned into outlines and drawn as a hairline, never filled. In the header it sits in a pill of page color at 80% opacity; on hover or focus the pill opens and the words appear beside their initials.

• Clear space: at least the pill’s own padding on every side; nothing touches the pill.
• Minimum size: 12px per letter row (the header size); below that the hairlines break up.
• Color: ink on the dark page. Never lime, never filled, never on a photo without the pill behind it.
• Don’t stretch, rotate, thicken the outline, set the initials side by side or redraw them in another face.

Color

Color

Eight core colors. Contrast below is on white and on the page background, worked out when the page is built.

• #08080a Background --c-bg · the page On white 20.01:1 AAA #08080a
• #101014 Raised --c-bg-raised · cards, frames, wells On white 18.98:1 AAA With background 1.05:1 Fail #101014
• #f4f4f2 Ink --c-ink · headings, leads, active states On white 1.1:1 Fail With background 18.17:1 AAA #f4f4f2
• #a3a3ab Ink body --c-ink-body · running paragraphs On white 2.5:1 Fail With background 7.99:1 AAA #a3a3ab
• #8a8a92 Ink muted --c-ink-muted · captions, meta On white 3.43:1 Large only With background 5.84:1 AA #8a8a92
• #808088 Ink faint --c-ink-faint · footer, quiet labels (4.5:1+ on every surface) On white 3.92:1 Large only With background 5.11:1 AA #808088
• #d6ff3f Accent --c-accent · eyebrows, focus, the one thing that matters On white 1.15:1 Fail With background 17.38:1 AAA #d6ff3f
• rgba(244,244,242,.12) Line --c-line · hairline rules and borders rgba(244,244,242,.12)

Sector colors · the rotating headline only

One color per audience in the home headline, each checked against the darkest and lightest pixel behind it. They never appear as UI colors elsewhere.

• #7fe8cb Healthcare --c-sector-1 On white 1.47:1 Fail With background 13.63:1 AAA #7fe8cb
• #9fe4ff Finance --c-sector-2 On white 1.4:1 Fail With background 14.31:1 AAA #9fe4ff
• #b6d3ff Education --c-sector-3 On white 1.53:1 Fail With background 13.1:1 AAA #b6d3ff
• #ffc27a Government --c-sector-4 On white 1.58:1 Fail With background 12.63:1 AAA #ffc27a
• #ffb6c9 Ecommerce --c-sector-5 On white 1.64:1 Fail With background 12.18:1 AAA #ffb6c9
• #d9b8ff The arts --c-sector-6 On white 1.71:1 Fail With background 11.67:1 AAA #d9b8ff
• #ffe08a Mom and pop --c-sector-7 On white 1.29:1 Fail With background 15.51:1 AAA #ffe08a
• #ff9f7e Entrepreneurs --c-sector-8 On white 2:1 Fail With background 10.02:1 AAA #ff9f7e
• #c8f29c Research --c-sector-10 On white 1.26:1 Fail With background 15.85:1 AAA #c8f29c
• #86e0f2 Life sciences --c-sector-11 On white 1.5:1 Fail With background 13.3:1 AAA #86e0f2
• #c9c3ff Higher ed --c-sector-12 On white 1.65:1 Fail With background 12.13:1 AAA #c9c3ff
• #ffcfa3 Nonprofits --c-sector-13 On white 1.43:1 Fail With background 14.01:1 AAA #ffcfa3
• #d6ff3f Everyone --c-sector-9 · the accent, saved for the payoff On white 1.15:1 Fail With background 17.38:1 AAA #d6ff3f

Typography

Typefaces

Two families, three roles. Inter Tight does almost everything; Roboto Condensed is for labels only.

Typography

Type scale

Fluid sizes: each role scales with the screen between a phone and a wide desktop. Shown at 1440px wide; long lines are cut to fit.

• Product design

  Inter Tight 600 115.2px · line 1 · tracking -0.02em #f4f4f2 Display · the home headline (--t-display, 24 → 122px; 115px on desktop)

• Made with care.

  Inter Tight 600 104px · line 1.02 · tracking -0.02em #f4f4f2 Title · page and case-study titles (--t-title, 44 → 104px)

• Public means everyone.

  Inter Tight 600 70px · line 1.08 · tracking -0.02em #f4f4f2 Section heading, h2 (--t-h2, 40 → 70px)

• Design with, not for

  Inter Tight 500 40px · line 1.1 · tracking -0.02em #f4f4f2 Subhead, h3 (--t-h3, 28 → 40px)

• Discovery, design, development, QA and launch for digital products.

  Inter Tight 400 24px · line 1.4 · tracking -0.01em #f4f4f2 Lead (--t-lead, 18 → 24px), 60ch

• Every project starts with the people who will use it and the people who have to run it.

  Inter Tight 400 18px · line 1.55 · tracking -0.005em #a3a3ab Body (--t-para, 18px), 60ch, ink body

• Working together

  Roboto Condensed 700 13px · line 1 · tracking 0.14em · uppercase #d6ff3f Eyebrow (--t-label, 13px), accent or muted

Rules

• Display and titles balance their lines (text-wrap: balance); one idea per heading; display headings end with a period.
• Body copy stays under 60 characters a line.
• Tracking is negative at large sizes and relaxes as size drops; labels are the only text with positive tracking.

Writing

Voice and copy

Confident, plain and specific. Say what was done and what it changed.

Layout

Layout and spacing

One container, one gutter, an 8px-based space scale and generous section padding. Layouts are designed from 320 pixels wide up and tested at 390 and 1440, then on 1728 and 2304 screens.

Frame

Interface

Components

A small set, used everywhere. Drawn here with the site’s own styles.

Rules

• Lists and grids have no rule above the first item or below the last.
• No browser-default menus or selects: every control is custom, with full keyboard access.
• Links and buttons show the lime arrow cursor; components write cursor: var(--cur-link), never pointer.
• Hover changes color first; movement is small (6px at most) and never the only signal.
• Cards are raised one step (#101014) with a hairline, radius 14px; nothing casts a shadow.

Media

Imagery and film

The client work is the imagery. Films and backgrounds sit behind the words, never in front of them.

• Real work first: screens, prototypes and artifacts from the project, shown as they shipped.
• Films are silent, fade up from the dark page and either loop or end on a still; text over them is checked against the brightest frame.
• Vignettes are soft and uneven where the footage needs it, never an oval and never a hard edge.
• Generated imagery (Figma AI, Google Gemini) fills gaps photography can’t: synthetic faces are never real people, and generated footage is graded to sit with the real work.
• Client marks appear as the client draws them; the site’s accent never recolors a client logo.
• Every film and background is documented frame by frame in the storyboards.

Inclusive by default

Accessibility

Part of the brand, not a check at the end.

Code

Tokens

Color, type and space from packages/tokens/tokens.css, printed from the file itself. Plain CSS custom properties: they drop into any stack. Motion tokens are in the motion guidelines.

:root {
  /* ---- Color -------------------------------------------------------- */
  --c-bg:          #08080a;
  --c-bg-raised:   #101014;
  --c-ink:         #f4f4f2;
  --c-ink-muted:   #8a8a92;
  --c-ink-body:    #a3a3ab;   /* running paragraphs: lighter than muted, so long text reads easily */
  --c-ink-faint:   #808088;   /* 4.5:1+ on bg, raised and card */
  --c-accent:      #d6ff3f;
  --c-line:        rgba(244, 244, 242, 0.12);

  /* Sector colors for the rotating headline. All checked against the worst
     background pixel in the hero, not eyeballed. The brand lime is saved for
     "everyone" so the payoff gets the strongest color on the page. */
  --c-sector-1:    #7fe8cb;   /* healthcare */
  --c-sector-2:    #9fe4ff;   /* finance    */
  --c-sector-3:    #b6d3ff;   /* education  */
  --c-sector-4:    #ffc27a;   /* government */
  --c-sector-5:    #ffb6c9;   /* ecommerce  */
  --c-sector-6:    #d9b8ff;   /* the arts   */
  --c-sector-7:    #ffe08a;   /* mom & pop  */
  --c-sector-8:    #ff9f7e;   /* entrepreneurs */
  --c-sector-9:    var(--c-accent);  /* everyone */
  --c-sector-10:   #c8f29c;   /* research */
  --c-sector-11:   #86e0f2;   /* life sciences */
  --c-sector-12:   #c9c3ff;   /* higher ed */
  --c-sector-13:   #ffcfa3;   /* nonprofits */

  /* ---- Type families ------------------------------------------------ */
  --f-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --f-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --f-label:   'Roboto Condensed', 'Arial Narrow', sans-serif;

  /* ---- Type scale ----------------------------------------------------
     Display sizes are fluid. Line-height 1.0 and negative tracking at the
     top end are what give large type the density fantasy.co has;
     both relax as size drops, because tight tracking hurts small text. */
  --t-display:     clamp(1.5rem, -0.151rem + 9.663vw, 7.6rem);  /* 24 -> 122px, sized so "for entrepreneurs" — the longest phrase in the rotator — always fits one line */
  --t-title:    clamp(2.75rem, 1.1rem + 6.6vw, 6.5rem);    /* 44 -> 104px, case-study page titles */
  --t-h2:       clamp(2.5rem,  1.4rem + 4.8vw, 4.375rem); /* 40 -> 70px */
  --t-h3:       clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);   /* 28 -> 40px */
  --t-lead:     clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --t-body:     1.0625rem;
  --t-para:     1.125rem;    /* running paragraphs, 18px */
  --t-label:    0.8125rem;

  --fw-display: 600;
  --lh-display: 0.94;
  --lh-title:   1.02;   /* case-study titles: two-line, so they need air the one-line hero headline doesn't */
  --lh-h3:      1.1;
  --lh-body:    1.55;

  --ls-display: -0.02em;    /* display headings (Nov 10 2026: was -0.022em) */
  --ls-h3:      -0.02em;
  --ls-body:    -0.005em;
  --ls-label:   0.14em;

  /* ---- Space ---------------------------------------------------------- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4.5rem; --s-7: 7rem;    --s-8: 10rem;

  --measure: 60ch;          /* readable line length for body copy   */
  --container: 82rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
}