The Joyful Systems brand.

Two words, two jobs. “Joyful” is the variable half: ink type on a small molded insert that can take any flavor. “Systems” is the constant half, always ink. The whole mark is a label on plastic: it sits on its own white chip.

Anatomy

On light and dark

• Blue by default. The insert takes another flavor only when it follows something: the channel you hover, or the flavor of the surface it sits on.
• On a flavored ground, pick an insert flavor that is not the ground’s. The white chip keeps the mark readable on all of them.
• Always on its chip. On dark and flavored grounds the chip is required. Never set the mark straight onto a photo or a pattern.
• Type: IBM Plex Sans 600, tracking −1%. Both words in one weight.

Insert flavors

Clear space and size

• Clear space = x, the height of the chip, on every side. Nothing else goes inside it.
• Minimum size: 14px type on screen (about 26px chip height). Below that, use the favicon.

Don’ts

Eight bright flavors on a cool white console. The hues are always used at full strength. Depth comes from gloss and shadow, never from a darker hue. Click any swatch to copy its hex.

Neutrals

Proportion a typical screen

Contrast WCAG 2, computed live

• Text on a flavor is Ink. Ink passes AA on all eight flavors. The badges on each swatch show the live ratios.
• White on a flavor is for large type (24px+, or 19px+ bold) on Blue only. No flavor passes AA for white body text.
• Flavors are not text colors on white. Use them for fills, parts, rings and the wordmark insert.
• Mute is for labels only: mono, uppercase, 11px and up, never for sentences. Use Slate for body copy on white.
• Cyan is the cursor. Focus and hover rings default to Cyan, with a 3px white gap so the ring reads on any fill.
• One flavor per surface. A channel takes its flavor as a full fill or as its ring, never both, and never two flavors mixed into a gradient.

IBM Plex Sans for everything people read. IBM Plex Mono for the system’s own voice: labels, the clock, counts and tags. The specimens below are live. Type in them and try the weights.

Scale

• 600 for headings, 400 to 500 for text. 700 only for single letters on parts.
• Tight at the top: tracking −3.5% on Display, −2.5% on H2, 0 for body.
• Sentence case for headings and buttons. Uppercase only in mono labels.
• Measure: 34 to 60 characters per line for reading text.

The accent material. Chunky molded pieces, like parts still on the tree in a model kit. They add touch and play, but they never carry the message. The channels stay in charge.

How a part is made

Primitives hover them

Materials

• A part is a primitive: circle, pill, rounded square or cross, in one full-strength flavor.
• One gloss, one shadow. --gloss on top and --part-shadow under. Never more layers, never a darker hue.
• Labels on plastic are ink on a white chip, or ink on the part itself. Mono for part numbers (A1, A2…).
• A parts tree is one flavor. It holds pieces of something still being made.
• At most one tray and one parts tree per screen. Loose parts have real weight: they fall, stack and can be dragged.
• Accent, not message. Parts sit beside the content, not behind headlines, and never replace a channel.

The home screen is a menu of channels, like a console. Each tile is a glossy piece of white plastic that shows one thing and opens when you press it.

Anatomy

States try the last one

Grid

• 4-up with 24px gutters on desktop, 2-up with 12px on phones, inside one glass console panel.
• Every channel opens. Pressing shows a preview sheet with Menu and Start, like a console home screen.
• One flavor per channel, as a fill or as its ring. Hovering a channel also tints the wordmark insert.
• No empty slots and no teasers. Fill the grid with real channels. Leave out anything that isn’t ready to open.

Motion is quick and springy, like pressing a good button. Sound is a small set of synthesized cues tied to real actions. It is always off until someone turns it on.

Durations press to run

Easing

Press

Sound opt-in

• Nothing longer than 300ms in interface motion. Ambient loops live only on brand surfaces.
• Physics only in the parts tray. Gravity, light bounce, drag to throw. Everything else uses the curves above.
• Sound is off by default and turns on only from a Sound switch. It never autoplays and never loops.
• Cues map to mechanics, one each: hover, press, open, confirm, toggle, and a pop or thud when parts collide.
• Reduced motion turns every loop and spring off; state changes become instant.
• Quiet by design: one master gain, short envelopes, no cue over about 350ms.

We write the way the interface feels: clear first, bright second. The delight comes from what happens when you press, not from jokes in the copy.

Do and don’t

• Sentence case everywhere except mono labels.
• Numbers as numerals: 7 rules, 8 flavors, 1 letter.
• Verbs on buttons: Read, Open, Start, Tidy. One or two words.
• “Play” is a verb we earn. Use it where something actually responds to you.

A 4px base keeps everything snapping together like parts. Corners get rounder as things get bigger.

Space

Radius

Everything above, as CSS variables. Both routes load the same file, so changing a value here changes the whole site. The values below are read from the live stylesheet.