React components. Tokens that actually derive.
40+ typed components, theming that adapts to brand, mode and density from a handful of seed colors, and granular imports for maximum tree-shaking. Your internal dependencies stay isolated behind their own wrappers — your app never feels an upstream library’s churn.
Design systems drift. This one is derived, not maintained by hand.
Dark mode is a second hand-painted palette that quietly falls out of sync. Contrast is checked in a Figma plugin, once, before ship. Every rebrand touches dozens of hardcoded hex values across the codebase.
One set of brand seeds derives every mode, surface and density — light and dark are the same engine, not two palettes. Contrast is a build-time guarantee, not a checklist item. Change a seed, the whole product re-derives.
What actually sets it apart
Every named color emits a tonal ink pair that clears WCAG 4.5:1 by derivation, not by audit. See Semantic tokens.
Dark is a canonical seed swap through the same engine — not a second palette that drifts. See Theming, config-first.
A bit-exact own color engine cut −48% off Button and −53% off Flex — measured, not estimated.
A typed IR with pure renderers emits DTCG 2025.10 + Resolver, CSS, TS and a Design.md AI-context artifact — see Output formats.
Same config + same environment → byte-identical output, sha256-fingerprinted in a manifest you can cache on.
Deterministic class names, zero hydration mismatch, and a React-less CSS surface for static output. See Server-Side Rendering.
Components that wear your brand
The same tokens drive everything. Swap the theme and every component follows — including dark mode (try the selector in the corner of the page).
One config, twelve variants
Every theme is one cell of brand × mode × surface × dimension — derived from ~14 seed colors, the same code path at runtime and at build time.
your seed colors
light / dark
positive / negative
compact / normal / spacious
Getting started
Install the package
yarn add @apollion-dsi/core react@^19.2 react-dom@^19.2 styled-components@^6Apollion uses Yarn 4 (Berry). Do not use npm.
Add the Provider
import { ApollionProvider } from '@apollion-dsi/core/themes';
function App({ children }) {
return <ApollionProvider>{children}</ApollionProvider>;
}Use the components
import { Button } from '@apollion-dsi/core/elements/button';
import { Text } from '@apollion-dsi/core/elements/text';
export default function MyPage() {
return (
<div>
<Text variant="h1">Hello Apollion!</Text>
<Button text="Click here" />
</div>
);
}Pick your path
The full component reference stays one flat list — these three paths are just a curated way in, matched to what you’re trying to do.
Use It
Install, render components, think in tokens instead of hex. The fastest path to a first screen.
Start hereTheme It
Brand seeds, the four-axis model, dark mode, and the accessibility contract the engine guarantees.
Start hereWho uses the Design System
Partners and products built with Apollion — the same visual language, tokens and composition.
