Design philosophy

Justin is built on a few load-bearing decisions.

HTML first, CSS second, JavaScript last

Native elements before custom widgets. Modern CSS (:has(), light-dark(), container queries, <details>, <dialog>) before reaching for JavaScript. JavaScript only when HTML and CSS demonstrably can’t do the job.

Tokens are the source of truth

Colors, spacing, typography, radii, shadows: defined once in Figma, generated into Svelte CSS variables and Compose Multiplatform Kotlin objects. No hardcoded design values anywhere in component code.

Accessibility is a default, not a feature

Every component ships with semantic markup, keyboard navigation, sufficient contrast, focus indication, and respect for prefers-reduced-motion and prefers-color-scheme. Accessibility is part of “done”, not part of “later”.

Material 3 Expressive

Justin’s vocabulary derives from Material 3 Expressive — color roles, type scale, motion easing, surface containers. Familiar to any Material consumer, customised to Davidhorn’s brand.

Two platforms, one feel

A button in Capture (KMP) and a button in Ark (Svelte) use the same color role, the same corner radius, the same spacing. Either codebase looks like the same product.