---
version: alpha
name: Fanout
description: "Light monochrome interface measured from fanout.sh: Overused Grotesk type, tonal surfaces and 12px corners."
colors:
  background: "#F7F7F8"
  surface: "#F7F7F8"
  on-surface: "#272727"
  on-background: "#272727"
  on-surface-variant: "#5F563F"
  on-surface-muted: "#6E6E6E"
  surface-container-low: "#EEF8FE"
  surface-container: "#F4F4F5"
  surface-container-high: "#FFFFFF"
  surface-container-highest: "#FFFFFFF5"
  overlay: "#FBFBFB1F"
  overlay-strong: "#DBA29280"
  outline: "#E8E8EA"
  outline-variant: "#C9C9CF"
  primary: "#DEDEE2"
  on-primary: "#272727"
  inverse-surface: "#1D1D1D"
  secondary: "#0F9D58"
  error: "#DC2626"
typography:
  headline-display:
    fontFamily: Overused Grotesk
    fontSize: 88px
    fontWeight: 400
    lineHeight: 0.99
    letterSpacing: -0.052em
  headline-lg:
    fontFamily: Overused Grotesk
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: Overused Grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: Overused Grotesk
    fontSize: 15px
    fontWeight: 450
    lineHeight: 1.82
  body-sm:
    fontFamily: Overused Grotesk
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.55
  caption:
    fontFamily: Overused Grotesk
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.43
  label-lg:
    fontFamily: Overused Grotesk
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.01em
  label-md:
    fontFamily: Overused Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.29
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Overused Grotesk
    fontSize: 13px
    fontWeight: 650
    lineHeight: 1.5
  code:
    fontFamily: IBM Plex Mono
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Overused Grotesk
    fontSize: 49px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.045em
  headline-lg-mobile:
    fontFamily: Overused Grotesk
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 7px
  md: 12px
  full: 9999px
spacing:
  xs: 3.5px
  sm: 7px
  md: 10.5px
  lg: 24px
  xl: 56px
  gutter: 8.75px
  section: 56px
  margin: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 1px
    height: 36px
  button-secondary:
    textColor: "{colors.surface-container-high}"
    typography: "{typography.label-lg}"
    rounded: 9px
    padding: 0px 14px
    height: 48px
  button-outline:
    backgroundColor: "{colors.surface-container-high}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 0px 10px
    height: 32px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 0px 7px
  input-field:
    textColor: "{colors.on-surface}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 3.5px 8.75px
  card:
    backgroundColor: "{colors.surface-container-high}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 3.5px 5.25px 3.5px 12.25px
  link:
    textColor: "{colors.on-surface}"
---

# Fanout Design System

## Overview

Fanout describes itself as: “Mapped learning across AI research, systems, ML math, inference, and open robotics, with practical labs, daily papers, and roadmaps.” The interface is light, built on **Snow (#F7F7F8)** with **Graphite (#272727)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Overused Grotesk**, with **IBM Plex Mono** for code. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Corners are mostly 12px.

Measured from [fanout.sh](https://fanout.sh/) on November 3, 2026 at 1440×900 and 390×844 from 397 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 17 roles, plus gradient stops #E4402C, #E8822A, #E9B949, #2AB673.

- **Snow (#F7F7F8):** Page background, seen 6 times. Token `background`.
- **Graphite (#272727):** Primary text and headings, seen 80 times. Token `on-surface`, CSS `--popover-foreground`.
- **Dark Amber (#5F563F):** Secondary text, seen 2 times. Token `on-surface-variant`.
- **Slate (#6E6E6E):** Muted text and metadata, seen 17 times. Token `on-surface-muted`, CSS `--ga-fg2`.
- **Cool Snow (#EEF8FE):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Snow (#F4F4F5):** Cards and panels, seen 1 time. Token `surface-container`, CSS `--muted`.
- **White (#FFFFFF):** Hover and pressed fills, seen 26 times. Token `surface-container-high`, CSS `--sidebar-primary-foreground`.
- **White 96% (#FFFFFFF5):** Highest raised elements, seen 1 time. Token `surface-container-highest`.
- **Snow 12% (#FBFBFB1F):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Light Red 50% (#DBA29280):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Mist (#E8E8EA):** Borders and dividers, seen 10 times. Token `outline`, CSS `--border`.
- **Cool Silver (#C9C9CF):** Secondary dividers, seen 3 times. Token `outline-variant`.
- **Silver (#DEDEE2):** Primary buttons and calls to action, seen 2 times. Token `primary`.
- **Graphite (#272727):** Text and icons on primary. Token `on-primary`.
- **Charcoal (#1D1D1D):** High-contrast fills, seen 1 time. Token `inverse-surface`.
- **Dark Teal (#0F9D58):** Accent, seen 8 times. Token `secondary`, CSS `--success`.
- **Red (#DC2626):** Errors and destructive states, seen 2 times. Token `error`.

## Typography

**Overused Grotesk** and **IBM Plex Mono** (monospace) share the interface. Fallback stack: `Overused Grotesk, -apple-system, BlinkMacSystemFont, Segoe UI`. Other loaded fonts: Phosphor, Phosphor-Fill, Phosphor-Bold, Departure Mono.

- **headline-display:** Overused Grotesk 88px at weight 400, line height 0.99, tracking -0.052em (49px on mobile). Page title (h1).
- **headline-lg:** Overused Grotesk 22px at weight 600, line height 1.2 (16px on mobile). Section headings (h2).
- **body-md:** Overused Grotesk 14px at weight 400, line height 1.5. Body text.
- **body-lg:** Overused Grotesk 15px at weight 450, line height 1.82. Lead paragraphs.
- **body-sm:** Overused Grotesk 13px at weight 400, line height 1.55. Secondary and small text.
- **caption:** Overused Grotesk 12px at weight 400, line height 1.43. Captions and fine print.
- **label-lg:** Overused Grotesk 15px at weight 500, line height 1.2, tracking 0.01em. Large buttons and tabs.
- **label-md:** Overused Grotesk 14px at weight 500, line height 1.29, tracking 0.01em. Buttons, navigation and labels.
- **label-sm:** Overused Grotesk 13px at weight 650, line height 1.5. Small labels and badges.
- **code:** IBM Plex Mono 10px at weight 400, line height 1.5, uppercase. Code and technical values.

## Layout

Spacing does not follow a strict grid: 20% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 3.5px, sm 7px, md 10.5px, lg 24px, xl 56px.
- **Sections:** 56px vertical padding between major sections.
- **Gaps:** 8.75px is the most common gap in flex and grid layouts.
- **Page margin:** 24px on each side of full-width sections.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(59, 59, 59, 0.09) 0px 1px 2px 0px, rgba(59, 59, 59, 0.05) 0px 2px 4px 0px, rgba(59, 59, 59, 0.01) 0px 0px 0px 1px`
- `rgba(59, 59, 59, 0.01) 0px 7px 3px 0px, rgba(59, 59, 59, 0.05) 0px 4px 2px 0px, rgba(59, 59, 59, 0.09) 0px 2px 2px 0px, rgba(59, 59, 59, 0.1) 0px 0px 1px 0px, rgba(255, 255, 255, 0.48) 0px 1px 1px 0px inset, rgb(35, 35, 35) 0px -3px 0px 0px inset`
- `rgba(59, 59, 59, 0.09) 0px 2px 2px 0px, rgba(59, 59, 59, 0.1) 0px 0px 1px 0px, rgb(211, 211, 211) 0px -3px 0px 0px inset`

## Shapes

Most elements use 12px corners. Measured radii, most used first:

- **md (12px):** 292 elements.
- **sm (7px):** 52 elements.
- **full (9999px):** 32 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“New in November”):** #DEDEE2 fill, #272727 text, 14px/400, 999px radius, padding 1px.
- **button-secondary (“Start learning free”):** transparent fill, #FFFFFF text, 15px/500, 9px radius, padding 0px 14px, border 1px solid #515151, shadow `rgba(59, 59, 59, 0.01) 0px 7px 3px 0px, rgba(59, 59, 59, 0.05) 0px 4px 2px 0px, rgba(59, 59, 59, 0.09) 0px 2px 2px 0px, rgba(59, 59, 59, 0.1) 0px 0px 1px 0px, rgba(255, 255, 255, 0.48) 0px 1px 1px 0px inset, rgb(35, 35, 35) 0px -3px 0px 0px inset`.
- **button-outline (“Sign in”):** #FFFFFF fill, #272727 text, 14px/500, 7px radius, padding 0px 10px, border 1px solid #C9C9CF, shadow `rgba(59, 59, 59, 0.09) 0px 2px 2px 0px, rgba(59, 59, 59, 0.1) 0px 0px 1px 0px, rgb(211, 211, 211) 0px -3px 0px 0px inset`.
- **button-ghost (“Learning”):** transparent fill, #272727 text, 14px/500, 7px radius, padding 0px 7px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`.
- **input-field (“Email address”):** transparent fill, #272727 text, 12.25px/400, 12px radius, padding 3.5px 8.75px, border 1px solid #DEDEE2.
- **card:** #FFFFFF fill, #272727 text, 14px/400, 999px radius, padding 3.5px 5.25px 3.5px 12.25px, border 1px solid #E8E8EA, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(59, 59, 59, 0.09) 0px 1px 2px 0px, rgba(59, 59, 59, 0.05) 0px 2px 4px 0px, rgba(59, 59, 59, 0.01) 0px 0px 0px 1px`.
- **link:** transparent fill, #272727 text, padding 0px.

## Do's and Don'ts

- Do use #F7F7F8 for the page and lift surfaces in small steps: #EEF8FE, #F4F4F5, #FFFFFF, #FFFFFFF5.
- Do keep text in 3 levels: #272727, #5F563F, #6E6E6E.
- Do let contrast carry emphasis; primary actions use #DEDEE2 on #F7F7F8.
- Do set headlines in Overused Grotesk with tight tracking (-0.052em).
- Do reuse the measured spacing steps (7px, 10.5px, 24px).
- Do use 12px corners on most elements; larger surfaces also use 7px.
- Don't introduce new font families beyond Overused Grotesk and IBM Plex Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.42s.

## Motion

Interface transitions are quick: 0.2s, 0.12s, 0.15s, 0.42s.

- **Easing:** `cubic-bezier(0.2, 0.8, 0.2, 1)`, `cubic-bezier(0.4, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/fanout.sh/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).