Design-system migration · in progress
A shared visual language, halfway through the house.
Oleg replaced the black-and-orange identity with the Singapore Government Design System’s visual language and semantic-token method. The migration is active, measured, and unfinished.
Derived at generation: count root HTML files except this report; a page counts as converted only when it carries the canonical inlined token block. The 14 nested pages are a separate boundary: 11 converted, 3 not started.
One meaning, two theme values
Primitive rampsSemantic roles resolve by theme
Gray primitives
gray-000#ffffffgray-50#f7f7f7gray-100#f3f3f3gray-200#dfdfdfgray-300#c6c6c6gray-400#a5a5a5gray-500#868686gray-600#6b6b6bgray-700#525252gray-800#3b3b3bgray-900#2a2a2agray-1000#1a1a1agray-1100#0e0e0ePrimary primitives
primary-100#f4f2feprimary-200#e1dbfbprimary-300#c8bdf7primary-400#a999f3primary-500#8a72efprimary-600#6b4febprimary-700#523abcprimary-800#3c2b8aprimary-900#2a1e61Same role names, different values
surface-defaultLight #ffffffDark #2a2a2asurface-raisedLight #f3f3f3Dark #3b3b3bcolor-defaultLight #1a1a1aDark #f3f3f3color-subtleLight #525252Dark #a5a5a5border-color-defaultLight #868686Dark #868686primary-color-defaultLight #6b4febDark #a999f3primary-bg-defaultLight #523abcDark #6b4febWhat it is, does, and still needs
It is one semantic vocabulary for colour, type, spacing, and radius in light and dark themes. It does replace page-by-page guesses with names whose roles stay stable while their values change by theme. It needs conversion of 1 root pages and all 3 nested pages. Every converted page is measured for contrast in both themes, and that measurement reads a page as it loads, so a colour that only appears on hover or after a script runs is checked separately by reading the stylesheet. Two such pairs were found and repaired that way.
Credit: Singapore Government Design System by GovTech Singapore. The copied foundations come from @govtechsg/sgds-web-component 3.26.0 under the MIT licence.
Why the values travel, but the components do not
The component library depends on Lit from npm, a CDN stylesheet, and a Google-hosted webfont. Pages here must contain their own CSS and JavaScript, load no remote font or runtime, and work from file://. The compatible route is to copy the MIT-licensed token values into one source and inline that source into each page.
What someone copying this method should keep
Keep one reviewed token source, generate every page’s token block from it, and gate the generated block against drift. Preserve local tokens for roles the adopted system does not define, such as layout width or status meaning.
The failure that looked plausible
The token map told converters to use primary-color-default for text, but the source did not declare it. CSS variables fail silently. Converters substituted the fill token, producing coloured text that looked intentional while missing the 4.5 contrast requirement across thirteen pages.
2.70
Text painted with a fill token on the night surface.
2.46
A chat fill painted with the text token.
1.48
A border token used as a surface.
None looked broken. Each rendered as a plausible bar or button. Browser measurement, in both themes, exposed the role errors.
The old palette was already failing
#ff9f0a as text on the warm-paper ground measured 1.86. Ten of eleven measured page-and-theme combinations in that baseline carried a failure. The visual change repairs an existing readability defect, provided text, fill, border, and surface roles are used correctly.