Quietly happy
Warm paper, a little sunshine, and space to breathe. Joy comes from the details.
Our shared starting pointA little care.
A little care.
In every detail.
The colours, type, shapes, and little moments that make Boring feel like Boring. A practical guide to building a calmer, happier kind of healthcare.
Good in the ordinary.
Made to feel familiar
230shared design tokens
Onesource for design & code
14checked contrast pairings
See the original direction The idea behind the system
Warmth you can feel.
Care you can understand.
Be welcoming at the edges and precise where it matters. The smile opens the door. Clear information, readable type, and familiar interactions earn trust.
Comfortably familiar
Plain language and predictable patterns help people feel at home, at any age.
Clear about care
Make the next step easy to see. Tell people who is helping and what happens next.
How the pieces connect
A value. A purpose. A component.
Use a role in your screen, so the base value can evolve in one place.
02 / Brand & little b
A familiar face.
A distinctly Boring shape.
A rounded lowercase b with a quiet smile. Use it to welcome people, keep them company during short waits, and make everyday moments feel cared for.
The everyday signature
boring
Good health. More life.
Give it a little room
Keep at least one stem-width of clear space. Use the full face at 24 px and above. Keep the wordmark lowercase in Nunito Sans 800.
Choose the right moment
Use the smile for welcomes and routine progress. Give results, errors, and difficult news plain language and a clear human next step.
03 / Colour
A little sunshine.
A steady foundation.
Ink blue gives the interface its structure. Cream makes room for it. Butter yellow belongs to the character and small brand moments.
Select a swatch to see its token, aliases, and CSS.
Use colour by its role
Use color.text.primary for text and color.action.primary for actions, even when they share the same blue.
Keep status separate
Decorative yellow is not an attention state. Use the paired status backgrounds and foregrounds, with a clear label.
04 / Typography
Friendly at first glance.
Easy to read, all day.
Nunito Sans brings the personality. DM Sans handles the everyday details. Use the larger parent-facing style when comfort matters most.
Display & wordmark · Nunito Sans
Aa
Rounded, open, quietly confident.Body & interface · DM Sans
Aa
Clear words. Comfortable reading.More of the days that matter.
Body text starts at 17 px; supporting text at 15 px. The 13 px label style is for short labels. Mukta is the proposed Hindi/Marathi companion and still needs translated-layout validation.
05 / Space & shape
Room to breathe.
Edges that feel softer.
A 4 px spacing base keeps layouts consistent. Use 24 px inside cards, 12 px control corners, and larger curves for welcoming surfaces.
The spacing scale
See space in context
Next on the calendar
A little care, at home.
Clear content. Comfortable space.
24 pxA family of corners
A little elevation, when it helps
Everyday cards stay flat. Reserve shadows for menus, dialogs, and sheets. The presentation shadow belongs to device mockups.
From a phone to a big screen
Use 24 px mobile gutters and 40 px desktop gutters. Keep reading columns within 720 px and standard content within 1120 px. Breakpoints: 720, 1050, and 1500 px.
06 / Components
The foundations,
doing everyday things.
Working examples of shared component decisions. Try their states, inspect the tokens, and copy a starting point for your own screen.
Buttons
Use one primary action per decision. Targets are at least 48 px tall.
Inputs
Cards & chips
Confirmed
Health check, at home
Tuesday, 22 September
7–9 am
Welcome
Good morning, SaritaA good day for
A good day for
the everyday.
Your care, all in one place.
One character moment is enough. Let the rest of the screen stay quiet.
Dialogs & focus
Keep the decision short and the options clear. Try the dialog with a keyboard: Tab moves through controls and Escape closes it.
07 / Motion
A gentle presence.
Never a demand for attention.
Most interactions are short fades and colour changes. Little b gets one slow, settling rhythm while an operation is in progress.
A live loading study
Getting things ready for you
A small moment of company.3.6 ssettling cycle
5.4 sblink cycle
Let the task set the timing
Stop the animation when the actual operation finishes. A duration token is a motion rhythm, not a timer for pretending work is complete.
Your device’s reduced-motion preference is also respected.
08 / Accessibility
Comfort is part
of the design.
Readable contrast, larger touch targets, visible focus, and calm motion support a wider range of people. Check the complete experience as you build.
Good health. More life.
A little clarity goes a long way.
Normal text target: 4.5:1. Large text: 3:1. This checks the selected opaque colours, not a whole screen.
Small details. A bigger welcome.
- Keep helper text at 15 px or larger.
- Use 19–21 px body text for parent-facing screens.
- Make focus visible on every interactive control.
- Pair status colours with words and meaningful icons.
- Keep content and controls usable when text grows.
09 / All tokens
Every decision,
in one place.
Search by name, value, or description. Select a token to inspect its reference chain and copy the CSS you need.
Select a name to inspect
| Token | Value / reference | Type | Copy CSS |
|---|
No matching tokens
Try “colour”, “radius”, “button”, or clear your filters.
10 / Use the library
Ready for your
next ordinary day.
Start with the same source whether you work in code or Figma. Change a token once, regenerate the exports, and keep the two in step.
Load the foundations, then use the roles.
The CSS contains namespaced variables. Load Nunito Sans and DM Sans separately, then add the token stylesheet. Paths below assume the library folder structure is preserved.
<link rel="stylesheet"
href="/tokens/happy-longevity/boring.css">
.page {
background: var(--boring-color-surface-page);
color: var(--boring-color-text-primary);
font: var(--boring-typography-body);
}
.heading {
font: var(--boring-typography-heading);
letter-spacing:
var(--boring-typography-heading-letter-spacing);
}Font shorthand does not include letter spacing. Breakpoint tokens are build-time values; CSS var() cannot go directly inside media-query conditions.
Bring the foundations into Figma with Tokens Studio.
- Create a token set. Open Tokens Studio in your design file. Choose its legacy format and create a set called
boring/happy-longevity. - Paste the export. Open the set’s JSON view, paste
boring.tokens-studio.json, save, and enable the set. - Create variables and styles. In Styles & Variables, export colours as Color Variables, dimensions as Number Variables, typography as Text Styles, and shadows as Effect Styles.
- Build your components. Bind button, input, and card variants to the variables. Install the selected fonts and check text styles before sharing the library.
This is a token-set export, not a native .fig component file. Motion tokens remain handoff values; they do not create Figma animations. Follow the Tokens Studio export guide for supported mappings.
One source. Repeatable exports.
Edit boring.tokens.json, then run the build from the project root. This regenerates CSS, the Figma export, the validation report, and this library’s catalogue.
node tokens/happy-longevity/build.mjs
node tokens/happy-longevity/build.mjs --checkChecks catch missing references, circular aliases, stale exports, and low-contrast required pairings. The older Breath/petrol UI kits still need migration to these token roles.