Animation · Science & Motion
Slipstream · Racing HUD
Slipstream · Racing HUD, a science & motion interface reference with an AI-ready brief and standalone HTML.
AI-guide URL — send this to your coding agent
…
The agent fetches ai-guide.md from this folder and studies
the preview.png to reproduce the design.
Preview
full size ↗
00 Design notes
This is a landscape, desktop-first layout from the Animation · Science & Motion group. Visually, the palette is anchored by #fff, #5eead4, #facc15; type runs on Archivo, sans-serif and Fraunces, serif; a type scale up to 148px; corner radii from 2 to 99px.
01 Design tokens · auto-extracted
| Color | Hex | Occurrences |
|---|---|---|
| — | #fff | 20 |
| — | #5eead4 | 8 |
| — | #facc15 | 7 |
| — | #7c4a2a | 6 |
| — | #fbbf24 | 6 |
| — | #3b2416 | 5 |
| — | #67e8f9 | 5 |
| — | #1c1917 | 4 |
| — | #0a0705 | 4 |
| — | #34d399 | 4 |
| Type | Face | Spec |
| fonts | Archivo, sans-serif · Fraunces, serif · Newsreader, serif · Manrope, sans-serif | 10, 11, 11.5, 12, 12.5, 13, 13.5, 14, 15, 16, … (+23 more) px |
| Shape | Value | Use |
| radii | 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, … (+5 more) px | border radii in source |
02 AI-ready brief
Use “Slipstream · Racing HUD” as the visual direction for this interface. It belongs to Animation / Science & Motion. Study the reference for its hierarchy, typography, color system, spacing, density, border treatment, and interaction vocabulary. Adapt those principles to my product and content—do not copy the sample brand or wording. If I provide an HTML export of the reference, inspect its inline computed CSS, embedded fonts, and asset data for exact visual values; treat it as an implementation reference, not production-ready source. Keep the result responsive, accessible, and production-ready.
ai-guide.md
03 Where the design lives
Full-size preview: preview.png (720px, lossless) Detail page: index.html The agent brief is in ai-guide.md — paste it (or this URL) into your coding agent and it can reproduce the direction in any stack.
ai-guide.md