01 The Foundation

Design Tokens

Two layers: primitive values and the semantic aliases that consume them. The primitive palette renders live from MGT_TAILWIND_COLORS, and every text token is graded live with GenerateContrastBadge.

Color · Semantic Layer role → primitive

Semantic tokens name intent, not hue. Build with these; never reference a raw hex in product code.

Token	Value	Primitive	Usage	On White
`--accent`	#8A2BE2	purple	Primary actions, links, focus	AA6.0
`--accent-deep`	#5B1EA2	purpleDark	Hover, pressed states	AAA9.8
`--accent-soft`	#F7F1FF	purple/5	Selected rows, tint fills	Fill
`--text-strong`	#171717	neutral-900	Headings, body	AAA18
`--text-muted`	#737373	neutral-500	Secondary text, captions	AA4.7
`--hairline`	#E9E7E2	neutral-150	Card borders, rules	Line

Color · Status

Token	Value	Badge	Use
`success`	#C0D42F	Success	Live, paid, confirmed
`warning`	#FEC600	Warning	Draft, pending, attention
`error`	#FF2768	Error	Failed, destructive, invalid
`info`	#4483DB	Info	Neutral notices, hints

Primitive Palette live · MGT_TAILWIND_COLORS · GenerateColorSwatch

Sourced directly from @generators/commons and rendered with the GenerateColorSwatch primitive. These are the raw hues the semantic layer aliases.

primary

yellow#FFD700yellowLight#FFE140yellowLighter#FFEB80yellowLightest#FFF5BFyellowDark#D7AF06yellowDarker#AF870DyellowDarkest#865F13brown#5E3719

secondary

orange#FF5733orangeLight#FF8F1AorangeLighter#FEAA0Dblue#1E90FFblueStriking#0F18DBgreen#32CD32greenDark#96B729greenDarker#6C9A24greenDirty#186018greenStriking#00FDDCpink#FF69B4pinkLight#F69ED0pinkDirty#AF2E77pinkStriking#FF2768red#FF4500redDeep#BE0000redDirty#89023Epurple#8A2BE2purpleLight#C0A3E3purpleDark#5920B3purpleDirty#2F007E

status

success#C0D42FsuccessLight#E6EEAAwarning#FEC600warningLight#FAEAB0error#FF2768errorLight#FAC7C7info#4483DBinfoLight#DAE6F8extra#872A96extraLight#F2DDF5

Type Scale Poppins / Inter

mgt-h1Show Up36 / 48 · 700

mgt-h2Show Up28 / 40 · 600

mgt-h3Show Up20 / 32 · 600

mgt-titleShow Up18 / 24 · 600

mgt-bodyShow Up16 / 24 · 400

mgt-fineShow Up12 / 16 · 400

Spacing & Radii

space-1 · 4

space-2 · 8

space-4 · 16

space-6 · 24

space-8 · 32

space-12 · 48

sm 8

md 10

card 14

pill

Elevation 5-step shadow scale

shadow-0

shadow-sm

shadow

shadow-lg

shadow-xl

Motion

fast · 120ms

hover, tap

base · 180ms

most UI

slow · 280ms

panels, sheets

ease-out

(.2,.8,.2,1)

Breakpoints & Z-Index

xs

< 480 · mobile

sm

640

md

768 · card drops chrome

lg

1024 · sub-page wrap

xl

1280

z-index: base 0 · sticky 10 · dropdown 40 · drawer 50 · dialog 60 · toast 80