Flint Flint
The design system behind AccessSpark and Inner Spark Media. One token source drives CSS, MUI, shadcn/ui and SwiftUI, and every build proves they agree and that the text clears 7:1.
One decision, every platform
The primary button's fill, traced from the color ladder to the code each platform ships. Change one ladder step and all of it follows.
-
Primitive
color.blue#1550a0step 700, light#93c5fdstep 300, dark -
Semantic
action.primary#1550a0light#93c5fddark -
Component
button.primary.bg#1550a0light#93c5fddark -
Platforms
- CSS
--button-primary-bg - MUI
palette.primary.main - shadcn
--primary - Swift
Flint.Component.buttonPrimaryBg
- CSS
Start with your platform
- Web and CSSVariables for Astro, EJS and any static site. Dark mode and density are one attribute each.
- MUIA ready theme for React apps on MUI, in light and dark, comfortable and compact.
- shadcn/uiOne import maps every shadcn variable onto Flint for Tailwind v4 projects.
- iOS and SwiftUIA Swift package with colors, type, space, motion and UIKit colors.
- FigmaThe Flint library mirrors the tokens. If they ever disagree, the repo wins.
What every build checks
A release cannot ship if any of these fail.
| Check | Covers | Bar |
|---|---|---|
| Contrast | 70 pairings in each mode, from body text to chart marks | 7:1 for text, 3:1 for edges, focus rings and marks |
| Parity | 62 semantic and 34 component tokens across CSS, MUI, shadcn and Swift | Every platform lands on the value tokens.json gives it |
| Usage | Control edges and density | No control drawn with a decorative border; density never shrinks a target |
| Pages | These docs and the workbench, light and dark | Zero axe violations, WCAG 2.2 A and AA |