Skip to content
Serre design system
Theme

Kitchen sink

Every example of every component on one page, to check them together in a theme or at a zoom level.

Theming

Theme

Any subtree can force high contrast

Default

Follows prefers-contrast

AccentDanger

High contrast

Forced

AccentDanger
Compact density

Comfortable

Compact

Layout

Box

Backgrounds, border, radius and elevation
surfaceRaised
layer2
elevation md

Stack

gap 2 and gap 6

One

Two

Three

One

Two

Inline

Aligned and justified

Start

Of the row

Between

The ends

Cluster

Wraps onto as many lines as it needs
complexityverificationevaluationbenchmarksreasoningscaleproofsearch

Grid

As many 8rem columns as fit

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Container

Narrow, at the gutter

Content no wider than layout.narrow (40rem)

Center

Centred block and text

A block no wider than the measure, centred, with its text centred too.

Sidebar

Stacks when the content would be narrower than half the row

Sidebar (16rem)

Main content takes the rest of the row. Narrow the window to see it wrap.

Section

A titled, labelled region

What we work on

The heading labels the section for assistive technology.

Divider

Horizontal and vertical

Above

LeftRight

Visually hidden

Read aloud, never shown

There is hidden text after this sentence. This sentence is for screen readers only.

Text

Heading

Levels 1 to 4

Level 1 size

Level 2

Level 3

Level 4

Display size

Formal foundations

Text

Sizes and tones

Large, for the lead paragraph of a page.

Base, for body text, held to the reading measure.

Small and muted, for metadata.

Extra small, for captions.

Danger, for an error in words.

Tabular figures: 1,111.10 and 9,999.90

Link

In text and quiet

Read the platform overview first.

Source on GitHub

Code

Inline

Run serre doctor to check the installation.

Block, scrollable and focusable
serre compass shape --concept "verification gaps" \
  --json | jq '.rank[0]'
Highlighted
// The stage a concept is in.
pub enum Stage { Shaped = 1, Named("draft") }

Kbd

Keys and combinations

Press ⌘ K to open the command palette, Esc to close it.

Prose

Long-form text

A dossier collects the evidence behind one decision. Every claim in it links to the passage it rests on, so the decision can be checked later.

What it holds

  • The concept and the question it answers.
  • The papers read, with the passages quoted.
  • The verdict, and what would change it.
A result is only as good as the evidence it can point to.

Stages

StageMeaning
shapedThe question is stated and scoped.
gauntletReviewers are testing it against the literature.
serre compass shape --concept depth-bounds

Brand

Wordmark

The master, at each size
SerreSerreSerre
Subbrands, inline and stacked
Serre toolsSerre compass

Controls

Button

Variants
Sizes and states

Icon button

Labelled for screen readers

Toggle button

Off and on

Checkbox

States
A group
Notify me about
Sent to your email address.

Radio group

Vertical and horizontal
Model tier
Density

Switch

Off, on and disabled

Text field

With a description
A short noun phrase.
Required and invalid
Enter an email address.

Text area

Grows with its content
Up to twenty lines show before it scrolls.

Number field

Formatted and stepped

Search field

Clearable
With a shortcut hint

Select

With and without a value
Venue
Status

Combo box

Filters as you type

Slider

A value and a range
60
2,018–2,024

Date picker

Typed or picked

Feedback

Badge

Tones
NeutralIn developmentPassedStaleFailed12 new

Tag group

Removable
Topics
complexity
verification
benchmarks
Backspace removes the focused tag.
Selectable, with tones
Open
Passed
Failed

Banner

Tones, with and without an action

The model worker is offline

Model jobs wait until it reconnects.

Dossier saved

Two sources are older than five years

The harvest failed

OpenReview answered 503 three times.

Toast

Press to show a toast

Progress

Determinate and indeterminate
Harvesting papers42%
Waiting for the model worker

Meter

Tones
Storage used38%
Monthly budget91%

Spinner

Sizes

Skeleton

Text lines, a block and a circle

Empty state

With an icon and an action

No dossiers yet

A dossier collects the evidence behind one decision.

Overlays

Dialog

A form in a dialog
An alert dialog

Sheet

From the inline end

Popover

Native popover, anchored to its button

A gauntlet runs a concept through every check before the lab commits to it.

Read more

Tooltip

On hover and keyboard focus

Menu

Actions, sections and a destructive item

Navigation

Nav bar

Links, a group and an action; Research is the current page
A menu with descriptions and a titled section; one link leaves the site
Links only

Footer

An about block, columns and a closing line

Tabs

Horizontal

What the concept claims and why it matters.

Vertical

Name and email.

Segmented, for a filter

Every run this week.

Breadcrumbs

The last item is the current page

Pagination

Page 5 of 12

Side nav

Sections of links

Command palette

Press the button or ⌘K / Ctrl+K

Data

Table

Sorting and selection
TitleYearCitations
When checking is easier than solving2022133
Scale is not depth202362
Circuit lower bounds for reasoning202441
Benchmarks that isolate one bottleneck20257
Empty
RunResult
No rows.

Description list

Stacked
Library
The corpus: papers, their full text and the claims they make.
Calendar
Venues and their deadlines, each date with its source.
Columns, when the container is wide enough
Status
In development
Owner
Oddur Sigurdsson

Timeline

A concept's lifecycle
  1. ProposedDone ·
  2. ShapedDone ·
    Three framings ranked.
  3. GauntletIn progress · Running
  4. DecidedNot started

Status dot

Every status, in words
QueuedRunningPassedNeeds reviewFailed

Stat

With a trend
Papers in the library
12,480
+312 this week
Open concepts
7
No change
Failed runs
2
+2 since Monday

App shell

App shell

A whole app, contained: collapse the sidebar with the button at its foot

Verification gaps

Judging

Where a model's claims outrun the evidence its sources give, and how often a reviewer would catch it.

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

Open the example app to see it fill the window, and narrow the window to see the sidebar become a drawer.

Workspace switcher

With a menu
A label only, without a menu
Serre tools

Nav item

Current, with a count, with a badge, and without an icon

Nav group

Open, and folded

Sidebar user

With a second line and an account menu

Sidebar status

Live updates connected, beside the signed-in user
  • Live
  • oddurOwner

Top bar

Breadcrumbs, view controls and the page's action
Breadcrumbs only

Page header

A record: status, description, actions and tabs

Verification gaps

Judging

Where a model's claims outrun the evidence its sources give.

What the concept claims.

A title and a description, then the page's body

Deadlines

Every venue's next date, in your time zone.

The page's content, inset to line up with the header.

Split view

A fixed panel at layout.panel

The record itself. Narrow the window and the panel moves below it.

Resizable: drag the line, or focus it and use the arrow keys

A list of records on this side, the chosen one beside it.

Editor

Panel

A panel of inspector rows

Type

px
‰

Inspector row

Rows: a name, then its control

Type

px
‰

Scrub field

Drag a label sideways, type, or step with the arrow keys

Type

px
‰

Layer list

One selected; the background hidden

Layers

serre
compass
Background

Canvas viewport

Scroll to pan, ⌘ and scroll to zoom; 0 fits, 1 shows 100%

Icons

Icons

Three sizes: sm beside small text, md beside body text, lg alone
Every icon the system offers, by name

activity

alert-circle

alert-triangle

arrow-down

arrow-right

arrow-up

arrow-up-down

bell

book-open

calendar

calendar-clock

check

check-circle

chevron-down

chevron-left

chevron-right

chevron-up

chevrons-up-down

circle

circle-help

clock

copy

download

external-link

eye

eye-off

file

file-text

filter

folder

home

inbox

info

layout-dashboard

lightbulb

list-checks

loader

log-out

maximize

menu

minus

more-horizontal

palette

panel-left

pencil

plus

redo

refresh-cw

search

settings

sliders-horizontal

sprout

star

trash

undo

upload

user

users

workflow

x

x-circle

Marketing

Hero

A status pill and a figure beside the copy, as on the home page
Closed testingRequest access

The formal foundations of AI reasoning.

An independent AI research lab that studies reasoning through computational complexity, verification and large-scale evaluation of language models.

Request accessOur research
An overline and the media below, full width

Platform

A research platform that keeps the evidence.

Serre maps a field, judges a direction and plans the submissions, with every judgment tied to the passage it rests on.

Request accessHow it works
The serif heading, for an editorial page

Research

Where reasoning should succeed, and where it should fail.

Three standing programmes, held to one standard of evidence.

Status pill

A link: the status, then where it leads
Closed testingRequest access
Each status, as plain text

Closed testing

Open source

In training

Paused

Withdrawn

Button link

Accent, the hero's one call to action, beside a secondary
Request accessOur research
Every variant
AccentPrimarySecondaryQuietRead the paper

Frame

Two sections in the column: the rules run on, and a rule divides them

The first section, with no rule above it.

The second, ruled off from the first.

Section header

The index, an overline, the heading, a lede and an action

Research

Three programmes, one standard of evidence.

Each pursues its own questions; all three are held to the same proof.

All research
Centred, for a band on its own

Models

Fib is built in the open.

A verifier that runs on your own machine.

Feature section

A grid below the text, run to the column's rules

Platform

A research platform that keeps the evidence.

Four steps, each one checkable.

  • Maps a field

    Gathers a field's papers through their citations and records what each claims, with the passage it comes from.

  • Judges a direction

    Tests a direction for novelty, feasibility and fit, each judgment a separate step with its evidence on file.

  • Plans submissions

    Places committed work at venues whose deadlines it can meet, with a fallback if a paper is rejected.

  • Keeps the record

    Logs every decision with the evidence it rested on and who made it, so it can be checked later.

A figure beside the text, on the end side

Compass

Judges a direction before you commit to it.

Novelty, feasibility and fit at real venues, each with the passage it rests on.

How Compass judges

Hairline grid

Features with icons, three columns; a short last row stays open

  • Maps a field

    Gathers a field's papers through their citations and records what each claims, with the passage it comes from.

  • Judges a direction

    Tests a direction for novelty, feasibility and fit, each judgment a separate step with its evidence on file.

  • Plans submissions

    Places committed work at venues whose deadlines it can meet, with a fallback if a paper is rejected.

  • Keeps the record

    Logs every decision with the evidence it rested on and who made it, so it can be checked later.

Cards with figures that lead on, for programmes, models and posts
Two columns

  • Maps a field

    Gathers a field's papers through their citations and records what each claims, with the passage it comes from.

  • Judges a direction

    Tests a direction for novelty, feasibility and fit, each judgment a separate step with its evidence on file.