The look of this theme is intentional. Small text, boxed sections, visible borders, blue links, and a narrow two-column layout are all features, not limitations.

The token system

All visual values — colors, sizes, spacing, font sizes — live in src/styles/tokens.css as CSS custom properties prefixed with --ms-. Changing a token changes every element that uses it.

A few key tokens:

• --ms-color-page-bg — the grey page background
• --ms-blue-header — the mid-blue used for panel headers and the topbar
• --ms-blue-primary — the dark blue used for links
• --ms-font-size-base — 13px by default

The classic-blue variant

The [data-theme-variant="classic-blue"] block at the bottom of tokens.css overrides select tokens for the default variant. If you change a base token value and the change does not seem to apply, check whether the variant block is reasserting the old value.

What to avoid

The retro feel breaks quickly if you add:

• Large rounded card corners
• Drop shadows
• Gradients
• Runtime JavaScript
• A CSS framework on top of the token system

Keep it flat, keep it small, keep it linked.