One system. Many forms.

Dark is the default. Light swaps the two inks on each surface and everything on it follows, so nothing is colored by hand. These are all the colors the site uses. Press one to copy it.

• wavy

  WordmarkHanken Grotesk 700
  45.92vw / 1

• Your product deserves to shine.

  DisplayInter 500
  6rem / 1, -0.045em

• The scarce thing isn’t output anymore.

  StatementInter 500
  2.25rem / 1.15, -0.025em

• Foundation

  TitleHanken Grotesk 700
  3rem / 1, -0.045em

• wavy embeds with startups, agencies, and companies as the creative department they haven’t hired yet.

  BodyAkagi Pro 500
  1.21rem / 1.5

• Start here

  LabelAkagi Pro 500
  0.9375rem / 1

• Move over it. Press to reshape.

  HintInter 400
  0.75rem / 1

• tokens.json

  CodeSystem mono 500
  0.9375rem / 1

The frames are drawn at 1920 by 1080, where one rem is sixteen pixels. The root scales with the window, so the whole page grows and shrinks as one piece.

• The unit1rem
• The frame--frame-top, 3.75rem
• The gutter--gutter, 8.5rem
• Between sections12rem

Three curves do all of it. When one thing becomes another it lands on the pixel and swaps on the spot, with nothing to fade between. Hover or press to run them.

Buttons

See the work Let’s talk

The pill, hover it

Choices

Still an idea Growing fast Live and finding its feet

Text link

Watch it happen at @bytomrich.

Checklist, hover it

• tokens.jsonColor, type, space, wired to code
• motion.specEasing, timing, choreography

• Capability rowThe mark runs while the row is hovered and lands where it started.

One set of dots, many shapes. They run on a spring, the pointer pushes them around, and a press throws them into the next form.

• Sentence caseTitles, buttons, and labels. Capitals are for names.
• wavy, lowercaseEven at the start of a sentence.
• No em dashesUse a period. A comma if you must.
• The shorter spellingColor, favorite, traveling.