There is no Flutter design system and no web design system. There is one system — colour, type, spacing, shape, motion — and two renderers that draw it. Naming the halves by platform is what makes them drift.
loke.tokens.jsoncanonical sourcetokens.dartloke_flutter · mobileloke-tokens.cssloke-design-system · webtokens.cssmarketing · tokens onlyGenerated, never transcribed. Every consumer vendors a copy and gates on drift; hand-editing a generated file is a red build, not a slow divergence.
What every renderer agrees to. These are the rules that survive a platform change — the parts that are genuinely one system rather than two implementations that happen to match today.
Primitives read tokens only and change almost never. Patterns read tokens and primitives. Domain reads anything and changes constantly.
The lower two must never import a model or a service. That single constraint is what keeps them reusable instead of slowly accreting product knowledge — and it is enforced by a script, not a doc comment.
| Layer | Flutter | Web |
|---|---|---|
| Primitives | lib/ui/ | src/components/ui/ |
| Patterns | lib/patterns/ | src/components/loke/ |
| Domain | lib/widgets/ | src/components/app/ |
A component asks for surface-raised, never neutral-800. Reaching past a role into a ramp position is the thing that makes a theme swap impossible, so it is a bug even when it looks right.
Roles are the same nine names on both platforms. The ramps behind them are an implementation detail of the theme.
A role is family + weight + case + tracking. Size is an independent axis passed at the call site, so a new size is a parameter rather than a new token.
Tracking is stored in em and multiplied by size, so letter-spacing stays proportional instead of being hand-tuned per constant.
Colour, type, logo and icon family are shared. The component set is not, and that is deliberate.
Product UI optimises for density and repetition — the same row, nine hundred times, has to be quiet. Marketing optimises for expression and the one-off. Force one component set on both and marketing pages start to look like a settings screen, so marketing quietly stops using the system at all.
The galleries are necessarily separate — Flutter renders Flutter, React renders React. They show the same system drawn twice, from the same tokens.
Generated from loke.tokens.json at build time. If a value here is wrong, the source is wrong — there is nowhere else to fix it.
12 hues × 5 stops. Five steps, not ten — a ramp you can hold in your head.
#FFEFED#FFBFB7#FD4A46#CD2026#9C0011#FFF0E9#FFC1A2#FC7922#B95200#893B00#FCF2E2#F7D08E#FFB800#976C00#704E00#ECF8E2#C3F297#99EC09#548500#3C6200#E7FAE5#9EE798#08BF0D#008E03#006902#E6F9F0#96E4C5#06DBA5#008966#00654A#E5F8F9#9FEEF3#20E9F3#00858B#006266#EAF5FF#A8D7FF#3DABFA#007ABF#005A8E#EEF3FF#BCD1FF#3965FF#1F3FCE#0E19A0#F2F2FF#CDCAFF#692FEE#4A00B5#2C0073#FCEEFF#F4B8FF#C416DF#9200A7#660075#FFEEF4#FFBAD3#F73B99#C70175#930055Cool-tinted, so greys sit under the brand red without going muddy.
#FFFFFF#F8FAFD#F0F3F6#E2E5EA#CCD0D5#ADB1B7#8E9399#70747A#5A5E63#3A3D42#2B2E32#1E2124#1C1C1C#090A0DWhat components actually read. Two themes, one set of names.
| Role | Light | Dark |
|---|---|---|
bg |
#FFFFFF |
#1C1C1C |
surface |
#F8FAFD |
#1E2124 |
surface-raised |
#FFFFFF |
#3A3D42 |
surface-sunken |
#E2E5EA |
#090A0D |
field |
#F0F3F6 |
#3A3D42 |
text |
#1E2124 |
#FFFFFF |
text-secondary |
#5A5E63 |
#ADB1B7 |
text-tertiary |
#70747A |
#8E9399 |
text-inverse |
#FFFFFF |
#1C1C1C |
border |
#E2E5EA |
#3A3D42 |
border-strong |
#CCD0D5 |
#5A5E63 |
disabled |
#ADB1B7 |
#70747A |
| Role | Family | Weight | Case | Tracking | Figures |
|---|---|---|---|---|---|
display |
display | 900 | UPPER | 0 | — |
title |
sans | 700 | UPPER | 0.02em | — |
button |
sans | 900 | UPPER | 0.04em | — |
label |
sans | 700 | UPPER | 0.04em | — |
body |
sans | 400 | sentence | 0 | — |
bodyStrong |
sans | 500 | sentence | 0 | — |
numeric |
mono | 500 | sentence | 0 | tabular |
numericStrong |
mono | 700 | sentence | 0 | tabular |
meta |
mono | 500 | UPPER | 0.06em | tabular |
space-0 | 0px |
space-1 | 4px |
space-2 | 8px |
space-3 | 12px |
space-4 | 16px |
space-5 | 20px |
space-6 | 24px |
space-7 | 28px |
space-8 | 32px |
space-10 | 40px |
space-12 | 48px |
space-16 | 64px |
space-20 | 80px |
space-24 | 96px |
radius-none | 0px |
radius-xs | 2px |
radius-overlay | 20px |
radius-full | 9999px |
border-sm | 2px |
border | 3px |
border-lg | 4px |
dur-fast | 90ms |
dur-base | 260ms |
dur-bounce | 440ms |
Hard offset, always. The one exception is mediaLegibility — over unpredictable video a hard offset reads as a UI glitch, so a soft shadow is the legible choice there and nowhere else.
System and gamification both use Material Symbols Sharp-Fill. Sharp and filled, to match square corners and solid fills.