Search

Jump to any page.

Foundations

Tokens, type and texture

Everything on this page is read from the paragon base item, the same source the registry ships, so the documentation can't drift from what teams install.

Landscape palette

Named for the Gulf: coast, desert and salt flat. Constant across themes; use them for accents, data and illustration.

dune#b4471f
Brand accent. Sand dunes at dusk.
fjord#24507a
Focus rings, links and data. Khor water.
oasis#35602f
Positive states and growth.
sabkha#625eab
Secondary data and dialect. Salt flats.
mangrove#e8a596
Night accent and soft warmth.
shallows#8fd3cc
Night focus and highlights.
sand#e9dcc4
Warm surface and covers.
haze#dad5cc
Dust haze over the coast. Hero and closing surfaces.
dusk#2a3256
Evening sky. Deep product surfaces.

Paper and night

The two neutral families. Paper carries the light theme; night carries the dark theme and the dark panels.

paper#f4f2ec
paper-2#ebe7dd
ink#131411
ink-2#3a3c36
stone#66675f
night#0c1018
night-2#151b27
night-3#232b3b
night-text#e9e7f2
night-muted#a3a6b8

Semantic tokens

What components actually use. Each token resolves to paper values in light and night values in dark.

TokenPaperNight
--background
--foreground
--card
--primary
--secondary
--muted-foreground
--brand
--border
--input
--ring
--destructive

Type scale

Geist for interface and display, Newsreader for names and statements. Display sizes are fluid; tracking tightens as size grows.

text-displayGeist 500 · 44–72px · 1.02 · −6.5%

Act on every cause.

text-titleNewsreader 400 · 36–52px · 1.0 · −3%

Constellation

text-headingGeist 500 · 24–28px · 1.15 · −3%

We protect what they built.

text-leadGeist 400 · 17px · 1.6

Intelligence that hears every customer and acts inside your systems.

text-baseGeist 400 · 16px · 1.5

Body copy for interfaces and long-form reading.

text-captionGeist 400 · 13px · 1.6

Illustrative. Four messages, one cause, one fix.

text-eyebrowGeist 500 · 12px · +8% · caps

Sovereign enterprise intelligence

Typefaces

Arabic glyphs fall through Geist and Newsreader to IBM Plex Sans Arabic automatically, so mixed-script text needs no extra markup.

Geist

--font-sans

Understand every customer.

Paragon's sans-serif for interface, display and body text.

Newsreader

--font-serif

An intelligent institution.

Paragon's editorial serif for product names, statements and the wordmark.

Geist Mono

--font-mono

telos.act({ permitted: true })

Paragon's monospace for code, data and identifiers.

IBM Plex Sans Arabic

--font-arabic

افهم كل عميل. وتصرّف عند كل سبب.

Arabic companion to Geist. Sits behind Geist in every font stack so Arabic glyphs fall through to it automatically.

Shape and space

Three radii, one gutter. Panels breathe with the viewport; buttons and cards stay fixed.

rounded-button12px
rounded-card16px
rounded-panel18–28px
rounded-fullChips
px-gutter
clamp(16px, 4vw, 72px): page side padding
p-inset
clamp(8px, 1vw, 14px): space between viewport edge and panels
max-w-page
1360px: content width

Motion

CSS first. Four durations (120, 200, 360 and 640ms) and three curves. Transforms fall back to no motion under prefers-reduced-motion; activity indicators slow down instead of stopping.

All three at 360ms (--duration-slow).

ease-paragonDefault. Long, settling ease-out for colour, position and opacity.
ease-springPhysical feedback: presses, toggles, thumbs. Overshoots about 4%.
ease-in-out-paragonSymmetric moves where something leaves and returns.

Atmosphere

Panels are the page's building blocks. Dusk and night scope the dark theme to themselves, so components inside switch automatically.

Haze

Hero and closing panels.

Night

Product and insight surfaces.

Trace

The mark is one line with square ends that turns at right angles. Wherever Paragon shows depth, it draws that line: sidebar sub-menus, trees and nested lists.

  • Billing3
    • Plan changes bill twice
      • Draft the rule change
      • Notify affected customers
    • Late fee on autopay date
  • Identity2
  • Square ends, square turnsRails and turns are one pixel and never rounded, like the mark's stroke.
  • Rest in border, path in inkEvery branch shows its rail in the border colour. Only the path to the current item is drawn in ink.
  • One line movesWhen the current item changes, one corner slides along the rail on the Paragon ease. Nothing redraws in pieces.
  • The arrow starts the lineA branch's arrow sits where its rail begins. In the sidebar it takes the icon's place on hover.

Right to left

Paragon is built for Arabic first-class, not as a mirror pass at the end.

  • Logical properties onlyComponents use ms/me, ps/pe and start/end, never left/right, so layouts mirror with dir="rtl".
  • Arrows follow reading directionDirectional icons flip under rtl:. Logos and the wordmark never do.
  • No tracking on ArabicLetter-spacing breaks cursive joins, so every element under lang="ar" resets it to 0.
  • One font stackArabic falls back to IBM Plex Sans Arabic inside the sans and serif stacks; no per-language classes.