TC Design System v1.0.0

Use it

Static tools:

<link rel="stylesheet" href="https://design-system.tools.tee.digital/v1.0.0/tc-core.css">

pnpm projects:

pnpm add https://design-system.tools.tee.digital/v1.0.0/package.tgz

Colour

Core Brand Colors

--tc-porcelain#FFFCF9

--tc-onyx#001109

--tc-pine#204737

--tc-lemon#CBEF44

Page Colors

--tc-bg#F9F7F2

--tc-surface#ffffff

--tc-border#e4e8e5

--tc-border-light#eef1ef

--tc-text-mutedrgba(0, 17, 9, 0.5)

Semantic aliases (for compatibility)

--tc-bg-card{tc-surface} = #ffffff

--tc-bg-subtle#f5f6f3

--tc-text{tc-onyx} = #001109

--tc-text-secondary{tc-pine} = #204737

--tc-accent{tc-lemon} = #CBEF44

--tc-accent-hover#b8dc2e

--tc-accent-text{tc-onyx} = #001109

--tc-focus-ringrgba(32, 71, 55, 0.25)

Type

Young Serif heading

h2 Young Serif

h3 Young Serif

Rethink Sans body. 'Rethink Sans', -apple-system, BlinkMacSystemFont, sans-serif

.tc-small .tc-muted

Spacing, radius, shadow

Spacing

--tc-space-xs4px

--tc-space-sm8px

--tc-space-md16px

--tc-space-lg24px

--tc-space-xl32px

--tc-space-2xl48px

--tc-space-3xl56px

Border Radius

--tc-radius-xs6px

--tc-radius-sm8px

--tc-radius12px

--tc-radius-lg14px

--tc-radius-xl16px

--tc-radius-2xl20px

--tc-radius-pill100px

Shadows

--tc-shadow-sm0 1px 3px rgba(0, 17, 9, 0.08)

--tc-shadow-md0 4px 12px rgba(0, 17, 9, 0.08)

--tc-shadow-lg0 12px 24px rgba(0, 17, 9, 0.08)

--tc-shadow-xl0 20px 60px rgba(0, 17, 9, 0.12)

--shadow-pine0 4px 16px rgba(32, 71, 55, 0.25)

Components

successwarning dangerinfoneutral

.tc-card

Surface card

.tc-card-lemon

Accent card

.card

Tool card