Create

Cobalt

Cobalt blocks on a visible column grid, wide type, builder clarity.

For dev tools, L2 apps, builders, protocols.

Use this lookLive page
Fig. 03 · Cobalt, top of the sample page
Cobalt look, top of the sample page
Palettes
Cobalt, Inverse, Ink
Type
Archivo, IBM Plex Mono
Motion
Snappy
Mode
Light
01IdeaSheet 01/07

Builder clarity: a visible five-column grid, extra-wide type and two colours plus ink.

Why

Wide, extended numerals and strict two-colour systems mark the strongest builder pages this year. Cobalt goes stricter: two colours plus ink, with wide type used as architecture.

Hero

Five thin column rules stay visible. A huge uppercase headline spans the first four columns, and a square cobalt block holds the logo in the fifth.

02PaletteSheet 02/07

3 palettes, one accent at a time.

Pick a palette or an accent: this page switches to it. Click a color to copy it.

Text on background18.5:1AAA
Muted on background7.0:1AA
Label on accent8.4:1AAA

Swap the accent

Every kit can take one of these accents. The page above follows your pick.

03TypeSheet 03/07

3 faces, each with one job.

Specimen · hero headline

Recurring buys of any token, every hour, day or week.

A recurring-buy app.

01 Display

Archivo

02 Text

Archivo

03 Accent

IBM Plex Mono

04CompositionSheet 04/07

Grid Snap

Square modules snap into the grid in hard steps as you scroll, and the logo square tiles itself into a patterned band.

  1. 01Hero: uppercase headline on a five-column grid
  2. 02Logo tiled into a pattern band
  3. 03Feature rows: index, statement, paragraph
  4. 04Width Sweep: the name stretches across the grid
  5. 05Steps as three stacked cobalt slabs
  6. 06Token as a grid table, then FAQ rows
  7. 07Closing cobalt slab with the ticker
Cobalt look: the whole desktop page
Cobalt look: the whole phone page
05MotionSheet 05/07

Crisp: stepped snaps in 0.5s, no blur.

Signature

Grid Snap

Square modules snap into the grid in hard steps as you scroll, and the logo square tiles itself into a patterned band.

Moment

Width Sweep

The project name starts narrow in the middle column and widens in 12 hard steps until it fills all five, while a cobalt fill sweeps in behind the letters.

  • 01Movement happens in visible steps, like a mechanism clicking into place.
  • 02Transitions take 0.5s and are never blurred.
  • 03On hover, a button's accent edge slides to full width in six steps over 300ms.
  • 04The name widens in 12 hard increments, in time with the grid.
  • 05A build log under the hero cycles through the step titles.

Built with

  • Smooth scroll
  • Text scramble
  • Scroll reveals
  • Magnetic buttons
  • Number counters

No intro: the page is there at once. Under reduced motion, everything lands in place.

06DetailsSheet 06/07

The small parts.

Nav
Full-width 48px bar on the five columns: square logo cell left, links in column 4, cobalt CTA cell in column 5
Buttons
Radius 0, 48px, with a 4px accent edge on the left that fills the button on hover in 300ms
Cards
None; square modules with a 1px ink border and 24px padding
Cursor
A 16px crosshair on the hero only
Radii
0 everywhere except the step slabs (24)
Grain
None
Grid
5 columns with 1px rules at 10% ink, visible in every section
Type
Archivo extra wide at 800 for display, Archivo text, IBM Plex Mono labels
07WordingSheet 07/07

[VERB] [OBJECT]. [VERB] [OBJECT]. Two short imperative clauses in capitals, max 6 words.

Tone: imperative, short, technical but plain.

Button verbs

  • Build
  • Start
  • Read
  • Deploy

Mono column indexes like 01 / 05 plus SPEC, BUILD, SHIP, TOKEN and FAQ; section titles are uppercase, 2 words max.

Token

A mono build log under the hero cycles the step titles with a check mark and a fixed, decorative timing.

Start with Cobalt.

Use this look
Next lookNo. 04Wasabi