Create

Chrome

Liquid chrome and glass: an orbiting hub, steel two-tone type.

For AI apps, consumer hardware-feel, wallets, agents.

Use this lookLive page
Fig. 07 · Chrome, top of the sample page
Chrome look, top of the sample page
Palettes
Chrome, Graphite, Mint Chrome
Type
Syne, Inter, Geist Mono
Motion
Calm
Mode
Light
01IdeaSheet 01/07

Surgical glass and liquid chrome: a polished hardware feel for AI apps, agents and wallets.

Why

Glass, liquid metal and AI-agent products define the polished end of this year. Chrome uses that light and refraction, with a two-tone headline that fades from ink to steel.

Hero

The logo sits in a glass disc at the centre, circled by six to eight rounded diamond tiles. A two-tone headline sits bottom-left, and a glass pill nav shows how far you have scrolled.

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 background16.2:1AAA
Muted on background4.6:1AA
Label on accent4.6:1AA

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

Follow the wallets that move first.

A smart-money tracker.

01 Display

Syne

02 Text

Inter

03 Accent

Geist Mono

04CompositionSheet 04/07

Refracting Orbit

The orbit slows under your pointer, and the tiles refract through a chrome surface that bends toward the cursor.

  1. 01Hero: logo disc with orbiting tiles
  2. 02Two-up glass cards
  3. 03Liquid Word: the name condenses from chrome
  4. 04Three steps with chrome numerals
  5. 05Token panel and FAQ
  6. 06Closing: the orbit collapses into the logo
Chrome look: the whole desktop page
Chrome look: the whole phone page
05MotionSheet 05/07

Smooth: soft springs and refractive hovers.

Signature

Refracting Orbit

The orbit slows under your pointer, and the tiles refract through a chrome surface that bends toward the cursor.

Moment

Liquid Word

The project name begins as melted chrome blobs and condenses into crisp letters as you scroll, its reflections bending with the pointer.

  • 01Tiles circle the logo and slow down when your pointer comes near.
  • 02Buttons catch a chrome sheen that sweeps across in 600ms.
  • 03Cards tilt up to 6 degrees toward the pointer.
  • 04On phones, a chrome gradient drifts through the name on a 6s loop.
  • 05At the end, the orbit collapses into the logo disc and the name types in.

Built with

  • Smooth scroll
  • Scroll reveals
  • Magnetic buttons
  • 3D tilt

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

06DetailsSheet 06/07

The small parts.

Nav
Centre glass pill, 44px, 16px blur, white at 55%, specular edges, scroll % in Geist Mono 11px
Buttons
Radius 999, 48px, ink fill with a 600ms chrome sheen on hover
Cards
Radius 28, white at 70%, 1px white inner border, one shadow tinted with the accent at 25%
Cursor
A 40px soft periwinkle lens on the hero only
Radii
28 cards, 999 buttons, 18 tiles
Grain
2% on the background only
Type
Syne display, Inter text, Geist Mono labels
07WordingSheet 07/07

[Capability]. [Softer consequence]. Two-tone: lead in ink, continuation in steel, max 9 words.

Tone: precise, polished, calm with a tech edge.

Button verbs

  • Try
  • Open
  • Meet
  • Start

Mono labels with a dot (● Agent, ● Model, ● Token, ● Help); section titles in sentence case, 5 words max, two-tone allowed.

Token

One orbiting tile is an agent chip that cycles the step titles as status lines, one every 400ms, a generic nod to on-chain AI agents.

Start with Chrome.

Use this look
Next lookNo. 08Lapis