main character

design system
← back to the journal

Design system

The pieces the journal is built from, each rendered live from the app's own stylesheets. Nothing here is a mockup: if a page looks wrong, the app looks wrong too. (The one exception is the select's open list, which the browser draws outside the page; that page says so.) Every component also exports to Figma: see figma/components/.

Foundations
Components
component Card

One card for anything the journal can point at, in three sizes, with a horizontal form below 670px.

static/css/card.css · static/js/card.js
component Button

Five voices from send to text, in four sizes and four states.

static/css/components.css
component Input

The single-line well in four app heights, plus the settings and wizard fields.

static/css/components.css · settings.css · wizard.css
component Textarea

Where entries are written: the input’s well, many lines tall.

static/css/components.css
component Select

The native select in five dresses, and a drawing of its open list.

static/css/components.css
component Checkbox

The tinted native box, inline with a label, as a definition row, and as a fieldset.

static/css/components.css
component Toggle

A pill that stays pressed, in solid and soft tones.

static/css/components.css
component Badge

A small read-only label pill in three tones and three sizes.

static/css/components.css
component Button group

Chips, the filter row, the sticky jump row and the segmented control.

static/css/components.css
component Tooltip

One card for every title, placed by the room around its control.

static/css/components.css · static/js/tooltip.js
component Action menu

The ⋯ trigger, the popover menu and its items.

static/css/components.css · static/js/popover.js
component Disclosure

A native details section, and the accordion help is made of.

static/css/components.css
component Search bar

The query, the mode and the button in one box.

static/css/components.css
component Chat bar

Ask’s compact composer: a textarea over a row of small controls.

static/css/components.css
component Modal

A native dialog for the one thing to read first: the web demo’s notice.

static/css/components.css