dontostyleguide
Design system

The donto styleguide

Every site composes these predefined elements — built on Base UI, token-driven, with light + dark themes. Flip the theme with the toggle in the header to preview both.

Tokens

Color

canvas
surface
surface-2
accent
accent-soft
cyan
amber
violet
success
danger
line
fg
Tokens

Typography

Heading 1 — display

Heading 2 — section

Heading 3 — subsection

Body large — the quick brown fox jumps over the lazy dog.

Body — the quick brown fox jumps over the lazy dog.

Mono — const claim = { subject, predicate, object };

Components

Buttons

Link button
Components

Badges, chips & stats

neutralaccentcyanambervioletsuccessdanger
rdf:typedonto:statusex:knownAs
39.5M+
statements
938K+
predicates
19,758
contexts
directions
Components

Cards

Static card

A plain surface with a border.

Hover card

Border accents on hover.

With chips

ab
Components

Forms

Toggle switch (Base UI)

Components

Code & inline

Inline donto:predicate and a key ⌘K.

curl -s -XPOST https://memories.apexpots.com/search \
  -H 'Content-Type: application/json' -d '{"query":"Yarrabah"}'

loading…

Base UI

Interactive

Tabs

Subject · predicate · object, anchored to evidence.

Tooltip
Dialog