Claude Code
Cursor
Codex
GitHub Copilot
Palmo
DESIGN.md · measured November 3, 2026
Fanout design system
Light interface · Overused Grotesk · 12px corners
- #F7F7F8
- #EEF8FE
- #272727
- #DEDEE2
From fanout.sh ↗ · 397 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Fanout
Fanout color palette
17 colors with hex codes, grouped by where each one is used on the page.
Surfaces
Snow
#F7F7F8backgroundPage background · 6×Cool Snow
#EEF8FEsurface-container-lowRaised areas one step from the page · 1×Snow
#F4F4F5surface-container · --mutedCards and panels · 1×White
#FFFFFFsurface-container-high · --sidebar-primary-foregroundHover and pressed fills · 26×White 96%
#FFFFFFF5surface-container-highestHighest raised elements · 1×Snow 12%
#FBFBFB1FoverlayTranslucent fill for cards and controls · 1×Light Red 50%
#DBA29280overlay-strongStronger translucent fill · 1×Charcoal
#1D1D1Dinverse-surfaceHigh-contrast fills · 1×Text
Graphite
#272727on-surface · --popover-foregroundPrimary text and headings · 80×Dark Amber
#5F563Fon-surface-variantSecondary text · 2×Slate
#6E6E6Eon-surface-muted · --ga-fg2Muted text and metadata · 17×Graphite
#272727on-primaryText and icons on primaryAccents
Silver
#DEDEE2primaryPrimary buttons and calls to action · 2×Dark Teal
#0F9D58secondary · --successAccent · 8×Borders
Mist
#E8E8EAoutline · --borderBorders and dividers · 10×Cool Silver
#C9C9CFoutline-variantSecondary dividers · 3×Status
Red
#DC2626errorErrors and destructive states · 2×Gradients
Fanout fonts and type scale
2 families.
AaOverused GroteskWeights 400, 450, 500, 600, 650Overused Grotesk, -apple-system, BlinkMacSystemFont, Segoe UI
AaIBM Plex MonoMonospace · Weights 400IBM Plex Mono, ui-monospace, SF Mono, Menlo
headline-displayPage title (h1)Fanout88px · 400 · 0.99 · -0.052em
mobile 49px
mobile 49px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog22px · 600 · 1.2
mobile 16px
mobile 16px
body-mdBody textThe quick brown fox jumps over the lazy dog14px · 400 · 1.5
body-lgLead paragraphsThe quick brown fox jumps over the lazy dog15px · 450 · 1.82
body-smSecondary and small textThe quick brown fox jumps over the lazy dog13px · 400 · 1.55
captionCaptions and fine printThe quick brown fox jumps over the lazy dog12px · 400 · 1.43
label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog15px · 500 · 1.2 · 0.01em
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 500 · 1.29 · 0.01em
label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog13px · 650 · 1.5
codeCode and technical valuesconst ready = true;10px · 400 · 1.5
Contrast
Text on #F7F7F8
AaAAA
13.9:1AaAA
6.7:1AaAA
4.7:1Spacing
No strict grid · 20% are multiples of 4px
xs3.5pxsm7pxmd10.5pxlg24pxxl56pxgutter8.75pxsection56pxmargin24pxShapes
Corner radii, most used first.
md12px · 292×
sm7px · 52×
full9999px · 32×
Depth
Shadow
Shadow
Shadow
Shadow
Fanout UI components
Rebuilt from the measured CSS.
New in November
Start learning free
Sign in
Learning
Email address
Card
Inline link
Motion
Interface transitions
0.2s0.12s0.15s0.42scubic-bezier(0.2, 0.8, 0.2, 1)cubic-bezier(0.4, 0, 0.2, 1)
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #F7F7F8 for the page and lift surfaces in small steps: #EEF8FE, #F4F4F5, #FFFFFF, #FFFFFFF5.
- Keep text in 3 levels: #272727, #5F563F, #6E6E6E.
- Let contrast carry emphasis; primary actions use #DEDEE2 on #F7F7F8.
- Set headlines in Overused Grotesk with tight tracking (-0.052em).
- Reuse the measured spacing steps (7px, 10.5px, 24px).
- Use 12px corners on most elements; larger surfaces also use 7px.
- Introduce new font families beyond Overused Grotesk and IBM Plex Mono.
- Add saturated accent colors; the measured palette is almost entirely neutral.
- Make interface transitions slower than 0.42s.
Fanout DESIGN.md248 lines
---
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).
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need a page behind a login?
The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.
More designs
Brand examples →
Another site? Make a DESIGN.md from any link.
FAQ
Fanout design system questions
What font does Fanout use?
Fanout’s website uses Overused Grotesk (weights 400, 450, 500 and 600), with IBM Plex Mono for code. Page titles are 88px at weight 400 (49px on phones) and body text is 14px. Measured on November 3, 2026.
What are the Fanout colors and hex codes?
On fanout.sh: #F7F7F8 (snow) for the background, #272727 (graphite) for text and #DEDEE2 (silver) as the main accent, with #0F9D58 (dark teal) as another accent. The color palette above lists all 17 colors with their hex codes and where each one is used.
What is the Fanout design system?
The design system on this page is fanout.sh’s, as measured on November 3, 2026: Overused Grotesk type, #DEDEE2 as the main color and 12px corners, written down as a DESIGN.md. It is not Fanout’s own documentation.
What is the Fanout DESIGN.md?
A plain-text file with Fanout’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this Fanout’s official design system?
No. Sitepeel measured it from fanout.sh’s public page on November 3, 2026. It is an independent analysis, not made or approved by Fanout.
Can I use Fanout’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Fanout’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.