Skip to content
palettetanreidark_modetranslate

Color mode

Contrast

Design system

Showcase systems imitate other design systems to show how far Tanrei can go. They are examples, not designs Tanrei supports.

Copy linkEdit theme

Design system · prerelease · v0.1.0-next.0

One system.
Five platforms.

Tanrei is an open-source design system that ships the same tokens, the same components and the same accessibility contract to the web, iOS, Android, Flutter and React Native, each in its own idiom.

Get started Components Status

<tanrei-button> tanrei.comp.button

DeployDeployDeployDeployDeployDeployaddCreatearrow_forwardNextaddCreatefavoritefavoritefavoritefavoritefavoritefavoritefavoriteaddCreateDeploysaveDeployDeployuploadUploadDeleteDeleteDeleteDeleteDeletedeleteDeletedeleteDeleteDelete
  • Web
  • SwiftUI
  • Jetpack Compose
  • Flutter
  • React Native
platforms
5
components planned
96
specified
96
theme × contrast contexts
6

Built to stay in sync

Two sources of truth

Design tokens and component specs are the only hand-written contracts. Platform code, these docs and the status matrix are all derived from them, and CI fails when they drift apart.

Parity, not sameness

Every platform gets the same tokens, states and accessibility semantics, but keeps its own API shape: enabled in Compose, a null onPressed in Flutter, .disabled(_:) in SwiftUI.

A proven structure

Reference, system and component tokens; color roles; a typescale; tonal palettes generated per theme and contrast level. The look is restrained and near-monochrome.

Accessible by construction

Contrast pairs are checked for every theme and contrast level at build time. Visual size never decides the hit area, and the focus ring is part of every interactive spec.

Where to go next

Getting startedInstall and use Tanrei on your platform.FoundationsBrand, tokens, color, type, shape, elevation, motion and accessibility.StatusWhat exists today on each platform, generated from the repository.How Tanrei is builtThe spec-first workflow that keeps five platforms honest.