Grum Design System

Public Design System of the Grum websites. By clicking on download - you can download the whole design system.

Synced sources:

grum-main

Core DS Library

www.grum.so

Full view is locked

Define how colors and tokens should be used across your app.

Color tokens

Define how colors and tokens should be used across your app.
As the app grows we repopulate the designs for your review.

Name

Value

Type

Github Library

Figma Library

white

#FFFFFF

primitive

--white

White

dark

#DBE2E6

primitive

--dark

Dark

base

#1C8EF1

primitive

--primary-base

Primary/base

light

#EDF4FF

primitive

--primary-light

Primary/light

base

#EB2E03

primitive

--error-base

Error/base

light

#FFE4DE

primitive

--error-light

Error/light

faded

#EB2E03

primitive

--error-faded

Error/faded

primary

#21303A

primitive

--text-primary

Text/primary

secondary

#5E6970

primitive

--text-secondary

Text/secondary

tertiary

#9F9F9F

primitive

--text-tertiary

Text/tertiary

light

#FBFCFC

primitive

--light

Light

white (60)

#FFFFFF

primitive

--fade-white-60

Fade/white-60

dark (20)

#000000

primitive

--fade-dark-20

Fade/dark-20

dark (15)

#000000

primitive

--fade-dark-15

Fade/dark-15

dark (10)

#000000

primitive

--fade-dark-10

Fade/dark-10

base

#8BD13F

primitive

--green-base

Green/base

faded

#68D13F

primitive

--green-faded

Green/faded

base

#654DC4

primitive

--variant-base

Variant/base

faded

#654DC4

primitive

--variant-faded

Variant/faded

button

--base

semantic

--button

button

Color Guidelines

Treat the token table as the only color source. Do not pick a hex by eye, remix a swatch, or add a new color. Page canvas is --background, raised surfaces are --white, and --dark is a quiet fill — never body text. Type uses --text-primary for titles and body, --text-secondary for supporting copy, --text-tertiary for meta and timestamps, and --text-light only on saturated fills. Fade tokens are hairlines, dividers, and overlays, not type.

Map intent, not appearance. --semantic-button / --primary-base fill primary actions; --primary-light is the tint behind them. Error stays in its family: base for icon and message, light for the chip, faded for a wash. Green means synced or success; variant is a non-status accent. If a control has no matching token, reuse the closest semantic role or leave it locked — never approximate. This page is the harness: UI and agents should consume these names so the product cannot drift.