Signal
Swiss condensed type, signal red, an instrument and callouts.
For dev tools, analytics, APIs, data products.
- Palettes
- Signal, Graphite, Lab
- Type
- Big Shoulders Display, Inter Tight, JetBrains Mono
- Motion
- Snappy
- Mode
- Light
Swiss and confident: condensed type, a visible cell grid, one signal red and instrument details.
Why
The usual dev-tool page is black with orange and mono labels. Signal is the light Swiss counterpart in the same orange-red family, so it reads as infrastructure at once while looking nothing like it.
Hero
A three-line condensed uppercase headline stacks on the left above a copyable contract chip. On the right, a radial instrument of rings, ticks and dots reacts to the pointer, over a cell grid with + markers.
3 palettes, one accent at a time.
Pick a palette or an accent: this page switches to it. Click a color to copy it.
Swap the accent
Every kit can take one of these accents. The page above follows your pick.
3 faces, each with one job.
Specimen · hero headline
Non-custodial liquidity management, simplified.
A non-custodial liquidity manager.
01 Display
Big Shoulders Display
02 Text
Inter Tight
03 Accent
JetBrains Mono
Stretch and Callouts
The headline stretches and snaps back with scroll speed. Then the logo appears as exploded line art, with leader lines out to mono feature labels: FIG 0.1, 0.2, 0.3.
- 01Hero: condensed headline, radial instrument
- 02Callout diagram of the logo, FIG 0.1 to 0.3
- 03Steps as numbered rows under hard rules
- 04Split-Flap Board: $TICKER and the name
- 05Token as a spec sheet
- 06FAQ
- 07Closing: giant condensed BUY $TICKER
Tight: precise 200-400ms moves, stepped ticks.
Signature
Stretch and Callouts
The headline stretches and snaps back with scroll speed. Then the logo appears as exploded line art, with leader lines out to mono feature labels: FIG 0.1, 0.2, 0.3.
Moment
Split-Flap Board
A full-screen board of black flaps flips through random letters column by column and lands on $TICKER, the name and a live stat, all within 1.8s.
- 01Moves are short and exact, between 200 and 400ms.
- 02Each flap flips in 80ms, cycling a few letters before it lands.
- 03The headline and the closing button stretch taller with scroll speed.
- 04The instrument ring sweeps while the pointer is over it.
- 05On hover, a button's accent square grows to fill it in 200ms.
Built with
- Smooth scroll
- Scroll reveals
- Text scramble
- Magnetic buttons
- Number counters
No intro: the page is there at once. Under reduced motion, everything lands in place.
The small parts.
- Nav
- 48px bar on the cell grid with + markers, JetBrains Mono 11px links, black CTA with a 6px accent square
- Buttons
- Radius 0, 44px; on hover the accent square expands to fill in 200ms
- Cards
- None; spec rows under 2px black rules, with bracket tags at the corners
- Cursor
- A crosshair with live x/y readouts in 10px mono, on the hero only
- Radii
- 0
- Grain
- None
- Grid
- 1px #E5E5E5 cell grid at 64px
- Type
- Big Shoulders Display at 900, Inter Tight text, JetBrains Mono labels
Three uppercase lines: [WHAT IT IS] / [FOR WHOM or HOW FAST] / [VERB]. 2-3 words each, max 8 words.
Tone: exact, terse, confident.
Button verbs
- Read
- Run
- Install
- Start
- Copy
Labels like FIG 0.1, SPEC, [ INDEX ], REF. and § FAQ; section titles are uppercase, 1-3 words, numbered like 01 — SPEC.
Token
The instrument's outer ring carries 150 ticks labelled REF. 150, a decorative nod to fast confirmation times that claims no speed.
Start with Signal.
Use this look