Tokens – Hack Club design system

.card {
  background: var(--hc-surface);
  border-radius: var(--hc-radius-card);
  box-shadow: var(--hc-shadow-card);
  font-family: var(--hc-font-display);
  transition: transform var(--hc-duration-medium) var(--hc-ease-playful);
}

Palette

Hack Club's brand colours, from our brand guide. These stay the same in light and dark mode.

Red--hc-red#ec3750

Orange--hc-orange#ff8c37

Yellow--hc-yellow#f1c40f

Green--hc-green#33d6a6

Cyan--hc-cyan#5bc0de

Blue--hc-blue#338eda

Purple--hc-purple#a633d6

Gray--hc-gray#8492a6

Neutrals & accessible reds

Brand red is only 4.0:1 on white. For text smaller than 24px, use --hc-red-text, which switches between red-dark and red-light with the colour scheme.

Ink--hc-ink#17171d

Ink 2--hc-ink2#2e1719

Black--hc-black#000000

Paper--hc-paper#ffffff

Cream--hc-cream#fff6eb

Red Dark--hc-red-dark#be1e3a

Red Light--hc-red-light#ff5c72

Light & dark

Semantic colours change with the colour scheme. Use these for backgrounds, text and borders rather than raw palette values.

light

background#ffffff

foreground#17171d

surface#f9fafc

surface-hover#f1f2f5

borderrgba(0, 0, 0, 0.08)

mutedrgba(23, 23, 29, 0.7)

nav-bgrgba(255, 255, 255, 0.82)

red-text#be1e3a

dark

background#17171d

foreground#fff6eb

surface#1f1f27

surface-hover#2a2a33

borderrgba(255, 255, 255, 0.08)

mutedrgba(255, 246, 235, 0.7)

nav-bgrgba(23, 23, 29, 0.82)

red-text#ff5c72

Typography

Headings use Zarathustra, a serif display face with a single weight (--hc-font-display). Everything else uses Phantom Sans (--hc-font-sans), in weights from 100 to 700 with italics. Body text is 20px.

--hc-text-display
clamp(3.25rem, 12vw, 5.625rem)

Hack Club

--hc-text-title
clamp(2.2rem, 4vw, 3.4rem)

Hack Club

--hc-text-heading
2.5rem

Hack Club

--hc-text-xl
2rem

Hack Club

--hc-text-lg
1.5rem

For teens, by teens.

--hc-text-body
1.25rem

For teens, by teens.

--hc-text-md
1.125rem

For teens, by teens.

--hc-text-sm
1rem

For teens, by teens.

--hc-text-xs
0.8rem

For teens, by teens.