Liquid glass on gloss black.

L 1 L 1 L 1 L 1 L

Light Busy

• Letters only on dark surfaces. They are clear glass. They need black behind them.
• Use the tile on light or busy surfaces. It carries its own black.
• Keep clear space around it. The space equals the height of the letter L, on every side.
• Never recolor, stretch, outline or add effects. The glass is the effect.

Do not

• 

  Do not stretch it.

• 

  Do not recolor it.

• 

  Do not put the letters on a light surface.

Still needed: the original artwork. The logo came from the founder as a JPEG, and every mark on these pages was cut out of that one file. The real build needs the original artwork file.

Files

• mark-160 mark-400 mark-720The letters, on a clear background. Each one comes as .avif and .webp.
• tile-128 tile-320 tile-640The tile, with clear corners. Each one comes as .avif and .webp.
• favicon-32.png favicon-48.pngThe browser tab icon. Brighter letters on a black square, so it reads when tiny.
• icon-192.png apple-touch-icon.pngThe same square for home screens, at 192 and 180.

• GreenSearch and go.
• OrangeThe coin and getting paid.
• WhiteNeutral. Everything else.

No other accent colors. If a new color feels needed, the answer is green, orange or white.

Surfaces

• --ink-0#050605Base. The page itself.
• --ink-1#0a0c0aOne step up from the base.
• --ink-2#0f120fTwo steps up.
• --ink-3#161a16Three steps up.
• --ink-4#1e231eFour steps up.
• --ink-5#2a302aFive steps up. The lightest dark.

Lines

• --linergba(255,255,255,.09)Hairlines. Card edges, dividers, table rows.
• --line-2rgba(255,255,255,.16)Stronger edges. Tiles, chips, fields.
• --line-3rgba(255,255,255,.28)The strongest edge. Hover edges, dashed tags, the check box.

Text

• --text#f3f7f0Headings and main text.
• --text-2#c9d2c5Body copy, leads, chip labels.
• --text-3#98a294Quiet text. Captions, hints, table heads.

Green

• --green#63d936The base green. Fills, step numbers, the selected tab.
• --green-hi#8cf060Green text on dark. Links, eyebrows, the focus ring.
• --green-pale#bdf5a5Text on green tinted pills.
• --green-deep#2c8a18The shadow side of the glass. Spare
• --green-ink#051402Text on green fills.

Orange

• --orange#ff8a24The base orange. The coin, orange steps, solid pills.
• --orange-hi#ffa94fOrange text on dark. Amounts coming in, orange links.
• --orange-pale#ffd6abText on orange tints. The balance chip.
• --orange-deep#b3560bThe shadow side of the glass. Spare
• --orange-ink#1d0d00Text on orange fills.

Bone, white and danger

• --bone#eef3eaThe light band.
• --white#fffPure white. The white button and hover text.
• --danger#ff6b5eErrors only. Field edges and error text.

Contrast

Every pair below clears 7 to 1, the strictest WCAG level for normal text. The numbers are worked out on this page, from the live tokens, with the WCAG relative luminance formula.

• Aa--text on --ink-018.72 to 1AAA
• Aa--text-2 on --ink-013.06 to 1AAA
• Aa--text-3 on --ink-07.66 to 1AAA
• Aa--green-ink on --green10.39 to 1AAA
• Aa--orange-ink on --orange8.03 to 1AAA

• Display

  Get paid.

  Gabarito --display

  Headings and big numbers. Weight 800, set tight.

• Text

  Plain words, easy to read on a phone.

  Figtree --sans

  Everything else. Body copy, buttons, labels, fields.

• Code

  var(--green)

  Geist Mono --mono

  Code and key caps only. Never for copy or labels.

The scale

Sizes flex with the screen. Each line below is set live with its token, and the pill shows its size on this screen right now.

• Search.

  --fs-heroclamp(2.75rem,10.5vw,5.75rem)

• Do business.

  --fs-h1clamp(2.3rem,7vw,4.1rem)

• Get paid.

  --fs-h2clamp(1.8rem,5vw,2.9rem)

• A card or group heading

  --fs-h3clamp(1.22rem,2.6vw,1.5rem)

• The one sentence that sits under a headline.

  --fs-leadclamp(1.06rem,2.3vw,1.24rem)

• Body copy. Seventeen pixels with room between the lines, so it reads on a phone held at arm's length.

  body1.0625rem / 1.58

Weights in use

• Aa400Figtree. Body copy.
• Aa500Figtree. Nav links, chips, typed text.
• Aa600Figtree. Small labels, toasts, the tab bar.
• Aa700Figtree. Buttons, pills, eyebrows, bold text.
• Aa800Gabarito. Headings and big numbers.
• Aa900Gabarito. The giant step numbers on the home page.

Small rules

Heading tracking

-.012em

Heading line height

1.04

Body line height

1.58

Eyebrow

.78rem, 700, caps, .15em tracking

Numbers in columns

.num for even digits

Line breaks

Headings balance, paragraphs wrap pretty

Radius

• --r-xs8pxSmall parts. Spare
• --r-sm12pxSmall controls. Spare
• --r-md18pxNotes and toasts.
• --r-lg26pxCards and steps.
• --r-xl38pxTiles.
• --r-pill999pxButtons, chips, pills, tabs, the tube.

Layout

Mind the tab bar. On phones it covers the bottom 64 px of the screen. The body already pads itself by --tabbar. Anything fixed to the bottom has to sit above it.

Section rhythm

Breakpoints

760 px

Gutters grow. The tab bar leaves. Two column grids start. Sheets move to the middle.

900 px

Three column grids, the split, and steps in a row.

1020 px

The desktop nav shows.

1040 px

Four column grids.

Easing and time

• --ease cubic-bezier(.2,.7,.2,1)

  The default. Fast out, soft landing. Reveals, hovers, sheets.

• --spring cubic-bezier(.34,1.45,.5,1)

  A small overshoot. Toasts, the go button, the check mark.

• --t-1 .16s Hover and press.

• --t-2 .34s Sheets, menus, toasts.

• --t-3 .7s Long moves. Spare

The rules

• Transform and opacity only. Nothing that moves is allowed to push the layout around.
• Headings slide but never fade. Add data-solid so the biggest words are there at once.
• Everything respects reduced motion. The page tag gets calm and all of it holds still, fully visible.
• Loops pause off screen. And decorative motion lives under .anim, never outside it.

Motion is off here. Your device asks for reduced motion, so nothing on this page moves. That is the rule doing its job.

Named moves

fade rise drop sink shimmer pour blink floaty spin