41 terms · 10 categories
Design & AI agent glossary
Definitions for the design and AI-builder vocabulary we use across AI2 Design — design tokens, agent briefs, design language transfer, and the typographic / chromatic / motion concepts an AI agent needs to absorb a brief correctly. Each term is paste-ready as a citation or LLM context primer.
AI agents & briefs · 6
AI Agent Brief
A paste-ready Markdown bundle that transfers a design language to AI builders like Claude, Cursor, or v0 in a single message.
Agent Prompt Kit
The 18-field structured object an AI builder can paste into Claude, Cursor, or v0 to absorb a complete design language.
Design Language Transfer
Adopting another brand's design vocabulary (palette, typography, motion) without copying its identity — a key AI builder workflow.
llms.txt
A proposed standard text file at /llms.txt that exposes a site's primary content in a format optimized for LLM ingestion.
Paste-ready Brief
A self-contained Markdown document an AI agent can absorb in a single paste, with no editing or dependency lookup required.
Design System Handoff
The transfer of design tokens, components, and rules from designers to engineers (or AI agents) — historically a lossy step.
AI2 Design product · 2
AI2 Design
An inspiration gallery and design extractor optimized for AI agent consumption — every catalogued site ships with a paste-ready 24-field brief bundle (18-field agent brief + 6-field curator).
Design Extraction
The process of reading a live website's design tokens (palette, typography, spacing, motion) from its rendered DOM and computed styles.
Frameworks & systems · 5
Atomic Design
Brad Frost's hierarchical design system methodology that scales components from atoms (button, input) to organisms (header, card) to pages.
Computed Style
The final CSS property values the browser actually applies to an element after cascading, inheritance, and unit resolution.
Design Language
The grammar of decisions — palette, type, spacing, motion, voice — that makes a product visually consistent and recognizable.
Design System
The structured collection of tokens, components, and patterns that codifies a brand's design language as reusable code.
Tailwind CSS v4
The 2024+ rewrite of Tailwind, with native CSS variables, `@theme inline` syntax, and faster Oxide engine.
Spacing & layout · 4
Breakpoint Ladder
The fixed set of viewport widths (sm, md, lg, xl, 2xl) a design system uses to switch between responsive layouts.
Spacing Scale
The fixed set of pixel values (e.g. 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) a design system uses for padding, margin, and gap.
Container Max-width
The widest a bounded content rail allows itself to grow — typically 1080-1536 px on modern marketing sites.
Edge-to-edge Layout
A layout that abandons the bounded container and lets content (or sections) span the full viewport width.
Typography · 6
Cormorant Garamond
An open-source revival of Claude Garamond's 16th-century roman type, optimized for display use at large sizes.
Geist
Vercel's open-source typeface family — Geist Sans + Geist Mono — designed for engineering surfaces with rationalist geometry.
Inter
Rasmus Andersson's open-source sans-serif typeface, optimized for UI rendering at small sizes — the de-facto default for SaaS interfaces.
Söhne
Klim Type Foundry's grotesque sans-serif — Stripe's primary typeface and a frequent companion in modern fintech.
Tabular Numerals
A font feature (`font-variant-numeric: tabular-nums`) that forces every digit to occupy the same width — essential for aligned columns.
Type Weight Ladder
The set of font weights (e.g. 400 / 500 / 700) a typographic system commits to — the discipline that anchors hierarchy.
Motion · 2
Design tokens · 2
Color · 6
Dark-first Design
A design strategy where the dark color theme is the primary canvas, and light mode is the adapted alternative.
Light-first Design
A design strategy where the light canvas (white, cream, ivory) is the primary surface, and dark mode is the adapted alternative.
Monochrome Palette
A color system built primarily from one hue's tints and shades, plus a single high-contrast accent.
OKLCH
A perceptually uniform CSS color space (`oklch(L C H)`) that produces predictable lightness changes — the future of design tokens.
Radix Alpha-scale Palette
Radix Themes' 12-step accent scale with paired alpha-channel tokens, designed for perceptually consistent overlay effects.
Atmospheric Gradient
A low-opacity radial or linear gradient deployed as ambient atmosphere rather than decoration — usually <5% surface area.
Accessibility · 4
:focus-visible
A CSS pseudo-class that targets keyboard-driven focus only, hiding the focus ring on mouse clicks.
Minimum Tap Target
The smallest size (typically 44×44 CSS pixels on touch, 40×40 on pointer) at which an interactive element remains reliably tappable.
prefers-reduced-motion
A CSS media query that detects when the user has requested reduced motion in their OS accessibility settings.
WCAG vs APCA
Two competing color contrast standards — WCAG (4.5:1 ratio formula) and APCA (perceptually weighted lightness contrast).
Elevation & surfaces · 4
Glassmorphism
A surface aesthetic using translucent panels with backdrop blur to mimic frosted glass, popularized by macOS Big Sur and iOS.
Inset 1px Border Shadow
A CSS box-shadow technique (`box-shadow: <color> 0 0 0 1px inset`) used for surface delimitation without traditional drop shadow.
Skeuomorphism
A design approach that gives digital surfaces the visual cues of physical objects (e.g. inset key shadows, leather stitching).
Shape Radius Ladder
The set of corner radii (e.g. 4 / 8 / 12 / 16 / 20 px) a design system uses for inputs, buttons, cards, and modals.
Missing a term?
The glossary grows alongside the catalogue. If a concept you expect to see is missing — particularly anything that appears in a curator's tasteNotes or an agent brief's constraints — submit it via the contact form and we'll add the entry within a week.