---
version: alpha
name: Foundation Labs
description: Electric theme-flipping identity — Suisse Intl with tight negative tracking on huge display copy, a default acid-green canvas with pure-black ink, and per-app complementary color pairs (blue/amber, pink/yellow, magenta/black) where every bg ships its own clashing fg, oversized 32px-rounded media cards on a flat, chromeless layout.

colors:
  # Default theme — acid green canvas, black ink
  background: "#00ff11"        # labs-green, the default html canvas
  foreground: "#000000"        # labs-green-fg, ink on green
  surface: "#ffffff"
  surface-dark: "#1b1b1b"      # dark media tiles, foundation app
  surface-tile: "#242424"      # near-black media tile bg
  surface-mute: "#d9d9d9"      # neutral placeholder tile

  # Ink
  ink: "#000000"
  ink-secondary: "#525252"     # was rgba(0,0,0,.6) text-black/60 — flattened over white
  on-dark: "#ffffff"
  on-dark-secondary: "#9c9c9c" # was rgba(255,255,255,.6) — flattened over #1b1b1b

  # App theme pairs — each app flips bg + a clashing fg
  primary: "#0048ff"           # labs-blue (the boldest brand accent)
  blue-fg: "#ffac1e"           # amber ink on blue
  green: "#00ff11"
  green-fg: "#000000"
  pink: "#ff0088"              # labs-pink
  pink-fg: "#ffdd1e"           # yellow ink on pink
  purple: "#b536ff"
  purple-alt: "#7631ff"
  purple-fg: "#ffdd31"
  aura: "#e44ce7"              # magenta, Aura app
  aura-fg: "#000000"
  dark: "#1b1b1b"
  dark-fg: "#31ff5b"           # acid green ink on dark
  investors: "#2200ff"         # labs-investors blue
  investors-fg: "#00ff37"      # green ink on deep blue
  gray: "#8b8b8b"
  gray-fg: "#91ff31"

  # Accent ink used in app rows
  amber: "#ffc130"
  red: "#ff6568"               # red-400/80 token

rounded:
  none: 0px
  sm: 8px
  md: 12px
  logo: 16px       # rounded-2xl app logos
  card: 32px       # rounded-[32px] media cards — the signature
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 36px
  3xl: 64px

typography:
  display-hero:
    fontFamily: "Suisse Intl, Inter, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -2.16px
  display:
    fontFamily: "Suisse Intl, Inter, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.5px
  heading:
    fontFamily: "Suisse Intl, Inter, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.9px
  card-title:
    fontFamily: "Suisse Intl, Inter, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.48px
  body-large:
    fontFamily: "Suisse Intl, Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: -0.2px
  body:
    fontFamily: "Suisse Intl, Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: -0.16px
  body-medium:
    fontFamily: "Suisse Intl, Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.18px
  mono-label:
    fontFamily: "Suisse Intl Mono, Space Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: -0.14px
  mono-large:
    fontFamily: "Suisse Intl Mono, Space Mono, ui-monospace, monospace"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: -0.2px
  caption:
    fontFamily: "Suisse Intl Mono, Space Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px

components:
  # Media card — the signature 32px-rounded tile
  card:
    backgroundColor: "{colors.surface-tile}"
    rounded: "{rounded.card}"
    padding: 0px
    shadow: "0px 0px 2px rgba(0,0,0,.15), 0px 4px 7px rgba(0,0,0,.07), 0px 12px 40px rgba(0,0,0,.15)"
  card-light:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.card}"
    padding: 0px

  # App logo chip
  logo-chip:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.logo}"
    size: 80px
    shadow: "0px 0px 2px rgba(0,0,0,.15), 0px 4px 7px rgba(0,0,0,.07), 0px 12px 40px rgba(0,0,0,.15)"

  # Inline tag / pill (mono label)
  tag:
    backgroundColor: "{colors.foreground}"
    textColor: "{colors.background}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 8px

  # Primary nav / menu link
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.display}"
    padding: 4px 0px

  # Mono section eyebrow
  eyebrow:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.mono-label}"
    padding: 0px

  # Ghost CTA — fg outline that inverts on hover
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
    borderColor: "{colors.foreground}"
  button-ghost-hover:
    backgroundColor: "{colors.foreground}"
    textColor: "{colors.background}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
    borderColor: "{colors.foreground}"

  # Text input — underline/border in fg, transparent fill
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.foreground}"

  # App theme swatch — Aura
  theme-aura:
    backgroundColor: "{colors.aura}"
    textColor: "{colors.aura-fg}"
    typography: "{typography.card-title}"
  # App theme swatch — Blue
  theme-blue:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.blue-fg}"
    typography: "{typography.card-title}"
  # App theme swatch — Pink
  theme-pink:
    backgroundColor: "{colors.pink}"
    textColor: "{colors.pink-fg}"
    typography: "{typography.card-title}"
---

# Foundation Labs Design System

## Overview

Foundation Labs presents itself less as a website and more as a switchboard of identities. The default canvas is an unapologetic acid green (`{colors.background}`) carrying pure-black ink (`{colors.foreground}`), but the whole page is wired to flip — the `<html>` element swaps a `--bg`/`--fg` pair on demand, so the same layout can re-skin into electric blue with amber type, hot pink with yellow type, or magenta with black type. It is a system built around theme inheritance: nothing hard-codes a color, everything reads `var(--bg)` and `var(--fg)`, and the brand IS the act of recoloring.

The typographic voice is Suisse Intl — a precise Swiss neo-grotesque — set enormous (up to ~72px) with tight negative tracking, paired with Suisse Intl Mono for eyebrows, metadata, and the technical "lab notebook" voice. Display copy is set at weight 400, not bold; the scale alone carries the impact. There is almost no chrome: no shadows on text blocks, no borders on sections, no gradient washes. The page is flat color fields and oversized type, with rhythm coming from whitespace and the abrupt edges of the rounded media tiles.

The one piece of real depth in the system is the card. App previews and logo chips sit on heavily rounded `{rounded.card}` (32px) tiles with a soft three-layer shadow (`shadow-logo` / `shadow-md`), floating on the flat color canvas like product photography. This is the contrast the whole identity runs on: flat, garish, theme-driven color underneath; crisp, rounded, photographic objects on top.

What makes the palette distinctive — and risky — is that every background ships a deliberately clashing foreground. Blue (`{colors.primary}`) pairs with amber (`{colors.blue-fg}`); pink (`{colors.pink}`) pairs with yellow (`{colors.pink-fg}`); the deep investor blue (`{colors.investors}`) pairs with toxic green (`{colors.investors-fg}`). These are not safe, accessible neutral pairings — they are intentional high-voltage combinations that read as creative-tool maximalism, not enterprise restraint.

**Key Characteristics:**
- Theme-flipping architecture — `--bg`/`--fg` swap on `<html>`, every color reads from a variable, nothing is hard-coded
- Default acid-green canvas (`{colors.background}`) with pure-black ink (`{colors.foreground}`)
- Per-app complementary color pairs: blue/amber, pink/yellow, magenta/black, deep-blue/green
- Suisse Intl set huge (up to 72px) at weight 400 with tight negative tracking — scale over weight
- Suisse Intl Mono for eyebrows, metadata, captions — the "lab notebook" voice
- Signature 32px-rounded media cards with a soft three-layer shadow on an otherwise flat layout
- Chromeless body: no section borders, no text shadows, no gradients — flat fields and type
- Ghost CTAs and inputs that invert fg/bg on hover/focus

## Colors

### Default Canvas
- **Labs Green** (`{colors.background}`): The default page canvas — full-saturation acid green.
- **Black** (`{colors.foreground}`): Default ink on the green canvas; also the universal `{colors.ink}`.
- **White** (`{colors.surface}`): Light media tiles and logo chips.
- **Surface Dark** (`{colors.surface-dark}`): Near-black `#1b1b1b` for dark media tiles and the Foundation app theme.
- **Surface Tile** (`{colors.surface-tile}`): `#242424` neutral-dark media-card background.
- **Surface Mute** (`{colors.surface-mute}`): `#d9d9d9` neutral placeholder fill.

### Ink
- **Ink** (`{colors.ink}`): Primary text on light/green canvases.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted body copy (was `rgba(0,0,0,.6)`, flattened over white).
- **On Dark** (`{colors.on-dark}`): Text on dark tiles.
- **On Dark Secondary** (`{colors.on-dark-secondary}`): Muted text on dark tiles.

### App Theme Pairs (bg → fg)
- **Blue** (`{colors.primary}`) → **Amber** (`{colors.blue-fg}`): The boldest brand pairing.
- **Pink** (`{colors.pink}`) → **Yellow** (`{colors.pink-fg}`).
- **Aura Magenta** (`{colors.aura}`) → **Black** (`{colors.aura-fg}`): The Aura app theme.
- **Purple** (`{colors.purple}`) / **Purple Alt** (`{colors.purple-alt}`) → **Gold** (`{colors.purple-fg}`).
- **Dark** (`{colors.dark}`) → **Acid Green** (`{colors.dark-fg}`).
- **Investors Blue** (`{colors.investors}`) → **Green** (`{colors.investors-fg}`).
- **Gray** (`{colors.gray}`) → **Lime** (`{colors.gray-fg}`).

### Accent
- **Amber** (`{colors.amber}`): App-row accent.
- **Red** (`{colors.red}`): Status/error accent.

## Typography

### Font Family
- **Primary**: `Suisse Intl`, with fallbacks `Inter, Arial, sans-serif` — a Swiss neo-grotesque, set huge at weight 400.
- **Monospace**: `Suisse Intl Mono`, with fallbacks `Space Mono, ui-monospace, monospace` — for eyebrows, metadata, captions.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | ~72px hero statement — scale carries impact, weight stays 400 |
| `display` | Large menu links, section statements |
| `heading` | Section headings |
| `card-title` | App / media card titles (weight 500) |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Emphasized labels, ghost buttons (weight 500) |
| `mono-label` | Mono eyebrows, app metadata |
| `mono-large` | Large mono statements |
| `caption` | Mono tags, fine print |

### Principles
- **Scale over weight**: Display copy is weight 400. Impact comes from size (up to 72px), not boldness.
- **Tight tracking**: Negative letter-spacing across display and body — Swiss precision, compressed.
- **Mono as voice**: Suisse Intl Mono marks the technical / "lab notebook" register — eyebrows, dates, metadata.
- **Two weights**: 400 for nearly everything; 500 for card titles and emphasized labels.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Padding is generous (`p-4` → `p-9`, i.e. 16–36px) with large vertical gaps (`pt-16`, 64px) between blocks.

### Grid & Container
- Max content width ~1170px for prose blocks; media grids go wider.
- App showcase: `grid-cols-1 lg:grid-cols-2` — single column on mobile, two-up on desktop.
- Media cards: fixed aspect ratios (`aspect-[8/5]` desktop, `aspect-[360/300]` mobile) so tiles stay photographic.

### Whitespace Philosophy
- **Flat fields, big air**: The canvas is a single flat color; separation comes from whitespace, not borders or shadows.
- **Type as structure**: Oversized display copy and mono eyebrows do the layout work that rules and boxes do elsewhere.
- **Cards float**: The only depth is the rounded media tile with its soft three-layer shadow.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, text blocks, nav |
| Card (Level 1) | `0 0 2px / 0 4px 7px / 0 12px 40px` soft stack | Media tiles, logo chips |

**Shadow Philosophy**: Almost everything is flat. The single elevation move is the `shadow-logo` / `shadow-md` three-layer soft stack on rounded tiles — a tight contact shadow, a mid lift, and a wide ambient blur — making product imagery feel like an object resting on the colored field.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Edges, flat fields |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | Minor containers |
| `logo` | 16px | App logo chips (`rounded-2xl`) |
| `card` | 32px | Media tiles — the signature radius |
| `pill` | 9999px | Tags, ghost buttons |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.card}`, `{components.button-ghost}`).

### Cards
- **`card`** — 32px-rounded dark media tile with the soft three-layer shadow; holds app screenshots edge-to-edge.
- **`card-light`** — White variant of the same tile.
- **`logo-chip`** — 16px-rounded app logo on a white chip with the same shadow.

### Buttons
- **`button-ghost`** — fg-outlined pill on the theme bg; inverts to solid fg fill with bg text on hover.

### Tags & Eyebrows
- **`tag`** — Solid fg pill, bg-colored mono text, full pill radius.
- **`eyebrow`** — Mono uppercase-feeling label in fg over the theme bg.

### Inputs
- **`input`** — Transparent fill, fg border, fg text; border tightens to solid fg on focus.

### Theme Swatches
- **`theme-aura`** / **`theme-blue`** / **`theme-pink`** — The per-app bg→fg color pairs, shown as the clashing complementary combinations the identity is built on.

## Do's and Don'ts

### Do
- Drive every color from `--bg` / `--fg` variables so the page can theme-flip
- Keep display copy at weight 400 and let size carry the impact
- Use Suisse Intl Mono for eyebrows, metadata, and captions
- Use the deliberately clashing complementary pairs (blue/amber, pink/yellow) — they're the brand
- Float rounded 32px media tiles with the soft three-layer shadow on a flat field
- Keep negative letter-spacing across the scale

### Don't
- Don't hard-code a hex where a `--bg`/`--fg` variable belongs
- Don't bold the display copy — scale, not weight, is the move
- Don't add section borders, text shadows, or gradient washes — the body is flat
- Don't "fix" the high-voltage color pairs into safe neutrals — the clash is intentional
- Don't shrink the card radius below 32px — the rounding is signature
- Don't use positive letter-spacing on Suisse Intl

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px (`sm`) | Single column, `p-4`, hero ~36px, cards `aspect-[360/300]` |
| Small | 640–768px (`sm`–`md`) | `p-9` padding, type steps up |
| Tablet | 768–1024px (`md`–`lg`) | Larger display sizes, prose widens |
| Desktop | 1024–1280px (`lg`–`xl`) | 2-column app grid, cards `aspect-[8/5]` |
| Large | >1280px (`xl`) | Hero ~72px, `w-[80%]` story column, max layout |

### Touch Targets
- Menu links use generous vertical padding (`py-1`–`py-2`) and large type for easy tapping.
- Ghost buttons are pill-shaped with 8–16px padding.

### Collapsing Strategy
- App showcase: 2-column → single column on mobile.
- Hero/display type scales down through `text-4xl` → `text-7xl` breakpoint steps while keeping tight tracking.
- Media tiles swap aspect ratio (`8/5` → `360/300`) to stay photographic when narrow.

### Image Behavior
- App screenshots fill rounded tiles edge-to-edge (`object-cover`, `inset-0`).
- Logo chips keep their shadow and radius at all sizes.

---

## Agent Prompt Guide

### Quick Color Reference
- Default background: Labs Green `{colors.background}`
- Default ink: Black `{colors.foreground}`
- Boldest accent pairing: Blue `{colors.primary}` bg + Amber `{colors.blue-fg}` text
- Dark media tile: `{colors.surface-tile}`
- Card radius: `{rounded.card}` (32px)

### Example Component Prompts
- "Build a hero on an acid-green canvas (`{colors.background}`). Headline in Suisse Intl / Inter at 72px weight 400, line-height 1.05, letter-spacing -2.16px, color `{colors.foreground}`. Mono eyebrow above it in Suisse Intl Mono / Space Mono 14px."
- "Create an app showcase card: 32px-rounded dark tile (`{colors.surface-tile}`) holding an edge-to-edge screenshot, with a 16px-rounded white logo chip and a card title at 24px weight 500. Apply the soft three-layer shadow `0 0 2px, 0 4px 7px, 0 12px 40px` at low opacity."
- "Make a ghost button: transparent fill, `{colors.foreground}` 1px border and text, pill radius, 8px 16px padding; on hover invert to solid `{colors.foreground}` fill with `{colors.background}` text."
- "Show a theme swatch row: Blue (`{colors.primary}`/`{colors.blue-fg}`), Pink (`{colors.pink}`/`{colors.pink-fg}`), Aura Magenta (`{colors.aura}`/`{colors.aura-fg}`) — each as a colored block with its clashing complementary text."

### Iteration Guide
1. Everything reads from `--bg`/`--fg` — theme-flipping is the core mechanic, not a hard-coded palette.
2. Display type is weight 400; reach for size and tighter tracking, never bold.
3. The only depth is the 32px rounded media tile with its soft three-layer shadow — keep the rest flat.
4. Embrace the clashing complementary pairs; they are the identity, not an accident.
5. Suisse Intl Mono marks the technical voice — eyebrows, metadata, captions.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Foundation Labs. Brand names and trademarks belong to their respective owners.