High-contrast monochromatic palette with minimal, sparing use of a single warm accent.
03
Typography
humanist-sans
display56px · 700
body20px · 400
caption11px · 400
Uppercase and widely tracked for small labels like dates and footer text. · Tight tracking and heavy weight for prominent display headlines. · Generous paragraph spacing to maintain a calm reading rhythm.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent vertical rhythm with generous whitespace to emphasize the text.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Subtle 1px borders using a semi-transparent white or light grey.
inset 0 0 2px 0 rgba(0, 0, 0, 0.03)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A narrow, single-column centered layout optimized for readability.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing
Smooth, decelerating transitions for interactive elements. · Subtle opacity fades.
Subtle background color shifts on interactive elements. · Smooth transitions on active states.
08
Components
buttonMinimal pill-shaped buttons with subtle borders.
cardBordered containers with minimal padding, used for embedded social posts.
heroA stark, full-width hero containing only a centered, large-scale headline and a small date.
09
Voice & Don'ts
ToneSincere, direct, and transparent.
HeadlinesShort, impactful, and declarative.
CTAsSubtle and unobtrusive, often secondary to the main message.
Don't use complex layouts — screenshot shows a single-column, highly focused reading layout.
Don't use a wide variety of colors — screenshot shows a strictly monochromatic palette with one accent.
Don't use serif or highly decorative fonts — screenshot shows a clean, neutral humanist sans-serif.
Don't use dense, compact spacing — screenshot shows generous whitespace between paragraphs.
Don't use heavy borders or drop shadows — screenshot shows only very subtle, semi-transparent borders.
Don't center all body text — screenshot shows left-aligned body text within a centered container.
Captured from the live site · real computed styles
11
System prompt
This system documents a minimalist, editorial design system for the Foundation app's announcement pages. The identity is direct, transparent, and community-focused, utilizing a stark, monochromatic palette: solid black (#000000) backgrounds with off-white (#EDEDED) text and muted grey (#8A8A8A) accents. A single, sparingly used warm yellow (#FFD400) serves as a high-chroma accent. The typography relies on a clean, neutral humanist-sans-serif with a clear hierarchy of tracked uppercase labels and tight, heavy display headlines. The layout is a narrow, centered single-column optimized purely for reading. Critical don'ts: avoid using multiple bright colors, avoid complex multi-column layouts, and avoid using overly decorative or serif typefaces. The design prioritizes calm readability and sincere, direct communication.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
