Design system
Everything the Rerun interface is made of, rendered by the same components the product ships, next to the exact values behind them. Colors are authored in oklch and resolved here to the sRGB your tools understand. Click a swatch to copy it.
The system is built for both themes. Almost every value on this page changes when you switch, so read it twice before deciding what a shot should look like.
Color
One saturated accent on an achromatic base. Everything else earns its color by meaning: agent status, success, danger, a question waiting on a human.
Brand
The violet is the only chromatic note in the chrome. It never fills a large surface, it marks one thing at a time.
Hero gradient
A radial gradient clipped to the text, anchored above the headline so the light appears to fall from off screen. Stops: #b7a8ff at 25%, brand at 75%, #220fa0 at 160%, centered at 50% -80%.
Agents on autopilot
Neutral ramp
Authored in oklch with zero chroma, so it is a true grayscale, not a tinted one. The values below are the sRGB the screen actually shows. Switch the theme at the top of the page to read the other set.
In dark mode borders and inputs are translucent white rather than a solid gray. That is what gives surfaces their soft glass edge instead of a drawn outline.
Agent status
The five states an agent block can be in on the board. Color, glow and opacity all carry the state.
Semantic
Used by toasts, switches and the current running through cables.
Typography
Two families only. Inter carries everything an eye reads as prose or chrome, DM Mono carries everything that reads as a machine talking: values, ids, logs, tile labels.
Inter
Interface and prose. Loaded as a variable font.
Regular 400 · Agents that ship work while you sleep
Medium 500 · Agents that ship work while you sleep
Semibold 600 · Agents that ship work while you sleep
DM Mono
Weights 400 and 500 only. Values, ids, tile labels, toasts.
400 · agent.run("rerun")
500 · Found 24 sources
Scale
Headings sit at 500, never bold. Display sizes carry tracking-tight, everything else stays at normal tracking.
Page headline (h1)
36 / 48 / 72 px
Agents on autopilot
text-4xl / md:text-5xl / lg:text-7xl, 500, tracking-tightSection headline (h2)
24 / 30 / 36 px
Agents on autopilot
text-2xl / md:text-3xl / lg:text-4xl, 500, tracking-tightSubheadline
14 / 16 px
Agents on autopilot
text-sm / lg:text-base, 500Card title
18 px
Agents on autopilot
text-lg, 500Body
14 px
Agents on autopilot
text-sm, 400Micro / eyebrow
12 px
Agents on autopilot
text-xs, 600, uppercase, tracking-wideTile label (board)
8 px
Agents on autopilot
text-[8px], 400, drop-shadow 0 1px 1.5px rgba(0,0,0,0.85)| Sans | Inter, next/font/google, subsets latin, display swap |
|---|---|
| Mono (landing) | DM Mono, weights 400 and 500 |
| Mono (product app) | Geist Mono |
| Heading font | same as sans, no separate display face |
| Heading weight | 500 |
| Display tracking | tracking-tight (-0.025em) |
The marketing site and the product app do not share the same mono. The landing sets DM Mono, the app sets Geist Mono. For launch material, follow the landing and use DM Mono.
Shape, depth and surfaces
Nothing in the system is a flat rectangle with a hard border. Containers are softly rounded, surfaces are separated by a hairline ring rather than a drawn box, and anything clickable carries a physical relief.
Radius
A single base of 10px, scaled. Containers take xl, controls take lg, menu items take md, pills go full.
The product app extends the same scale with 2xl 18px, 3xl 22px and 4xl 26px for its outer frame and panels.
Relief
Light falls from above. A filled button gets a bright inner stroke on its top and sides, a diffuse veil under the top edge, and a drop shadow below. It is built entirely out of box-shadow layers because that is the only property in the set that interpolates, so hovering it moves rather than jumps. The translucent secondary button follows the theme rather than the surface behind it, which is why it disappears on the inverted tile below. That is intended: it is never placed on a surface that fights it.
| --relief-cta | Large marketing button. 2px inner strokes, 22px veil, 14px drop shadow. |
|---|---|
| --relief-solid | Filled button inside the app, about half the height. 1px strokes, tighter veil. |
| --relief-subtle | Translucent or light fills. Top stroke and a shallow shadow, nothing else. |
| Transition | 150ms on background-color, border-color, box-shadow and color |
| Press | active:scale-[0.98], applied outside the transition so it lands instantly |
The relief flips polarity between themes. In light mode a white veil builds up on hover. In dark mode the fill is already white, so the relief comes from a dark veil at the bottom that fades away on hover: the button appears to switch on. Toggle the theme above and hover the buttons to see it.
Surfaces
Panels are separated from the page by a hairline ring and a change of value, never by a heavy shadow.
| Panel | rounded-xl bg-card ring-1 ring-foreground/10 |
|---|---|
| Floating chrome | rounded-full bg-neutral-900/80 backdrop-blur-md border border-neutral-700/50 shadow-2xl |
| Dialog overlay | bg-black/10 with backdrop-blur-xs, barely there |
| Page frame | max-w-7xl with a 1px rule on both sides, 8px square markers at the corners |
| Section split | a single 1px horizontal rule, no gap, no shadow |
Logo
An isometric cube drawn as three faces from a single path, which is the same projection the product board uses. The mark is code rather than a file: every export on the brand kit page is generated from that one path. It ships either bare or seated in a tile carrying a faint grid and a soft light.
Variants
The tile follows the surface it sits on. The bare symbol is used whenever something else already provides the frame.
Framed logo
The React component used in the product: rounded box, hairline border, faint grid faded by a radial mask, and a soft central reflection.
Animated logo
The loading state, and the closest thing the brand has to a signature intro. The outline draws itself while water rises inside the letter, the surface keeps rippling, then the whole thing holds.
| Cycle | 2.8s looping, 1.8s one shot |
|---|---|
| Outline | stroke-dashoffset 1 to 0, ease-in-out, over the first 45% of a loop (60% one shot) |
| Stagger | the 3 faces start at i x cycle x 0.1, so they draw in cascade rather than together |
| Water | translateY 560px to -60px, a sine surface of period 256 in a 1024 wide path |
| Ripple | translateX 0 to -256px, 1.4s linear infinite, runs independently of the fill |
| Fade out | opacity holds to 85% of the loop, then falls to 0 |
| Stroke | width 10 on a 512 viewBox, round joins |
Construction
Useful if the mark has to be rebuilt or extruded rather than imported.
| Canvas | 512 x 512 viewBox |
|---|---|
| Mark | translate(128 128) scale(0.5): it fills exactly half the tile, centered |
| Clear space | a quarter of the tile on each side, which is what the scale above leaves |
| Corner radius | 112 on 512, so 22% of the side |
| Tile grid | 128px cells, 5px stroke, faded by a radial gradient from full to 0.12 alpha |
| Tile light | radial white, 0.18 alpha at the center to 0 at 70% |
| 3D model | /3d/logo.glb, the extruded mark used by the landing hero |
Downloadable SVG, PNG and animated GIF exports live on the brand kit page.
Iconography
Icons are thin outline glyphs, never filled and never colored. When one needs presence it is seated in a framed box that carries the same grid and light as the logo tile, which is what ties a third party logo back into the system.
Framed icon
Three stacked layers: a faint square grid faded by a radial mask, a soft central reflection, then the glyph.
Service logos
Third party logos keep their official colors. Only a mark whose measured contrast is too low is rendered white on a dark surface.
| Glyph set | Nucleo outline 18, one weight, no filled variants |
|---|---|
| Default size in controls | 16px |
| Grid cell | about a quarter of the box, 0.5px stroke |
| Grid fade | radial mask, opaque at the center to transparent at 78% |
| Brand logo treatment | official colors; auto-white only below 3:1 contrast on dark surfaces |
Components
The border beam is the signature. It is a conic gradient masked down to a one pixel ring, spinning behind the edge of a card, a pill, a button or a badge. Wherever the system needs to say something is alive, it puts a beam on it rather than a color.
Beam patterns
Two shapes, available in every tone. The angle at which a static beam is pinned is chosen per element so a row of cards never lights up in unison.
Badges
A pill with a beam ring and text tinted to the same tone. Used for status, plan tiers and section eyebrows.
| Default | ring pattern, brand tone, static ring, glow on |
|---|---|
| Status pill | size xs, glow off |
| Shimmer | a light sweep across the text, 5s linear, spread in px |
Buttons
Two variants only. A filled primary that carries the full relief, and a translucent default that follows the theme rather than the surface behind it.
| Heights | sm 32, default 36, lg 40, xl 48, xxl 56 px |
|---|---|
| Radius | rounded-xl, 14px |
| Beam | arcs, brand tone, glow, width 1.5, 4s spin, sitting on the 1px border |
| Hover | 150ms on color and relief |
| Press | scale 0.98, immediate |
Card
Cards are grouped by shared rules rather than individual boxes, and each carries a static beam pinned at its own angle.
Card title
Static beam pinned at 35 degrees.
Card title
Static beam pinned at 160 degrees.
Card title
Static beam pinned at 290 degrees.
Motion
Motion here is physical and quiet. Things settle rather than bounce, loops run slowly enough to be ignored, and nothing ever moves to decorate. If an element animates, it is because its state changed or because it is alive.
Easing
Four curves cover the whole system. The first one is the house curve: a fast start that decelerates hard, so an element arrives almost instantly and then eases into place.
| House curve | cubic-bezier(0.22, 1, 0.36, 1) |
|---|---|
| Spring, when used | stiffness 260, damping 26, no overshoot worth noticing |
| Never used | elastic, back, or any curve that overshoots and returns |
Durations
Every duration in the system, with its frame count at the usual rates. Interactions live between 150 and 400ms, ambient loops between 2 and 7 seconds, background motion above 20.
| Motion | Duration | 24 fps | 30 fps | 60 fps | Where |
|---|---|---|---|---|---|
| Button color and relief | 150ms | 3.6 | 4.5 | 9 | Hover on any button |
| Dropdown open | 180ms | 4.3 | 5.4 | 10.8 | Navbar menus |
| Tile lift | 200ms | 4.8 | 6 | 12 | Selecting or hovering an agent |
| Container hover | 220ms | 5.3 | 6.6 | 13.2 | Space outline and scale |
| Toast in | 280ms | 6.7 | 8.4 | 16.8 | Pill above a tile |
| Side panel slide | 300ms | 7.2 | 9 | 18 | Agent and space panels |
| Letter swap, resize handles | 320ms | 7.7 | 9.6 | 19.2 | Placeholder label, corner handles |
| Toast out | 400ms | 9.6 | 12 | 24 | Pill above a tile |
| Scramble decrypt | 520ms | 12.5 | 15.6 | 31.2 | Toast text resolving |
| Error pulse | 800ms | 19.2 | 24 | 48 | Agent in error |
| Tile drop in | 1s | 24 | 30 | 60 | An agent landing on the board |
| Cable current | 1.2s | 28.8 | 36 | 72 | Dashes travelling along a live link |
| Water ripple | 1.4s | 33.6 | 42 | 84 | Animated logo |
| Logo, one shot | 1.8s | 43.2 | 54 | 108 | Animated logo, plays once |
| Ping rings | 2s | 48 | 60 | 120 | Agent waiting for a human |
| Toast shimmer | 2.4s | 57.6 | 72 | 144 | Sweep across the pill |
| Logo, looping | 2.8s | 67.2 | 84 | 168 | Loading screens |
| Dashed outline crawl | 3.2s | 76.8 | 96 | 192 | Empty space placeholder |
| Toast hold | 3.5s | 84 | 105 | 210 | Before the pill exits |
| Tile shimmer, selection ring | 4s | 96 | 120 | 240 | Agent working, selected tile |
| Border beam spin | 6s | 144 | 180 | 360 | Default across the system |
| Conic shine | 7s | 168 | 210 | 420 | Placeholder label ring |
| Orbit | 24s | 576 | 720 | 1440 | Footer rings |
| Marquee | 40s | 960 | 1200 | 2400 | Logo and model rows |
Nothing pulses in unison
This is the rule that gives the product its living feel. Every repeating element gets its own duration and its own offset, derived from its id so it stays stable between renders. Five identical dots, five different rhythms.
| Cable comet | travel 1.7 to 3.2s, then a rest of 0.5 to 2.5s, both drawn from a hash of the link id |
|---|---|
| Tile shimmer | the three faces are offset by 0 / 0.5 / 1s so the sweep wraps the block |
| Ping rings | the second ring starts 0.6s after the first |
| Static beams | each card pins its gradient at its own angle |
Ambient loops
Running examples of the loops that carry the brand when nothing is happening.
Everything above is gated behind the reduced motion setting. When it is on, loops stop on their last frame, the cable comets are hidden entirely, and transitions are removed rather than shortened. Any launch material should have a version that reads without motion.
The isometric board
This is the product, and it is the brand. Agents are blocks sitting on an isometric grid, grouped inside spaces, wired to each other and to the tools they use. Everything else on this page exists to support it.
How the projection is built
It looks like 3D but there is none, which matters if this has to be rebuilt in a 3D tool. Each block is a flat diamond clipped out of a square, with two parallelograms sheared underneath it and darkened by a fixed amount. There is no perspective and no light source, so the geometry stays pixel sharp at any zoom.
| Tile | 56 x 28 px, a 2:1 diamond, clip-path polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) |
|---|---|
| Block height | 7px, the two side faces |
| Left face | skewY(26.565deg) from its top left, brightness 0.7 |
| Right face | skewY(-26.565deg) from its top right, brightness 0.5 |
| Grid position | left = (col - row) x 28, top = (col + row) x 14 |
| Agent footprint | 2 x 2 cells, so 112 x 56 px |
| Flat plane | rotateX(60deg) rotateZ(45deg), no perspective, to lay artwork on the top face |
| Edges | SVG polygon, 1px stroke at 0.2 white, plus verticals at 0.15 |
| Depth order | z-index = col + row, so anything further back is drawn first |
| Default zoom | 1.8 on desktop, 1.0 on mobile |
26.565 degrees is not arbitrary: it is the angle whose tangent is 0.5, which is exactly what a 2:1 diamond needs for its side faces to meet the top without a seam. Same reason the flat plane uses 60 degrees, whose cosine is 0.5.
Agent states
Five states, each with its own color, glow and behaviour. Working shimmers, error pulses, waiting sends out ping rings and raises a hand, offline just dims. Press replay to watch them land.
| Idle | #165dfc, stripes on hover only |
|---|---|
| Working | #f59e0b, shimmer sweep 4s, faces offset by 0.5s and 1s |
| Error | #ef4444, red overlay pulsing 0.15 to 0.5 alpha, 0.8s |
| Waiting for a human | #06b6d4, two ping rings 2s apart by 0.6s, cyan hand 18px above |
| Offline | muted gray at 0.45 opacity, no glow |
| Lift | selected or hovered rises 6px in 200ms, dragged rises 12px and scales 1.05 |
Links
Two kinds of wire, routed as right angles along the isometric axes so the board reads like a circuit. A beam is one agent calling another. A cable is an agent talking to an outside tool.
| Beam | sheath at 0.12 white width 3, a blurred glow in the space color width 2, and a dashed current |
|---|---|
| Beam current | dash 6 16, stroke-dashoffset animated over 1.2s, endlessly |
| Cable | a single hairline at 0.18 white, corners rounded at 5px |
| Comet | a 2.5px green streak riding the path, from transparent to #4ade80 at the head |
| Comet trail | length is 16% of the cable, clamped between 8 and 26px |
| Comet timing | travel 1.7 to 3.2s, rest 0.5 to 2.5s, both derived from the link id |
Toasts
What an agent says while it works. A small pill floats above the block, its text scrambling into place like a decrypt, a light sweeps across it, then it leaves upward.
| Position | 38px above the tile |
|---|---|
| In | 280ms on the house curve, from y +6 and scale 0.92 |
| Hold | 3.5s |
| Out | 400ms ease-in, to y -5 and scale 0.96 |
| Decrypt | 520ms, characters resolving left to right out of !<>-_/[]{}=+*#%&@$ |
| Shimmer | a 110 degree sweep across the pill, 2.4s |
| Success | text rgb(52,211,153) on rgba(6,78,59,0.82) |
| Question | text rgb(34,211,238) on rgba(8,51,68,0.82) |
| Info | text rgb(161,161,170) on rgba(24,24,27,0.82) |
| Type | mono, 8px, tabular numbers, white at 95% |
A full board
Three agents, each wired to the tools it uses. This is the shape the product takes once someone has actually built something.
Rules
The short version. Everything above is detail, this is what breaks the brand when it is ignored.
Do
- Let things settle. Motion decelerates into place and stops.
- Give every repeating element its own tempo and offset.
- Keep one saturated color on screen at a time.
- Separate surfaces with a hairline and a change of value.
- Set headings at weight 500, with tight tracking on display sizes.
- Treat light and dark as equals. Both are shipped, both are used.
- Write copy in English, sentence case, no exclamation marks.
- Use the real product board. It is the strongest asset the brand has.
Do not
- No zoom or scale on hover, on an image or on a card. Feedback is color, border or opacity.
- No em dashes anywhere in copy.
- No easing that overshoots and comes back.
- No drop shadow used as decoration. Depth comes from the relief tokens.
- No large surface filled with the brand violet.
- No recoloring a third party logo by hand. Keep official colors; use auto-white only for dark monochrome marks on dark surfaces.
- No perspective on the isometric board. It is a flat 2:1 projection.
© 2026 Rerun. All rights reserved.