Praxis
System / Reference

Styleguide

Everything on this page is generated by the same two stylesheets that render the site. If it looks right here, it is right everywhere.

00 / Playground

Turn the dials

Writes real token values, live

The re-skin, performed on the page you are reading. Pick an accent and the system settles it into two strengths, each held at 4.5:1 or better on its ground. Slide the temperature and every surface, hairline, and muted step follows. When it looks like your brand, take the file.

The playground needs JavaScript. The manual version is three edits in tokens.css, documented at the end of this page.

One pick, two strengths: bright for ink grounds, deepened for paper.

Cool to warm. Zero is the shipped neutral.

--signal
#FF4514
--signal-ink
#C22C05
--paper
#F2F1EC
--ink
#0B0B0C
Deep on paper
5.1:1 AA

Live proof / ink ground

Same pick, settled bright.

This panel re-themes through the semantic layer, exactly as any ink section on the site would. Watch the hairline under this text and the muted step move with the slider.

01 / Color

Ink, paper, signal

Re-skin: swap --signal first
--ink
#0B0B0C
--paper
#F2F1EC
--signal
#FF4514 · ink surfaces
--signal-ink
#C22C05 · paper surfaces
--paper-2
#EAE8E1 · raised card
--ink-2
#151517 · raised card, dark

Semantic tokens (--bg, --fg, --line, --accent) flip automatically inside any element marked data-theme="ink". Components never reference primitives directly.

02 / Type

One family, stretched

Archivo variable, wdth 62..125
Display / wdth 118 / 800 Motion
H1 / wdth 118 / 800 With intent
H2 / wdth 118 / 800 Section heading
H3 / wdth 118 / 800 Card heading
Lead / wdth 100 / 400 The lead paragraph carries the argument of a section in two sentences at most.
Body / wdth 100 / 400 Body copy is quiet on purpose. It holds a 38rem measure, a muted color, and a line height built for actual reading rather than for screenshots.
Mono label 03 / Work · JetBrains Mono
03 / Components

Working parts

Buttons

Primary action Ghost action

Stat

98%
Sample metric label
1.2s
Another sample

Accordion row

Form field

Hints sit under the control, errors replace nothing.

Enter your name

The live form on the home page adds an error summary with focus management, a status region, a honeypot, an optional budget select, and an endpoint switch: POST JSON when data-endpoint is set, mail-app composition when it is not.

Pull quote

“A quote earns its border by saying something a headline cannot.”

[Verified client quote goes here] Attribution line, sample

Ink block

Dark surface

Everything inside re-themes through tokens.

Same markup, same classes. The wrapper carries data-theme="ink" and the semantic variables do the rest.

04 / Motion

The grammar

  • R

    Response

    150 to 320ms, ease-out. Hover, press, focus. Feedback is immediate or it is broken.

    --dur-1 / --dur-2
  • C

    Continuity

    Reveals at 650ms, expo ease-out. Accordion panels run 480ms open, 360ms close. States connect; they do not teleport.

    --dur-3
  • B

    Brand

    The particle field and magnetic buttons. Rare, characterful, and first to go when a user prefers reduced motion.

    field.js

Reduced motion is a replacement, not a shortening: reveals render instantly, the field draws one still frame, magnetics never attach.

End of reference

Re-skin in three moves

  1. Swap --signal and --signal-ink in tokens.css.
  2. Replace the wordmark in each page header, favicon.svg, and mark.svg (the standalone master).
  3. Replace the four sample work images and their captions.

Move one is optional by hand: the playground writes it for you.

Back to the site