Henaho LabsStart a project

Design system@henaho/design-system · v2

Everything on this site comes from @henaho/design-system: tokens, base styles, motion and the components. This page renders them live from the same CSS, so it can't drift. Switch the theme in the header to see both sides of every colour.

Tokens

Colour

Every colour is a light-dark() pair. Switch the theme to see both.

Studio canvas

  • Paper--color-paper#0E0E14 dark / #F4F4F0 light
  • Paper raised--color-paper-raised
  • Paper sunken--color-paper-sunken
  • Ink--color-ink#F2F2EE dark / #0E0E14 light
  • Ink muted--color-ink-muted
  • Line--color-line

Accents

  • Lime--color-lime#D4FF3A, a fill with ink on it
  • Accent text--color-accent-textLime on ink, olive on paper
  • Lilac--color-lilac#B9A6FF, glows and gradients
  • Lilac text--color-lilac-textAA in both themes

Product canvases

  • Gbege--color-gbege-canvas#00774A, white text
  • Nzuko--color-nzuko-canvas#4F52CB, white text
  • Nzuko record--color-nzuko-record#FF5151, ink text
  • Held--color-held-canvas#2338C8, white text
  • Held saffron--color-held-saffronProtected money only

Tokens

Type

Bricolage Grotesque for display, Inter for text, JetBrains Mono for labels and code.

  • --text-displayDisplay: built with taste
  • --text-3xl3XL: built with taste
  • --text-2xl2XL: built with taste
  • --text-xlXL: built with taste
  • --text-lgLarge: built with taste
  • --text-mdBody: built with taste
  • --text-smSmall: built with taste
  • --text-xsMono label: built with taste

Tokens

Space and radius

  • --space-1
  • --space-2
  • --space-3
  • --space-4
  • --space-5
  • --space-6
  • --space-7
  • --space-8
  • --radius-sm
  • --radius-md
  • --radius-lg
  • --radius-xl
  • --radius-pill

Tokens

Motion

Expo for arrivals, quart for interface, in-out for things crossing the screen, a spring only where a finger or cursor touches. Only transform, opacity and clip move. Everything below is running on the real tokens.

Easing · 1.4 s loop

  • Expo out--ease-out-expo
    Arrivals: headlines, plates, page reveals
  • Quart out--ease-out
    UI feedback: hovers, menus, toggles
  • In-out--ease-in-out
    Things crossing the screen, the page wipe
  • Spring--ease-spring
    Touch only: presses, the great hop

Duration · bar length to scale, fill in real time

  • --duration-instant Presses, colour on hover
  • --duration-quick Menus, the old page fading
  • --duration-base Most UI movement
  • --duration-page The colour wipe between pages
  • --duration-slow Springs, plates settling
  • --duration-scene Headline words rising

Mask rise · --stagger-word · hover the accents
Magnetic pull · --ease-spring on release
Press · --duration-instant down, spring up

Components

Buttons, links and tags

NeutralAccentProtectedIn developmentPre-releasePre-launch
A text link

Components

Cards and code

astro
---
import Button from '@henaho/design-system/components/button.astro';
---

<section data-product="nzuko">
  <Button variant="product">Record</Button>
</section>