# The Artbook library
An Artspo book: 4 design languages, 25 techniques and 0 works, rebuilt from measurements of real websites. Every recipe is a generic reconstruction, not a site's code.
**For agents.** Each pattern below stands on its own: take one section to use one move, or read the whole book as a style reference. Follow the rules at the end. To add this book to an Artspo library, run the artspo skill's importer: `python3 import_book.py https://artbook.dev/library/artbook.md`.
## Contents
- Languages: Cinematic media canvas, Humane editorial, Research index, Retro machine pop
- Techniques, color: Accent rationing, Analog grain, Color-indexed sections, Highlighter marks, Warm-tinted depth
- Techniques, layout: Announcement bar, Artifact as hero, Benchmark as headline, Numbered sections, Object carousel hero, Ruled structure
- Techniques, motion: Ambient breathing glow, Cinematic entrance, Develop reveal, Inertial smooth scroll, Four-tier motion timing, Narrated proof, Soft rise reveal, Springs for characters only, Static by design
- Techniques, shape: Hard edges, flat depth
- Techniques, type: Machine-voice labels, One family, scale does the work, Oversized tight display, Serif display, sans UI
## Languages
### Cinematic media canvas
_A screening room. Dark, media-first, and things develop into view instead of sliding in._
> **Emerging:** one strong example so far. Treat it as a sketch until another clip confirms it.
#### Defining traits
- **Color.** A light dotted canvas for the hero (#FAFAFA) cutting to near-black working sections (#0E0E0E / #202020 / #2A2A2A); one hot accent (#F04E23) and one soft highlight (#FFF78B).
- **Type.** Serif display (56px, -0.02em, line-height 1) over a neutral sans; the serif signals 'creative', the sans 'tool'.
- **Imagery.** Media is the content: a curved 3D carousel of real outputs, node graphs of workflows.
- **Motion.** Cinematic entrances (1500ms expo-out, scale 1.2 → 1), tiles that 'develop' from a brightness flash, breathing glow on the card that sells, animated film-grain noise. Smooth scroll throughout.
#### Techniques it uses
- Cinematic entrance: The hero arrives slowly (about 1.5s), scaling down from 1.2 while it fades in on a long expo-out, like a camera settling.
- Develop reveal: Images appear overexposed and settle to normal, like a photo developing, staggered across a grid.
- Ambient breathing glow: A slow loop (3.5–5s) gently pulsing opacity and scale on a glow behind the thing that matters: the hero object, or the plan you want chosen.
- Analog grain: A paper, film or halftone texture over flat color, to take the digital sterility off a page.
- Object carousel hero: The hero is a row of objects or media with the focused one centered and full, and its neighbors scaled down and faded.
- Serif display, sans UI: Headlines in a text serif with tight tracking; everything you interact with in a neutral sans.
- Inertial smooth scroll: Scroll is taken over by a smoothing library, so the page glides with momentum.
- Accent rationing: One saturated color is reserved for the action and the data.
- Artifact as hero: The hero shows the product's literal interaction (the prompt box you type into, the one-line diff you'd make, the code and what it compiles into), not a screenshot or an abstraction.
#### Starter tokens
```css
--canvas: #FAFAFA; --stage: #0E0E0E; --stage-2: #202020; --stage-line: #2A2A2A;
--hot: #F04E23; --glow: #FFF78B;
--radius: 2px 4px 6px 8px; /* small, many */
--t-entrance: 1500ms cubic-bezier(0.16, 1, 0.3, 1); --entrance-from: scale(1.2);
--t-develop: 750ms cubic-bezier(0, 0.55, 0.45, 1); --stagger-tiles: by scroll position;
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Picture it. Then watch it land.
One prompt, every model, shown as it renders.
Try it free
```
#### Use when
Products whose output is visual (media, design, video), where showing the work is the argument.
#### Avoid when
Text-heavy products. Without strong media this is just a dark page with slow fades.
Measured on: Melius, Hone.
### Humane editorial
_A well-made magazine about technology that feels human: calm, warm, crafted. The product is technical, but the page leads with feeling._
#### Defining traits
- **Type.** Serif display with a sans for UI (Jog: Source Serif 4 56/500 at -0.022em, line-height 1.04; Handwired: Iowan Old Style 60/400 at the same -0.022em; Era: IvyOra serif for almost all text). Mono shows up only where the product is code.
- **Color.** Warm paper (#F4EBDA, 72% of Jog; #F3EEE4 behind Handwired's #FFFDF8 cards) or airy white (84% of Era); brown-black ink instead of pure black (#4B4036, #5F564D); one quiet accent (Era's green #369169, Handwired's rust #A64D1D).
- **Imagery.** Art, objects or a crafted artifact as the hero, not UI chrome: an impressionist painting framed in a card (Jog), glowing translucent bags (Era), a code block that becomes a hand-drawn wiring diagram (Handwired).
- **Shape.** Soft but not bubbly: 6px controls, pill tags, one large hero card; warm-tinted shadows or glows instead of gray ones.
- **Motion.** Slow and quiet, or none: 550–900ms ease-out fades with 18px rises and 40–70ms staggers; ambient breathing loops of 4s or more; springs only on objects. Handwired shows the language holds up fully static, with only 120/280ms hover transitions.
#### Techniques it uses
- Serif display, sans UI: Headlines in a text serif with tight tracking; everything you interact with in a neutral sans.
- Analog grain: A paper, film or halftone texture over flat color, to take the digital sterility off a page.
- Warm-tinted depth: Shadows and lines are tinted with the ground color's hue instead of gray, so elevation feels like paper lifting, not plastic.
- Soft rise reveal: Content fades in while rising a short distance, with a strong ease-out and a small stagger.
- Ambient breathing glow: A slow loop (3.5–5s) gently pulsing opacity and scale on a glow behind the thing that matters: the hero object, or the plan you want chosen.
- Object carousel hero: The hero is a row of objects or media with the focused one centered and full, and its neighbors scaled down and faded.
- Artifact as hero: The hero shows the product's literal interaction (the prompt box you type into, the one-line diff you'd make, the code and what it compiles into), not a screenshot or an abstraction.
- Narrated proof: The hero artifact acts out the claim in sequence: strike the old value, type the new one, blink a caret.
- Springs for characters only: An overshooting spring (back-out) is reserved for characters and objects: mascots, products, carousel items.
#### Starter tokens
```css
--ground: #F4EBDA; --ground-raised: #FAF5EC; --ink: #2A2119; --ink-body: #4B4036; --ink-muted: #A99B8B;
--line: 1px solid #D9CDB9;
--shadow-soft: 0 1px 2px rgba(52, 40, 18, 0.07); --shadow-lift: 0 30px 80px -30px rgba(20, 14, 4, 0.55);
--radius-control: 6px; --radius-tag: 999px;
--font-display: "", Georgia, serif; /* tracking -0.02em, leading 1.04 */
--font-ui: "", system-ui; --font-code: "", ui-monospace;
--t-reveal: 550ms cubic-bezier(0.22, 1, 0.36, 1); --stagger: 40ms; --rise: 18px;
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Field notes
Quiet tools for careful work.
Change one line. Everything else stays where you left it.
Start writing
settings.yml
− plan: legacy
+ plan: fieldnote
```
#### Use when
Products that want trust through calm: developer tools that sell on taste, consumer AI, anything priced on quality rather than features.
#### Avoid when
Dense dashboards, or anything that must feel fast and aggressive. Serif plus slow motion reads as considered, not urgent.
Measured on: Jog, Era, Handwired.
### Research index
_A lab notebook made public. Numbered, ruled, precise, confident. Color works as an index or a highlighter, never as decoration._
#### Defining traits
- **Structure.** Numbered sections (01, 02 …), hairline or 2px rules, uppercase mono labels; the page reads like a document with chapters.
- **Type.** One grotesk family carries every role, with hierarchy from size alone (Hone: 13px → 120px, all FT Aktual). Variant: light grotesk plus mono labels (Preference Model: Lausanne 300 + Martian Mono uppercase).
- **Color.** Neutral ground (white / light gray / black) plus a highlighter accent: Hone's lime #BCF891 / #3BD966, or Preference Model's set of index chips (pink, yellow, orange, cyan, green), one per section.
- **Shape.** 0–2px radii, no shadows. Depth comes from color bands, never elevation.
- **Motion.** Either none at all (Preference Model has no load or scroll motion) or a strict system (Hone: 200ms micro, 400ms reveals, back-out springs only on the mascot). Never decorative drift.
#### Techniques it uses
- Numbered sections: Sections numbered 01, 02 … like chapters, so a long page reads as an ordered argument and not a scroll of features.
- Ruled structure: Hairline rules divide columns, list rows and FAQ entries, so the grid is visible like a printed table.
- One family, scale does the work: A single grotesk family for every role, with hierarchy made only through size and space.
- Machine-voice labels: A mono or pixel face as a secondary voice for labels, metadata, numbers and code.
- Highlighter marks: Key words get a flat background block like a marker pen, so emphasis comes from color behind the text instead of weight or size.
- Color-indexed sections: Each section gets its own color as wayfinding, either a chip next to the section number or a full-bleed band, so color tells you where you are.
- Hard edges, flat depth: Square corners (0–2px) and no shadows.
- Static by design: Little or no scroll motion, as a deliberate choice: content is simply there.
- Springs for characters only: An overshooting spring (back-out) is reserved for characters and objects: mascots, products, carousel items.
#### Starter tokens
```css
--ground: #FFFFFF; --ground-alt: #E8E8E8; --ink: #000000; --ink-muted: #6B8683;
--highlight: #BCF891; /* or one chip color per section */
--rule: 1px solid #000000; /* Hone variant: 2px solid #CEE4E2 */
--radius: 0; /* max 2px */
--font-sans: "", system-ui; --font-mono: "", ui-monospace;
--scale: 13px 16px 18px 28px 48px 67px 120px;
--t-micro: 200ms cubic-bezier(0.33, 1, 0.68, 1);
--t-reveal: 400ms cubic-bezier(0.38, 0.005, 0.215, 1);
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
FIELDNOTE / RESEARCHINDEX 01–03
Measurement is the product, not a feature.
01 Every claim ships with the run that produced it.
02 Methods are public. Results are versioned.
03 Errors are listed before wins.
```
#### Use when
Research-heavy, technical or trust-critical products: infrastructure, data, protocols, anything where 'we are rigorous' is the pitch.
#### Avoid when
Consumer warmth, or emotional products. It reads cold without a highlight color or a character (Hone uses mascot faces to warm it).
Measured on: Hone, Preference Model.
### Retro machine pop
_Loud, funny, nostalgic computing. It's confident enough to joke ('We raised a really big Series A')._
> **Emerging:** one strong example so far. Treat it as a sketch until another clip confirms it.
#### Defining traits
- **Color.** One loud ground color covering about half the page (#F386A1, 42%), with near-black and white sections and an occasional green band.
- **Type.** Giant grotesk display at 150px with 0.8 line-height, title-cased; mono body at 12px; a terminal or pixel font for metadata.
- **Chrome.** Retro OS windows and dialog boxes as content frames; charts drawn in window chrome; halftone dot textures.
- **Shape.** Square corners everywhere; the only shadows are hard, dark, OS-style ones.
- **Motion.** Almost none: a loading bar and blinking dots. The page is loud, so the motion stays quiet.
#### Techniques it uses
- Oversized tight display: Display type far beyond comfortable size (120–150px) with leading below 1, so words become shapes.
- Machine-voice labels: A mono or pixel face as a secondary voice for labels, metadata, numbers and code.
- Hard edges, flat depth: Square corners (0–2px) and no shadows.
- Color-indexed sections: Each section gets its own color as wayfinding, either a chip next to the section number or a full-bleed band, so color tells you where you are.
- Analog grain: A paper, film or halftone texture over flat color, to take the digital sterility off a page.
- Benchmark as headline: The claim is a number against named competitors, set huge and backed by a chart right below it.
- Static by design: Little or no scroll motion, as a deliberate choice: content is simply there.
#### Starter tokens
```css
--ground: #F386A1; --ground-dark: #161616; --paper: #FEFEFE; --ink: #1E1E1E;
--radius: 0; --shadow-window: 0 8px 24px rgba(0, 0, 0, 0.53);
--font-display: ""; /* 150px, line-height 0.8, Title Case */
--font-body: "", ui-monospace; /* 12px */
--font-meta: "";
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
The Loud Machine
README.TXT_ □ ×
We built a computer that talks back. It is faster than the last one, and funnier.
v1.0 ▮ READY
```
#### Use when
Launches that need to be remembered, developer communities, products with a strong voice.
#### Avoid when
Enterprise procurement audiences, or long-form trust content. Only one strong example so far, so treat it as a sketch, not a system.
Measured on: TypeSafe AI, Preference Model.
## Techniques
### Accent rationing
One saturated color is reserved for the action and the data. Everything else is neutral, so the eye goes where the money is.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
--accent: ;
/* allowed on: primary CTA, active nav, key numbers, success states. Nowhere else. */
.button-primary { background: var(--accent); }
.stat { color: var(--accent); }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
OverviewRunsSettings
Cost per run
$0.0012
down from $0.006
Switch plan
Runs this week
18,204
steady
Export
one hue · on the action, the key number, the active tab · nowhere else
```
#### Use when
Any page with one conversion goal.
#### Avoid when
When you have several equal actions; rationing needs a single winner.
#### Pairs with
Highlighter marks, Hard edges, flat depth
Measured on: Hone, Melius, Clay (app home), Era.
### Analog grain
A paper, film or halftone texture over flat color, to take the digital sterility off a page.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
.grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .06;
background-image: url("noise.png"); /* 128px tile */
animation: grain 3s steps(5) infinite; } /* optional: film-grain jitter */
@keyframes grain { 20% { background-position: 96px -64px } 40% { background-position: -80px 112px }
60% { background-position: 128px 48px } 80% { background-position: -48px -96px } }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Flat colorno texture
With grainnoise · 3s steps(5) jitter
```
#### Use when
Warm or nostalgic brands; dark pages that feel too flat.
#### Avoid when
Dense data UI; texture under small text hurts legibility.
#### Pairs with
Serif display, sans UI, Warm-tinted depth
Measured on: Jog, Melius, TypeSafe AI.
### Color-indexed sections
Each section gets its own color as wayfinding, either a chip next to the section number or a full-bleed band, so color tells you where you are.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
section:nth-of-type(1) { --index: #F3B3F6; } section:nth-of-type(2) { --index: #F5D547; }
section:nth-of-type(3) { --index: #F05A2A; } /* … */
.section-num { background: var(--index); font-family: var(--font-pixel); }
/* band variant */ section.band { background: var(--index); }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
01
About the lab
chip
02
What we measure
chip
03
Open problems
band
04
Join us
chip
```
#### Use when
Long single pages with distinct chapters.
#### Avoid when
Short pages; with fewer than 4 sections it just looks random.
#### Pairs with
Numbered sections, Hard edges, flat depth
Measured on: Preference Model, TypeSafe AI, Hone.
### Highlighter marks
Key words get a flat background block like a marker pen, so emphasis comes from color behind the text instead of weight or size.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
mark, .hl { background: var(--highlight); color: inherit; padding: 0 0.15em; }
/* animated variant: grow the mark left to right */
.hl { background: linear-gradient(var(--highlight), var(--highlight)) no-repeat 0 0 / 0% 100%;
transition: background-size 260ms ease-out; }
.hl.in { background-size: 100% 100%; }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
02 / METHOD
An applied research lab for teams that would rather measure than guess.
one mark per screen · flat block behind the words · grows in 260ms ease-out
```
#### Use when
Pointing at the one phrase that carries the pitch; labeling sections.
#### Avoid when
Long body copy. More than one mark per screen dilutes it.
#### Pairs with
Accent rationing, Numbered sections, Narrated proof
Measured on: Hone, Jog, Melius.
### Warm-tinted depth
Shadows and lines are tinted with the ground color's hue instead of gray, so elevation feels like paper lifting, not plastic.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
--shadow-soft: 0 1px 2px rgba(52, 40, 18, .07), 0 0 0 1px rgb(191, 176, 150);
--shadow-lift: 0 30px 80px -30px rgba(20, 14, 4, .55);
--line: 1px solid #D9CDB9;
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Gray shadow
rgba(0,0,0) · reads as plastic
Warm-tinted
rgba(52,40,18) · paper lifting
```
#### Use when
Any warm or off-white ground.
#### Avoid when
Pure white or cool grays, where tinted shadows look dirty.
#### Pairs with
Analog grain, Serif display, sans UI
Measured on: Jog, Handwired.
### Announcement bar
A thin full-width strip above the nav carrying the latest milestone (in this library, always a funding round) with one link.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
.announce { font-size: 13px; padding: 8px; background: var(--ground-alt) or var(--glow); text-align: center; }
```
#### Variants
- TypeSafe turns the bar into a joke inside a retro dialog box, so the convention becomes part of the voice.
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Fieldnote raises a Series A to build open evals · Read more
The newest fact about you goes above everything else.
```
#### Use when
Time-bound news.
#### Avoid when
Leaving it up after the news goes stale.
#### Pairs with
Retro machine pop
Measured on: Hone, Melius, TypeSafe AI.
### Artifact as hero
The hero shows the product's literal interaction (the prompt box you type into, the one-line diff you'd make, the code and what it compiles into), not a screenshot or an abstraction.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
/* prompt variant */
/* diff variant */
- runs-on: ubuntu-latest+ runs-on: newtool
/* transform variant */
input code
→
what it becomes
→
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Change one line. That's the whole migration.
The hero is the thing you'd actually do, not a picture of the product.
# deploy.yml
− runner: legacy-large
+ runner: fieldnote
Describe what you want to build…
```
#### Use when
When adopting the product is literally one action.
#### Avoid when
Complex products whose first step isn't representative.
#### Pairs with
Narrated proof, Benchmark as headline
Measured on: Jog, Clay (app home), Melius, Handwired.
### Benchmark as headline
The claim is a number against named competitors, set huge and backed by a chart right below it.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
80% less than X.
…one bar per competitor, yours highlighted with the accent…
Method and date of the comparison
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
4× cheaper than Brand A.
Fieldnote$0.003
Brand A$0.012
Brand B$0.009
Price per runner-minute, list prices on 2026-10-01. Method on the pricing page.
```
#### Use when
Products with a measurable edge.
#### Avoid when
When the number needs heavy caveats; the footnote has to be honest.
#### Pairs with
Accent rationing, Oversized tight display
Measured on: Jog, TypeSafe AI.
### Numbered sections
Sections numbered 01, 02 … like chapters, so a long page reads as an ordered argument and not a scroll of features.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
01ABOUT
…
.num { font-variant-numeric: tabular-nums; } /* pair with color-indexed chips or a highlighter */
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
01PROBLEM
Models are good. Outcomes aren't.
02APPROACH
Engines that onboard themselves.
03PROOF
Three deployments, measured.
04NEXT
Where it breaks, and what we're doing about it.
```
#### Use when
Explaining a thesis or a process in order.
#### Avoid when
Pages without a real sequence; numbers promise an argument.
#### Pairs with
Color-indexed sections, Machine-voice labels, Ruled structure
Measured on: Preference Model, Hone.
### Object carousel hero
The hero is a row of objects or media with the focused one centered and full, and its neighbors scaled down and faded.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
.item { transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 500ms ease; }
.item:not(.focus) { transform: scale(.55); opacity: .55; }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
hover an object to focus it · neighbors at scale 0.55, back-out spring
```
#### Use when
Physical products, media outputs: things worth looking at.
#### Avoid when
SaaS without visual output.
#### Pairs with
Springs for characters only, Ambient breathing glow
Measured on: Era, Melius.
### Ruled structure
Hairline rules divide columns, list rows and FAQ entries, so the grid is visible like a printed table.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
.row + .row { border-top: 1px solid var(--rule); }
.cols > * { border-top: 1px solid var(--ink); padding-top: 24px; }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
ResearchLong-horizon evaluation.
ProductEnvironments as a service.
PolicyPublic methods, public errors.
How is a run priced?+
Can we bring our own models?+
Where does data live?+
```
#### Use when
FAQ, pricing tables, three-up value props.
#### Avoid when
Busy imagery-led layouts, where the rules fight the pictures.
#### Pairs with
Numbered sections, Hard edges, flat depth
Measured on: Preference Model, Hone, Jog.
### Ambient breathing glow
A slow loop (3.5–5s) gently pulsing opacity and scale on a glow behind the thing that matters: the hero object, or the plan you want chosen.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
@keyframes breathe { 0%, 100% { opacity: .22; transform: scale(1); } 50% { opacity: .4; transform: scale(1.03); } }
.glow { animation: breathe 4.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
The plan you want chosen
4.2s ease-in-out · infinite
```
#### Use when
Drawing attention to one thing without moving it.
#### Avoid when
More than one glow per screen.
#### Pairs with
Object carousel hero, Accent rationing
Measured on: Era, Melius.
### Cinematic entrance
The hero arrives slowly (about 1.5s), scaling down from 1.2 while it fades in on a long expo-out, like a camera settling.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
.hero-in { animation: settle 1500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes settle { from { opacity: 0; transform: scale(1.2); } }
.hero-sub { animation-delay: 200ms } .hero-proof { animation-delay: 500ms }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Make what you can picture
The camera settles. The page begins.
1500ms expo-out · from scale 1.2 · +200ms · +500ms
```
#### Use when
Media-first heroes, once per page.
#### Avoid when
Anything after the hero; slow entrances make scrolling feel sluggish.
#### Pairs with
Develop reveal, Inertial smooth scroll
Measured on: Melius.
### Develop reveal
Images appear overexposed and settle to normal, like a photo developing, staggered across a grid.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
@keyframes develop { from { filter: brightness(1000%) sepia(20%); } to { filter: brightness(100%) sepia(0%); } }
.tile.in { animation: develop 750ms cubic-bezier(0, 0.55, 0.45, 1) both; } /* add .in as each tile enters the viewport */
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
```
#### Use when
Galleries of generated or photographic output.
#### Avoid when
UI cards or text; the flash only works on imagery.
#### Pairs with
Cinematic entrance, Object carousel hero
Measured on: Melius.
### Inertial smooth scroll
Scroll is taken over by a smoothing library, so the page glides with momentum. It sets the pacing for every other scroll effect.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
// Lenis (or similar), tuned gently; honor reduced motion
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) new Lenis({ lerp: 0.1 });
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
native wheel · jumps per notch
smoothed (lerp 0.1) · glides with momentum
```
#### Use when
Scroll-choreographed pages with pinned or scrubbed sections.
#### Avoid when
Docs and long reading pages; hijacked scroll annoys readers.
#### Pairs with
Cinematic entrance, Soft rise reveal
Measured on: Hone, Melius.
### Four-tier motion timing
The 103 distinct durations measured across the eight clips cluster into four bands: 29 under 300ms, 41 between 300 and 800ms, 20 between 800 and 1600ms, 13 above. The bands blur at their edges, but picking a value from a band and keeping to it is most of a motion system.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
--t-micro: 120–300ms ease / material standard / cubic-out (hover, toggles, small UI)
--t-reveal: 320–750ms quint-out / cubic-out (scroll reveals, characters)
--t-entrance: 800–1500ms expo-out / custom out (hero, data bars)
--t-ambient: 2–6s linear / ease-in-out, infinite (glows, grain, shimmer)
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Micro200ms · cubic-out
Reveal550ms · quint-out
Entrance1500ms · expo-out
Ambient4.2s · ease-in-out
```
#### Use when
Starting any motion spec.
#### Avoid when
Mixing tiers: a 600ms hover or a 200ms hero both feel wrong.
#### Pairs with
Soft rise reveal, Springs for characters only, Ambient breathing glow
Measured on: Jog, Clay (app home), Hone, Era, Melius.
### Narrated proof
The hero artifact acts out the claim in sequence: strike the old value, type the new one, blink a caret. About 1.3s from first move to caret.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
del { animation: strike 260ms ease-out 700ms both; } /* scaleX(0) → 1 on a line */
ins .ch { animation: type 1ms linear both; animation-delay: calc(1150ms + var(--i) * 100ms); } /* visibility */
.caret { animation: caret 900ms linear 1250ms infinite; }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
settings.yml
− plan: legacy
+ plan: field
```
#### Use when
When the pitch fits in one before/after.
#### Avoid when
Multi-step stories; past about 2s, people stop watching.
#### Pairs with
Artifact as hero, Highlighter marks
Measured on: Jog.
### Soft rise reveal
Content fades in while rising a short distance, with a strong ease-out and a small stagger. It's the most common motion in the library.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none;
transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--i) * 60ms); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
```
#### Variants
- Text: 12–18px rise, 50–70ms stagger.
- Large tiles: 16px rise plus scale 0.98, triggered tile by tile as they scroll in (Melius).
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Each line arrives a beat after the last.
It rises sixteen pixels while it fades in.
The ease-out is strong, so it settles softly.
Sixty milliseconds apart. Then nothing moves.
600ms quint-out · 16px rise · 60ms stagger
```
#### Use when
Default reveal for text and cards.
#### Avoid when
Everything at once; when every element rises, nothing does.
#### Pairs with
Serif display, sans UI, Springs for characters only
Measured on: Era, Melius, Jog, Hone.
### Springs for characters only
An overshooting spring (back-out) is reserved for characters and objects: mascots, products, carousel items. Text and UI never spring.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
.mascot, .object { transition: transform 420ms var(--spring); }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
back-out spring · characters, objects
cubic-out · everything else
```
#### Use when
Giving personality to one element class.
#### Avoid when
Body text, buttons or layout shifts; bouncy UI reads as a toy.
#### Pairs with
Object carousel hero, Soft rise reveal
Measured on: Hone, Era.
### Static by design
Little or no scroll motion, as a deliberate choice: content is simply there. Motion is limited to hover color and loaders.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
/* the whole motion system: */
a, button, .row { transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
nothing moves on load or scroll · hover a row
Research06 papers
Environments14 suites
Team11 people
Careers3 roles
```
#### Use when
Loud visual systems (motion would be too much), austere ones (motion would be off-voice), or pages where the artifact is already the show.
#### Avoid when
Pages whose story needs pacing.
#### Pairs with
Hard edges, flat depth, Oversized tight display
Measured on: Preference Model, TypeSafe AI, Handwired.
### Hard edges, flat depth
Square corners (0–2px) and no shadows. Hierarchy comes from color bands and rules, not elevation.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
--radius: 0; /* or 2px */
--shadow: none;
.card { border: 1px solid var(--rule-color); background: var(--ground-alt); }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Band one
no radius · no shadowRead
Band two
separation from color and rulesRead
Band three
depth = contrastRead
```
#### Use when
Rigor-signaling brands; dense information.
#### Avoid when
Friendly consumer products; it can read severe.
#### Pairs with
Ruled structure, Color-indexed sections
Measured on: Preference Model, TypeSafe AI, Hone.
### Machine-voice labels
A mono or pixel face as a secondary voice for labels, metadata, numbers and code. It's the machine talking, next to the human headline.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
.label { font: 500 12px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
/* Preference Model variant: labels as identifiers → OUR_TEAM, JOIN_US */
.num { font-family: var(--font-pixel); } /* section numerals */
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
OUR_TEAM · 04
People who write the evals first.
RUN_ID 7f3a-22LATENCY 184msUPDATED 2026-10-15
human headline · mono for ids, numbers, metadata
```
#### Use when
AI and dev products: anything where showing the machinery builds trust.
#### Avoid when
As body text past a sentence or two (TypeSafe's 12px mono body is the edge case).
#### Pairs with
Numbered sections, One family, scale does the work, Serif display, sans UI
Measured on: Preference Model, TypeSafe AI, Jog, Melius, Handwired.
### One family, scale does the work
A single grotesk family for every role, with hierarchy made only through size and space. Big steps, few weights.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
--font: ""; font-weight: 400 (500 for UI only)
--scale: 13 16 18 28 48 67 120; /* ≈1.5× steps; top step is 7.5× body */
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
13Captions and metadata16Body copy, set plainly28Section heads48Page statements120Scale
```
#### Use when
Systematic, research-flavored brands; it's cheap to keep consistent.
#### Avoid when
When the family is generic; with one face, the face *is* the brand.
#### Pairs with
Oversized tight display, Numbered sections
Measured on: Hone, Preference Model.
### Oversized tight display
Display type far beyond comfortable size (120–150px) with leading below 1, so words become shapes.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
.mega { font-size: clamp(64px, 10vw, 150px); line-height: .8–.9; letter-spacing: -0.01em; text-wrap: balance; }
```
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
Words As Shapes
128px · line-height 0.8 · title case
```
#### Use when
One statement per page that should be remembered.
#### Avoid when
More than once per page, or for anything longer than about 8 words.
#### Pairs with
One family, scale does the work, Static by design
Measured on: TypeSafe AI, Hone.
### Serif display, sans UI
Headlines in a text serif with tight tracking; everything you interact with in a neutral sans. The serif carries the voice, the sans does the work.
#### Recipe
_Rebuilt from measurements. A starting point, not any site's code._
```css
h1, h2 { font-family: var(--font-serif); font-weight: 400–500; letter-spacing: -0.02em; line-height: 1.0–1.04; }
body, button, input { font-family: var(--font-sans); }
```
#### Variants
- Era goes further and sets body copy in the serif too, with positive tracking (+0.043em) on the display.
#### Specimen
_A generic demo of the move, for reference: HTML and CSS, no scripts._
```html
serif carries the voice
Software that reads like a good book.
sans does the work
```
#### Use when
Signaling craft or editorial taste in a technical category.
#### Avoid when
Products where everything is UI; the serif ends up on nothing.
#### Pairs with
Soft rise reveal, Analog grain
Measured on: Jog, Melius, Era, Handwired.
## Rules
Rebuild from these measurements, never from a real site's code, text, logos or imagery. A font in is a placeholder: pick a licensed face of that kind. Respect prefers-reduced-motion.
_Made with Artspo: https://github.com/bryfeng/artspo_