An atomic component system that crosses platforms
Atoms compose into molecules, molecules into organisms — and every one of them renders natively on web, iOS and Android from a single authored tree. Change one, and all three platforms change with it.
Atoms
The smallest things the contract names. Every one of these is a typed struct on the wire and a native view on each client.
Heading
A heading
Paragraph
A paragraph carries text, a size token and a variant token.
SduxLink
A link →SduxButton
Icon
CodeBlock
%Heading{title: "A heading"}Table
| Token | Means |
|---|---|
| compact | phone |
| expanded | desktop |
Image
SduxToggle
DescriptionItem
A description item
Term ▍Subtitle
A title, a term and a body, which is what a list of these is made of.
SduxChip
SduxQuote
A program is not its text.
HR
The icon vocabulary
One enum, shared by every component that takes an icon. The name is the contract; the glyph is each platform's own business — SF Symbols on iOS, an ImageVector on Android, this on web.
none
info
success
warning
error
close
check
chevron_down
arrow
bin
bell
clock
calendar
camera
compass
home
music
phone
smiley
youtube
emerging_exits
The thirteen below only render in dark mode
Partner marks are supplied artwork rather than icons — white PNGs with no dark variant — so on a light surface they are invisible. That is a gap in the asset set, not in the contract, and it is not fixable with a colour token: naming one would mean an author picking a colour instead of a role.
artez
fonds_21
gemeente_arnhem
het_cultuurfonds
mondriaan_fonds
post_org
provincie_gelderland
rijks_vastgoedbedrijf
rozet
sonsbeek
stichting_schuilstad
v_fonds
vsb_fonds
Type
Heading and Paragraph share one size scale and one variant set. Level is meaning; size and variant are looks, and they are separate fields so the two never have to agree.
SIZE
xs
sm
base
lg
xl
xl_2
xl_3
VARIANT
sans_light
sans_medium
sans_bold
serif
title
title_medium
title_italic
title_bold
title_bold_italic
caption