Design system
The color, type, spacing and components Storyboon is built from. Every piece here is the one the site itself uses.
Status family
Four colors, for system messages only: toasts, alerts and form validation. Ochre sits close to the paper tone. Clay keeps its distance from the action orange, so an error still reads as an error.
Older color ramps, still used in a few places.
Color
Brand
Surfaces and borders
Text
Selection and script
Typography
Families
Scale
Weights
Lao, in family
ວົງໄຟ · ຈິດໂກ · ຊຽງໝ້ຽນ
Lao is set in Noto Sans Lao, which sits in the same stack as the body face.
The page face
Scripts are set in Courier Prime at ten characters to the inch. That measure is what keeps a page of script a page long.
Spacing
Layout bounds
Radius and shadow
Elevation
Buttons
Every button is a pill. Orange marks the one action a page wants from you. Danger is quiet on purpose, so it does not pull at the eye.
Sizes
Icon only Figma 29:21
Full width and loading
Forms
Labels sit above their field. An invalid field takes a clay border and a note beneath it.
Where your sign-in code goes.
Segmented control
Figma 3:58 · .segmented
Toasts and inline alerts
A toast arrives in the corner and leaves on its own. An inline alert stays where it is put. Press a button to raise one.
Inline
The status tag
What just happened to the thing beside it, rather than a message about the page. A save reports in one, and so does a note that has been edited or withdrawn. It hides itself when it has nothing to say, so the resting state of a bar carrying one is an empty bar. No tone while a save is in flight: it is not news either way yet.
Modals
The header takes a tint from what the modal is for. Press a button to open one.
Script surfaces
The bar above the editor and the preview, and the cards on your script list. A card is a title page with the pages stacked behind it, and the stack thickens as the script gets longer. Screenplays carry a three hole punch; comics do not.
The script nav, in preview mode
Script cards
Share and notes
The surfaces a shared draft is read and answered on. A reader opens a frozen copy with a link and leaves notes; the writer reads them beside the draft. Everything here is real markup on the real stylesheet, so it moves when the feature does.
The notes panel
Takes a column beside the paper where there is room for one, and lays over the page where there is not. Shown here in the second form, with its fixed position neutralised; the width, the skin and the states are the real rules. One note is active at a time, and it is the only one drawn as a card. The rest are flat text divided by rules, because they carry nothing to act with.
The marked passage, and the tick
A passage carrying a note is tinted on the paper, and pressing it opens that note. The one being worked on takes the action orange, and it is the only orange the paper ever carries. The tick is the writer marking a note done: a switch, not a checkbox, since it reports a state rather than collects one.
GUARD 2: End of the road, girl. Nowhere to swim, either.
-
Still to do.
-
Done, and receding.
Avatar
An initial on one of six inks, in a portrait box. The ink follows from the name, so yours stays the same every time.
Spinner, banner, tooltip
Loading spinner Figma 13:438
Cookie banner Figma 13:427
Shown here in place. The real one sits at the foot of the page.
Tooltip Figma 13:445 · hover the button
Icons
The icons the interface uses.
Unstyled classes
Every class used on this page, checked against the stylesheets the page loaded. Anything listed here matches no rule, which usually means the markup names a component that does not exist. Font Awesome loads from a CDN and cannot be read, so its classes are left out and checked by eye in Icons above.
Contrast
How well each sample above reads against the color behind it. WCAG AA asks for 4.5:1 on normal text and 3:1 on large. The numbers run again when you switch modes.