Square corners
Rounding lives only inside the mark and on app icons.
01 / 11Methuselah v2
Frustrated Labs · design system
Design system
The mark, colour, type and components every Frustrated Labs page is built from. It’s all live: switch the theme at the top and everything follows.
The mark
Methuselah v2. Two snakes build it, then it bends into ten moods and comes back. Pick one to send the logo above there.
frustrated labs
frustrated labs
App icon
frustrated labsHeader lockup
Its sizes, modes and the code to put it on a site are on the mark’s own page.
Colour
Ink on paper and one red. Dark swaps the grounds; the red stays #FF4433 in both.
--bg · The ground every page sits on.--fg · Text, the mark and the primary button.--panel · Raised things: tiles, cards, fields.--card · Recessed groups, like the Why on a product card.--line · Hairline borders and section rules.--muted · Paragraphs and secondary text.--fume · The one red per view: the current item, an error, the primary button’s glyph.--fume-text · Red text under 24px.Type
Four families, four jobs. Weights 400 to 600, and never italics.
Frustration-driven development.
Paragraphs are muted and at most 56 characters wide. Headings and the one word that matters in a line take the ink.
Motion mark · v1.305 / 11Home key
frustrated labs
Components
Square corners, hairline borders, no shadows. Point at them and click them.
Motion mark · v1.3One lap · 23.2 sApp icon
ShippedIn progressStableBlockedArchived
v1.0.3BetaChangelog
$39Lifetime$20YearlyJan 2027Release
Eleven moods
Pick one to jump there.
Why
You find out about the usage limit by hitting it.
One red per view
It marks the current item, an error or the primary glyph.
Borders, not shadows
Depth comes from the step between paper and panel.
| size | A px number or any CSS length. Default 48px. Plain CSS width and height work too. |
| theme | auto (default) takes the text colour. light and dark force ink or paper. system follows the device setting. |
| mode | loop (default) · hover rests on Methuselah and plays while pointed at · once plays one lap, then rests · static never moves. |
| intro | none starts with the mark already built. By default the two snakes build it when the logo first appears. |
| state | Holds one mood with its small idle motion. |
<!-- once, anywhere --> <script src="/js/frustrated-logo.min.js" defer></script> <!-- in the header; the static SVG inside shows until the script loads, and without JS --> <a href="/" class="fl-brand"> <frustrated-logo size="34" mode="hover" intro="none"><img src="/frustrated-labs-mark-auto.svg" width="34" height="34" alt=""></frustrated-logo> frustrated labs </a> // a mood on cue, for example on a 404 page document.querySelector('frustrated-logo').goTo('gritted');
UI kit
Controls for apps and tools, from the same tokens. They work: click, type and flip them.