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/.
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 ButtonFive voices from send to text, in four sizes and four states.
static/css/components.css component InputThe single-line well in four app heights, plus the settings and wizard fields.
static/css/components.css · settings.css · wizard.css component TextareaWhere entries are written: the input’s well, many lines tall.
static/css/components.css component SelectThe native select in five dresses, and a drawing of its open list.
static/css/components.css component CheckboxThe tinted native box, inline with a label, as a definition row, and as a fieldset.
static/css/components.css component ToggleA pill that stays pressed, in solid and soft tones.
static/css/components.css component BadgeA small read-only label pill in three tones and three sizes.
static/css/components.css component Button groupChips, the filter row, the sticky jump row and the segmented control.
static/css/components.css component TooltipOne card for every title, placed by the room around its control.
static/css/components.css · static/js/tooltip.js component Action menuThe ⋯ trigger, the popover menu and its items.
static/css/components.css · static/js/popover.js component DisclosureA native details section, and the accordion help is made of.
static/css/components.css component Search barThe query, the mode and the button in one box.
static/css/components.css component Chat barAsk’s compact composer: a textarea over a row of small controls.
static/css/components.css component ModalA native dialog for the one thing to read first: the web demo’s notice.
static/css/components.css