Lagoon
Deep teal terminal for serious on-chain infrastructure.
For DeFi, trading, analytics, infra.
- Palettes
- Lagoon, Deep Sea, Amber Desk
- Type
- Space Grotesk, Inter, JetBrains Mono
- Motion
- Snappy
- Mode
- Dark
A dark teal terminal for serious on-chain infrastructure: exact, dry and live.
Why
Infrastructure projects usually ship plain app shells. Lagoon speaks the same terminal language but adds craft: a full-screen decode band and labels led by small glyphs.
Hero
A field of teal dots glows around the pointer, with the headline bottom-left. A ticker strip runs along the bottom with price, holders and 24h, or dashes when there is no data.
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
Provably fair coinflip, one click, on-chain.
A provably fair coinflip game.
01 Display
Space Grotesk
02 Text
Inter
03 Accent
JetBrains Mono
The Sticky Index
The three feature titles stay fixed on the left, the active one lit in mint. On the right, generated panels change with them: a terminal log, a sparkline, a cell map.
- 01Hero: teal dot field, ticker strip at the bottom
- 02Decode Wall: $TICKER decodes from glyph noise
- 03Sticky feature index with live panels
- 04Steps as a terminal run with typed lines
- 05Token as a big stat bar that counts up
- 06Mono accordion FAQ
- 07Closing line with a blinking caret
Snappy: 0.7s moves, scrambling labels, counters.
Signature
The Sticky Index
The three feature titles stay fixed on the left, the active one lit in mint. On the right, generated panels change with them: a terminal log, a sparkline, a cell map.
Moment
Decode Wall
A full screen of mono glyph noise keeps scrambling while the middle row decodes into $TICKER in bright mint. The decoded row then grows as the noise fades.
- 01Transitions are quick, around 0.7s, with no float.
- 02Labels and button text scramble briefly before they settle.
- 03The ticker decode takes 1.6s while the noise rows keep scrambling around it.
- 04Token numbers count up when they come into view.
- 05The closing headline types itself in behind a caret.
Built with
- Smooth scroll
- Scroll reveals
- Magnetic buttons
- Text scramble
- Number counters
- Typewriter
Opens with a short loader intro, once per visit. Under reduced motion, everything lands in place.
The small parts.
- Nav
- Inset bar, 52px, over a 1px teal hairline, mono links 11px, a LIVE chip at right with a 2s pulse
- Buttons
- Radius 6, 40px, mint fill with dark text; secondary is a 1px mint outline at 40%; hover scrambles the label
- Panels
- #12201F, 1px teal border at 30%, radius 10, with an 8px dot grid at 6% opacity
- Cursor
- A 12px square that snaps to an 18px grid, on the hero only
- Radii
- 6 and 10
- Grain
- None; 2px scanlines at 3% on panels only
- Numbers
- Tabular figures everywhere
- Type
- Space Grotesk display, Inter text, JetBrains Mono labels
[Outcome] at [speed/scale]. Or three beats: [Noun]. [Noun]. [Noun]. Max 8 words.
Tone: exact, dry, confident.
Button verbs
- Open
- Start
- Run
- Read
Mono labels with a glyph prefix (● LIVE, ✳ INDEX, > RUN), and section titles as lowercase paths like /features above the heading.
Token
The ticker strip has a local tick counter that advances every 400ms, and the first panel prints feature titles as events with millisecond timestamps; both are decorative.
Start with Lagoon.
Use this look