Mark · Foundations

Tokens

The contract every layer above reads. Components never name a colour or a radius directly — they name a token, which is why a theme can rebind the whole system without touching markup, and why a palette can flip at runtime.

---

Two hues, ordered: --mk-primary is the one the interface is built out of, --mk-secondary the one gradients and highlights reach for. Both are held on :root as a light/dark seed pair, so a nested dark region — an overlay header, a black footer — resolves the dark half even on a light page. --mk-on-primary is derived per seed rather than assumed white, which is what stops a pale hue rendering white-on-white.

Mark ships no colour utilities. These tokens are wired to Bootstrap's own --bs-primary-rgb and --bs-secondary-rgb, so .text-primary, .bg-primary and .border-primary already follow the palette and the mode — one name per role. -light and -dark modify a named hue; they never name one.

---

Two colours that do not flip with the mode, for the places where nothing is flipping: a control over a photograph has no ground to read, because its ground is a picture. Bootstrap keys these light and dark; here those two words are already taken — they name the color mode — so .text-light would read as “text for light mode” and mean the opposite. They are off-white and off-black, which is also what they are: $gray-100 and $gray-900, a step off each.

The rename is a re-key of $theme-colors, so every family Bootstrap generates from it follows — .btn-off-white, .text-bg-off-white, .table-off-black, --bs-off-white-rgb. The values did not move; only the keys.

Which leaves -light and -dark free for the only job they should have: modifying a named hue (primary-light). They never name one.

---

The pair the base button is drawn in. Both flip with the mode, which is the whole reason .mk-btn needs no variant to survive a dark band — ink already knows where it is.

---

Five steps. Controls take the base, cards take lg; the larger two are for full-bleed media and feature panels.

---

Inter over a system stack — no external request unless a theme adds a webfont. Tracking is two tokens pulling opposite ways, and the tension between them is a theme decision rather than a constant.

Display pulls tight

$display-letter-spacing: -.02em · weight 800 · line-height 1.15

Eyebrows push wide

$eyebrow-letter-spacing: .08em

Body sits at 1rem with a 1.65 line-height — long-form measure, not UI density.

$font-size-base: 1rem · $line-height-base: 1.65

---

Bootstrap's scale with marketing-scale steps added — 5 and 6 are the band rhythm, which is why a section reads as a section without hand-tuned padding.