DESIGN SYSTEM

The pieces behind this site.

Two typefaces, one purple, and a handful of components, each in light and dark mode. Every color here is read live from the site’s CSS, so this page is always up to date.

Color

Every color is a token named for its job, with one value for light mode and one for dark. Text colors pass WCAG AA (4.5:1) against the page in both modes.

Type scale

Two typefaces: Crimson Text for headings, Inter for everything you read or click. Each style is shown as the site uses it. (The full type scale adds every weight of its typeface.) Phone sizes take over below 760px wide.

Crimson Text · Headings

  1. display/titleCase study page title

    Font size: 56px / 3.5rem | Line height: 100% (56px) | Phone: 40px

    Live financial reporting

    Regular

    Italic

    SemiBold

    In use

    Bold

  2. display/sectionCase study section titles

    Font size: 56px / 3.5rem | Line height: 120% (67px) | Phone: 40px

    The problem

    Regular

    Italic

    SemiBold

    In use

    Bold

  3. heading/sectionHome section titles

    Font size: 40px / 2.5rem | Line height: 120% (48px) | Phone: 32px

    Work

    Regular

    Italic

    SemiBold

    In use

    Bold

  4. heading/dialogPassword title

    Font size: 40px / 2.5rem | Line height: 120% (48px) | Phone: 32px

    Enter password

    Regular

    Italic

    SemiBold

    In use

    Bold

  5. heading/pagerNext case study link

    Font size: 40px / 2.5rem | Line height: 120% (48px) | Phone: 24px

    Beacon: Parts →

    Regular

    Italic

    SemiBold

    In use

    Bold

  6. heading/introKonbini hero sentence (rotating word in Italic)

    Font size: 32px / 2rem | Line height: 131% (42px) | Phone: 24px

    I’m a Product Designer in Los Angeles

    Regular

    In use

    Italic

    SemiBold

    Bold

  7. heading/connectFooter

    Font size: 24px / 1.5rem | Line height: 120% (29px) | Phone: 24px

    Let’s connect

    Regular

    In use

    Italic

    SemiBold

    Bold

  8. heading/mStat numbers, lede line

    Font size: 24px / 1.5rem | Line height: 150% (36px) | Phone: 24px

    75%

    Regular

    Italic

    SemiBold

    In use

    Bold

  9. body/cardHome card description

    Font size: 20px / 1.25rem | Line height: 105% (21px) | Phone: 20px

    A live-data dashboard feature that puts reporting in finance teams’ hands

    Regular

    In use

    Italic

    SemiBold

    Bold

  10. heading/sStep titles, card titles

    Font size: 18px / 1.125rem | Line height: 150% (27px) | Phone: 18px

    1. Building a widget

    Regular

    Italic

    SemiBold

    In use

    Bold

  11. nav/linkNav links (logo in Bold)

    Font size: 16px / 1rem | Line height: 137% (22px) | Phone: 20px

    Work   Resume   About   Connect

    Regular

    In use

    Italic

    SemiBold

    Bold

Inter · Body, labels, buttons

  1. label/eyebrowLabel above the case study title

    Font size: 24px / 1.5rem | Line height: 150% (36px) | Phone: 20px

    CUBE: BOARDS

    Regular

    In use

    Medium

    SemiBold

    Bold

  2. label/metaRole / Timeline / Summary labels

    Font size: 18px / 1.125rem | Line height: 150% (27px) | Phone: 18px

    ROLE

    Regular

    Medium

    SemiBold

    In use

    Bold

  3. body/lCase study paragraphs (bold words in Bold)

    Font size: 18px / 1.125rem | Line height: 137% (25px) | Phone: 18px

    Finance teams relied on a third-party tool that didn’t feel like Cube.

    Regular

    In use

    Medium

    SemiBold

    Bold

  4. body/mStep text, captions

    Font size: 16px / 1rem | Line height: 137% (22px) | Phone: 16px

    Step text, captions and the password description.

    Regular

    In use

    Medium

    SemiBold

    Bold

  5. button/textText buttons, password button

    Font size: 16px / 1rem | Line height: 137% (22px) | Phone: 16px

    View case study -->

    Regular

    Medium

    In use

    SemiBold

    Bold

  6. body/sCard labels, chips, field label

    Font size: 14px / 0.875rem | Line height: 137% (19px) | Phone: 14px

    CUBE: COMMENTS

    Regular

    In use

    Medium

    SemiBold

    Bold

  7. body/xsError message, colophon (italic)

    Font size: 12px / 0.75rem | Line height: 137% (16px) | Phone: 12px

    Jen Chung © 2026. Designed + AI coded by me with care & matcha

    Regular

    In use

    Medium

    SemiBold

    Bold

Components

The real components from the site, in both modes at once.

Light

Enter View case study -->
  • Finance
  • C-Suite
  • Investors

75%

adoption across 500 customers

Recurring Budget v Actuals

  • Finance
  • Budget Owners

Finance builds a board, shares it with stakeholders, and has recurring monthly results reviews.

Default
Focused
Focused populated
Completed
Error

Incorrect password. Try again.

Disabled
Default
Hover
Focus
Pressed

Dark

Enter View case study -->
  • Finance
  • C-Suite
  • Investors

75%

adoption across 500 customers

Recurring Budget v Actuals

  • Finance
  • Budget Owners

Finance builds a board, shares it with stakeholders, and has recurring monthly results reviews.

Default
Focused
Focused populated
Completed
Error

Incorrect password. Try again.

Disabled
Default
Hover
Focus
Pressed
Button
Pill, 13 × 32 padding, accent background. Darker on hover in light mode, lighter in dark.
Text button
Accent text, the arrow nudges right on hover.
Chip
Pill outline, in two colors. Gray (secondary khaki) for tags like Finance; purple (accent hover outline, heading text) for “In use” in the type scale.
Outlined card
Two types: Stat (a number over a line of text, centered) and Chip (title, chips, then text). 1px border, radius m (16). Solid purple in light, a purple gradient in dark.
Input
Underline only, in six states: default, focused and focused while typing (purple), completed, error (red, with the message under it) and disabled (gray). Its label sits above it in body/s; the password form hides the label but screen readers still read it.
Back to top
44px circle, 1.5px rule outline (the icon’s stroke weight), gray Heroicons arrow-up. Sits right-aligned above the pager line, hidden until the visitor reaches the last section (e.g. Reflection), then pops in 1s later with a slight bounce. Purple on hover, focus and press; the arrow nudges up on hover and the button shrinks a little when pressed.
Nav bar
64px tall. On desktop: the logo, the links and the theme switch; Work opens a menu of the case studies. On phones the links move into a menu behind the ☰ button. The current page is underlined.
Footer
“Let’s connect” (heading/connect) with email and LinkedIn links, then the colophon (body/xs, italic). Centered, on every page.

Icons

One set: Heroicons, outline with a 1.5 stroke, solid for the active light/dark icon. The only exception is the LinkedIn logo.

  • sun
  • sun · solid
  • moon
  • moon · solid
  • bars-3
  • x-mark
  • envelope
  • arrow-long-left
  • arrow-long-right
  • chevron-left
  • chevron-right
  • chevron-down
  • chevron-up
  • arrow-up
  • LinkedIn · Font Awesome

Shape

Five corner radii, and one content column.

  • radius/xs 4 · focus ring
  • radius/s 8 · images, icon buttons
  • radius/m 16 · outlined cards
  • radius/l 20 · home cards
  • radius/pill · buttons, chips, switch
layout/content
1022px wide content column
layout/gutter
16px on phones, 24px from 760px wide
layout/nav-height
64px