sillypoise / design system

design system

the parts this site is made from, laid out as a specimen sheet

01

palette

Surfaces are tinted paper, laid over the page rather than painted on it. Marks are the few saturated notes, kept for small things.

Surfaces

  • paper--color-surface-paper
  • blush--color-surface-blush
  • ochre--color-surface-ochre
  • sage--color-surface-sage
  • aqua--color-surface-aqua
  • blue--color-surface-blue
  • ink--color-surface-ink

Marks

  • coral--color-mark-coral
  • ochre--color-mark-ochre
  • green--color-mark-green
  • aqua--color-mark-aqua
  • blue--color-mark-blue
  • ink--color-mark-ink

Paper and ink

  • ink--color-ink
  • ink soft--color-ink-soft
  • subtle--color-subtle
  • accent--color-accent
  • canvas--color-canvas
  • canvas shade--color-canvas-shade
02

typography

Poiset carries the voice; Inter does the work around it. Every step is fluid, so the rhythm holds from a phone to a wide screen.

  • PoisetDisplay and proseHeadings, essays and wall text.
  • InterInterfaceNavigation, metadata and controls.
  • MonospaceIndex and codeCoordinates, labels and source.

  • Display

    --type-step-5

    52-64px / 1.05 / 400

    Design language with personality

    Hero statements and high-impact headlines

  • Headline

    --type-step-4

    38-48px / 1.12 / 400

    Typography rhythm across the page

    Primary section headings

  • Section

    --type-step-3

    30-36px / 1.18 / 400

    Clear hierarchy keeps content skimmable

    Subsections inside long-form pages

  • Lead

    --type-step-2

    24-28px / 1.3 / 500

    A calm but expressive lead voice

    Lead paragraphs and callouts

  • Body

    --type-step-1

    18-20px / 1.45 / 400

    Body copy should stay legible and relaxed over long passages.

    Comfortable reading text

  • Detail

    --type-step-0

    15-16px / 1.4 / 500

    Published Feb 2026 - 4 min read

    Metadata, labels, and supporting detail

  • Caption

    --type-step--1

    13-14px / 1.35 / 500

    Grid baseline aligns to a 4px rhythm

    Image captions and subtle UI helpers

03

surfaces

Tone and texture are separate settings, so any surface can take any material without changing what it holds.

paper · plain

Flat paper, for dense content.

paper · paper

A fine grain for editorial surfaces.

sage · crt

Dot matrix and scanlines for instrumented plates.

ink · crt

The same material on the darkest tone.

04

notation

A small geometric alphabet in the manner of Byrne's Euclid: shapes and tones that mark, index and annotate without words.

Markers

coralochregreenaquablueinkmuted
circle
square
triangle
diamond
ring
plus
bar

Section labels

Field notes

Index

Signal

A marker that turns

Index labels

N-073.75WO-21ED-03Δ-0412:40
05

indexed panels

Plates in the manner of a survey sheet. Their marks either float over the content or sit in a frame of their own, where they cannot collide with it.

N-073.75

Overlay

OV-01

Marks float at the edges, over the content.

Indexed frame

IX-01

N-07
10.34
Marks live in frame cells of their own.
3.75

Signal field

VIR

0.04
VIR

Coordinate plate

P-61

P-61
10.34

A compact plate can carry instrument-like punctuation at its edges.

9.08
06

instruments

Rulers, strips and legends borrowed from maps and test equipment. They measure nothing; they give a page its sense of being surveyed.

Calibration strips

Colour strips

Coordinate cluster

04

Legend and rule

RouteIndexSignal
07

diagrams and shapes

Fragments of geometry to set beside text, and larger shapes to compose with. Both take any mark tone.

Diagram fragments

  • angle
  • arc
  • axis
  • blocks
  • measure
  • mosaic
  • orbit
  • points

Decorative shapes

  • arch
  • bar
  • circle
  • quarter
  • square
  • steps
  • triangle
08

callouts

Four states, one shape. They are Markdoc tags in a post and React components everywhere else.

Next

Callouts, code, maths, diagrams and figures all come together in a post. See one note written in Markdown and rendered by this site, side by side.

Editorial rendering