Found Design System

Get DESIGN.md Download View template Works with

Found is a loud, high-contrast studio site. The interface is pure black on white, set in Switzer at poster sizes, and a single electric violet (#5B12B7) carries the brand from the hero photo to the submit button. Big imagery runs almost edge to edge, framed by a thin white or black margin, and the page alternates long white stretches with black bands.

Four signatures make it recognisable:

The difference-blended wordmark. The hero's ©Found (200px, weight 500) sits in a mix-blend-mode: difference layer. White over the violet photo renders as acid green, and over the model's grey head it turns pale cyan. The © is part of the word, at full size.
Fun Facts cards. Top-right of the hero: a black Fun Facts tag with a black ★ square beside it, then stacked white cards (6.4px radius) holding 180+ and $4,5m+ with a small grey caption.
Bracketed table labels. The awards list is a real table: a black header row with [ Award ] [ Recognition ] [ Year ] in white, then rows split by 1px black rules.
The text rotator. A viewport-wide strip of Let's Talk at 20vw (288px at 1440), repeated and scrolling sideways. On hover the whole strip inverts.

Found is light-first with full black bands. It is not a dark-mode design.

Colors

Surfaces

canvas#FFFFFF

Page background (--second-color: white), footer

surface-1#F3F3F3

Form inputs

surface-2#000000 · 7%

Small tags like Who we are and its ★ square

field#F3F3F3

Form inputs

inverse-canvas#000000

Black bands: the work section, the dark statement section, table header, fact tags

Ink

on-primary#FFFFFF

Text on primary

on-secondary#000000

Text on secondary

ink#000000

Headlines, nav, table rows, links (--first-color: black)

ink-muted#000000

Body text

ink-subtle#000000 · 50%

Plain paragraphs (p { opacity: .5 }), the lead under the statement

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-muted#FFFFFF · 70%

Uppercase eyebrows on black (.second-title)

on-media#FFFFFF

Action

primary#5B12B7

Violet: the round CTA button, Submit Project, the hero photo backdrop (--violet)

primary-hover#5B12B7

secondary#FFFFFF

The View Showreel pill on photos

accent#5B96FE

The blue circle that fills the showreel pill on hover (.btn-bg)

Lines & effects

line#000000

Table rules, subscribe field border, secondary dividers

line-soft#000000 · 15%

With line: Table rules, subscribe field border, secondary dividers

line-strong#000000 · 50%

With line: Table rules, subscribe field border, secondary dividers

placeholder#000000 · 55%

inverse-surface#222222

Two small dark blocks (with #171717 once)

glass#FFFFFF · 20%

Light glass layers over imagery (3 uses)

glass-dark#000000 · 60%

Project label boxes on photos (Studio Focus)

nav-glass#FFFFFF · 90%

The fixed nav bar

Typography

Switzer · display-rotator

The quick brown fox jumps

Let's Talk text strip (.text-rotator, CSS 20vw). 288px · 500 · 0.9 · -1px

Switzer · headline-xl

The quick brown fox jumps

Right-aligned service names (.service-title-main). 99px · 600 · 1.0 · -0.5px

Switzer · title-lg

The quick brown fox jumps

Project names on photo labels. 27px · 500 · 1.1 · -0.5px

Switzer · link-lg

The quick brown fox jumps

Underlined text links (.button-line). 20px · 500 · 1.0 · -0.5px

Switzer · body-lg

The quick brown fox jumps

Paragraphs (p), usually at 50%. 18px · 500 · 1.5 · -0.5px

Switzer · eyebrow

The quick brown fox jumps

.second-title on black, white at 70%. 18px · 400 · 1.5 · -0.5px

Spacing & shape

Purpose	Value
Container	1240px max (.container), centred
Section rhythm	.section is 300px top and bottom with 5% side padding (72px at 1440), 150px at ≤991
Breakpoints	991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules

Spacing scale

Token	Value	Preview
`hair`	3px
`xs`	10px
`sm`	16px
`md`	20px
`lg`	30px
`xl`	40px
`2xl`	50px

Layout spacing

Token	Value	Preview
`frame`	10px
`nav-height`	64px
`section-x`	72px
`logo-gap`	74px
`strip`	95px

Border radius

hair2px

field6px

card6.4px

lg50px

pill100px

pill-xl800px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Motion

Headline reveal	Lines move y 110% or 130% → 0% inside a mask, 500ms; some also skew y 6deg → 0deg over 800ms ease
Fade	Opacity 0 → 1, 500ms (scroll into view) or 300ms ease (hover)
Underline grow	Width, 500ms (300ms ease on hover out)
Icon spin	Rotate, 500ms; 600ms outExpo on the round CTA
Menu open	Panel height and links, 600ms inOutQuint; burger lines 200ms inOutQuint
Menu link	Opacity 0.35 → 1, 300ms (CSS)
Text colour swap	400ms ease
Small slides	y → 0%, 400ms outCubic
Scroll scenes	Scroll-linked scenes: sticky work frames and the text rotator

Do’s and don’ts

Keep the UI to #000000 and #FFFFFF, with #5B12B7 violet for the main action only.
Set every text style in Switzer with −0.5px tracking.
Put white text on photos and use black at 60% (glass-dark) for label boxes over images.
Use 6.4px corners for cards and tags, and full pills for buttons and the subscribe field.
Give sections the full 300px top and bottom padding with 5% sides.
Mark table and meta labels with brackets: [ Year ].
Add shadows. Depth is bands, blur and overlays.
Use Inter or Geist; they load or are declared but never render.
Introduce green. The hero green is mix-blend-mode: difference on white text.
Put ink-subtle (black at 50%) on text under 18px. It is only 4.0:1 on white.
Round images. Frame them with 10px padding instead.
Animate longer than 800ms or use bounce easing.

Example prompt

Any page in the Found style

Prompt

Build your page in the Found style. White #FFFFFF background, black #000000 text, Switzer with −0.5px letter spacing everywhere. Section padding 300px top and bottom, 5% sides, 1240px container. Section titles are 54px weight 600, line height 1.2, centred. Paragraphs are 18px weight 500 at 50% opacity; list text is 18px weight 400 in full black. Cards and tags have a 6.4px radius and no shadow. The main button is a violet #5B12B7 pill with white text; the showreel button is a white 44px pill with black 15px weight 600 text. Alternate white sections with full black bands. Use a black header row with [ Bracket ] labels for tables and 1px black rules between rows. Images are square-cornered, framed by 10px padding. Reveal headlines by sliding lines up 110% → 0% over 500ms.

# Found Design System

> Measured from the Found template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Found is a loud, high-contrast studio site. The
interface is pure black on white, set in Switzer at
poster sizes, and a single electric violet (#5B12B7)
carries the brand from the hero photo to the submit
button. Big imagery runs almost edge to edge, framed by

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background (--seco… |
| surface-1    | #F3F3F3     | Form inputs              |
| surface-2    | #000000 7%  | Small tags like Who we … |
| field        | #F3F3F3     | Form inputs              |
| inverse-can… | #000000     | Black bands: the work s… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #000000     | Text on secondary        |
| ink          | #000000     | Headlines, nav, table r… |
| ink-muted    | #000000     | Body text                |
| ink-subtle   | #000000 50% | Plain paragraphs (p { o… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| inverse-ink… | #FFFFFF 70% | Uppercase eyebrows on b… |
| on-media     | #FFFFFF     |                          |
| primary      | #5B12B7     | Violet: the round CTA b… |

## Typography

- display-rotator: Switzer 288px / 500
- display-hero: Switzer 200px / 500
- headline-xl: Switzer 99px / 600
- headline-lg: Switzer 54px / 600

{
  "$description": "Found design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#5B12B7",
      "$description": "Violet: the round CTA button, Submit Project, the hero photo backdrop (--violet)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#5B12B7"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The View Showreel pill on photos"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#5B96FE",
      "$description": "The blue circle that fills the showreel pill on hover (.btn-bg)"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background (--second-color: white), footer"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F3F3F3",
      "$description": "Form inputs"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#00000012",
      "$description": "Small tags like Who we are and its ★ square"

/* Found theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-lg, p-lg */

@theme {
  /* Colors */
  --color-primary: #5B12B7;
  --color-primary-hover: #5B12B7;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #000000;
  --color-accent: #5B96FE;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F3F3F3;
  --color-surface-2: #00000012;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-subtle: #00000080;
  --color-line: #000000;
  --color-line-soft: #00000026;
  --color-line-strong: #00000080;
  --color-field: #F3F3F3;
  --color-placeholder: #0000008C;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFFB3;
  --color-inverse-surface: #222222;
  --color-on-media: #FFFFFF;
  --color-glass: #FFFFFF33;
  --color-glass-dark: #00000099;
  --color-nav-glass: #FFFFFFE6;

  /* Fonts */
  --font-sans: "Switzer", "Inter", sans-serif;
  --font-switzer: "Switzer", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-rotator: 288px;
  --text-display-rotator--line-height: 0.9;
  --text-display-rotator--letter-spacing: -1px;
  --text-display-rotator--font-weight: 500;
  --text-display-hero: 200px;
  --text-display-hero--line-height: 0.8;
  --text-display-hero--letter-spacing: -7px;
  --text-display-hero--font-weight: 500;
  --text-headline-xl: 99px;

/* Found design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #5B12B7; /* Violet: the round CTA button, Submit Project, the hero photo backdrop (--violet) */
  --color-primary-hover: #5B12B7;
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFFFFF; /* The View Showreel pill on photos */
  --color-on-secondary: #000000; /* Text on secondary */
  --color-accent: #5B96FE; /* The blue circle that fills the showreel pill on hover (.btn-bg) */
  --color-canvas: #FFFFFF; /* Page background (--second-color: white), footer */
  --color-surface-1: #F3F3F3; /* Form inputs */
  --color-surface-2: #00000012; /* Small tags like Who we are and its ★ square */
  --color-ink: #000000; /* Headlines, nav, table rows, links (--first-color: black) */
  --color-ink-muted: #000000; /* Body text */
  --color-ink-subtle: #00000080; /* Plain paragraphs (p { opacity: .5 }), the lead under the statement */
  --color-line: #000000; /* Table rules, subscribe field border, secondary dividers */
  --color-line-soft: #00000026; /* With line: Table rules, subscribe field border, secondary dividers */
  --color-line-strong: #00000080; /* With line: Table rules, subscribe field border, secondary dividers */
  --color-field: #F3F3F3; /* Form inputs */
  --color-placeholder: #0000008C;
  --color-inverse-canvas: #000000; /* Black bands: the work section, the dark statement section, table header, fact tags */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #FFFFFFB3; /* Uppercase eyebrows on black (.second-title) */
  --color-inverse-surface: #222222; /* Two small dark blocks (with #171717 once) */
  --color-on-media: #FFFFFF;
  --color-glass: #FFFFFF33; /* Light glass layers over imagery (3 uses) */
  --color-glass-dark: #00000099; /* Project label boxes on photos (Studio Focus) */
  --color-nav-glass: #FFFFFFE6; /* The fixed nav bar */

  /* Fonts */
  --font-switzer: "Switzer", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-rotator: 288px;
  --text-display-rotator-font: var(--font-switzer);
  --text-display-rotator-weight: 500;
  --text-display-rotator-line-height: 0.9;
  --text-display-rotator-tracking: -1px;
  --text-display-hero: 200px;
  --text-display-hero-font: var(--font-switzer);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 0.8;
  --text-display-hero-tracking: -7px;
  --text-headline-xl: 99px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Switzer · display-rotator

Switzer · headline-xl

Switzer · title-lg

Switzer · link-lg

Switzer · body-lg

Switzer · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Found style

More design systems like this

Agencē X

Agencix

Agencō

Atra

Bring any of them to your AI tool