01Playing
Press response
A press confirms input by changing colour — never by moving the box.
100ms · colour only
Mynos · A console design system
An index you can trust.
A system for dashboards, workspaces and everyday workflows — the pages people open to find what matters and get things done. A white page, navy ink, rows of 14px type ranked by weight, and one accent that means you can act here.
- Nearly everything is 14px; titles step to 700 instead of growing
text-ui - Edges are 1px rings, and the corner is 6px at every height
shadow-ring - The accent colours actions and links, and never fills a card
--primary
Operating book
Ferro & Vale · USD
Cleared in September$48,260.00
+12.4%vs AugustSep 1Sep 30
Recent entries
- HPHarlow & PikeSeptember retainer · Sep 19$4,200.00Cleared
- NHNoor HaddadBrand audit, phase 2 · Sep 18$1,850.00Open
- FSFieldwork StudioWorkshop, 2 days · Sep 17$3,600.00Drafted
- OKOsei & KlineCard declined · Sep 16$980.00Reversed
Mynos · White canvas · deep ultramarine
- UI primitives
- 63
- 66 story files, both modes
- Palettes
- 6
- One attribute swaps each one
- Composition blocks
- 63
- Across 9 groups of real work
- Built screens
- 103
- 103 declared in the registry
01
Principles
Six rules, each one enforced in a file.
The small decisions are already made: where an edge lands, how a title separates from its description, what the one colour means. Each rule below names the file that enforces it, so it can be checked rather than believed.
- 63 primitives
- 66 story files
- 6 palettes
- 01
Weight ranks, size does not
Nearly everything is 14px. A title separates from its description by stepping to 700 rather than growing, which is what keeps a dense index calm.
globals.css · @utility text-h3 · text-ui - 02
Edges are rings
An outline control draws its edge as a 1px box-shadow, so it occupies exactly the box a filled one does and a toolbar never shifts.
ui/button.tsx · shadow-ring - 03
The corner never scales
A 24px, a 28px and a 40px control all carry 6px — a switch track included, because a switch is a control and not a chip. Chips and counts are pills, structure is square, and nothing in between is invented.
globals.css · --radius: 6px - 04
The accent is ink, not paint
The accent fills one action per view and colours the titles you click. It never washes a card, so wherever it appears it means you can act.
globals.css · --primary → --brand-solid - 05
Only detached things float
Cards and rows sit flat on one hairline. Popovers, menus and dialogs carry the overlay shadow, because what they say is that they are not the page.
ui/popover.tsx · shadow-overlay - 06
Acknowledge, never perform
100ms on one decelerating curve, set as the default transition. A hover answers at once, a press has no travel, and nothing moves on its own.
globals.css · --default-transition-duration
02
Colour
One brand, six identities, and roles instead of values.
A palette owns the neutral spine, the brand family and the focus ring — nothing else. Status belongs to the system and holds still under all six, so identity can change without meaning changing.
- 6 palettes
- Light + dark
- No hex in a component
The brand ramp
--brand-* · sampled livesolid hover tint pastel deep on-solid
Surfaces
6 roles--background--card--popover--muted--secondary--fieldInk
navy, four stepsDelete this book?
text-neutral-solidWorkspace details
text-foregroundMembers · Roles
text-muted-foreground-strongUpdated 3 hours ago
text-muted-foregroundStatus holds still
fixed across palettesDrafted
--secondaryOpen
--warning-*Cleared
--success-*Reversed
--danger-*03
Type
Fourteen pixels, ranked by weight.
One platform grotesque, no web font. Body, labels, cells and actions all sit at 14px, and a title steps to 700 instead of growing. The scale's right column is measured off each specimen, not declared.
- Platform UI stack
- 400 · 500 · 600 · 700
- Measured, not declared
The platform grotesque
--font-ui · no downloadAa Bb 14
Mono sets IDs and keys
--font-codeent_4F7K2Q
The scale
size / leading · weighttext-display-2xl- Mynos
text-display- Everything in its place.
text-h1- Page title
text-h2- Section title
text-h3- Index entry title
text-h4- Group heading
text-body-lg- Lead copy under a page title.
text-body- Body copy. Weight carries rank, not size.
text-ui- Default control and table text.
text-ui-sm- Dense rows and helper text.
text-ui-xs- Captions and timestamps.
text-ui-2xs- The dense floor — grid metadata.
text-eyebrow- Rail group heading
text-caption- Table header
04
Shape & depth
A 6px corner, three shadows, one job each.
The corner moves by what a thing is, never by how big it is — 4px on a solid mark, 6px on every control at every height. Depth is just as narrow: three shadows, none of which lifts a card.
- 6px controls
- Pills for chips and counts
- --shadow-ring · --shadow-control · --shadow-overlay
6px at 24, 28 and 40
--radius · measured liveRoles, not a ladder
4 · 6 · 8 · 12 · pillrounded-sm4pxSolid marks⌘K
rounded-lg6pxEvery controlrounded-xl8pxLarge search, segmentedSearch
rounded-2xl12pxDetached chromerounded-fullpillCounts and dots only18
shadow-ring
the edge of a controlshadow-control
the one in-page liftshadow-overlay
detached things onlyPress Tab
:focus-visible · 2px --ring05
Layout
A 4px scale, three target sizes, one grid.
A 4px scale and three target sizes, drawn at their true widths and measured back. The overlay is the same grid the content uses, so it stays true at any width.
- 4px scale
- 24 · 28 · 44px targets
- Same grid as the content
The 4px scale
--spacing · gap-1 … gap-124px
gap-1Icon to its count8px
gap-2Icon to label, glyph tile to title12px
gap-3Controls in a toolbar16px
gap-4Label to field, card padding20px
gap-5The phone gutter24px
gap-6Section title to its content32px
gap-8Group to group40px
gap-10The desktop gutter48px
gap-12Index column gapNamed steps, measured
--spacing-* · width read backcontrol-smThe floor for anything clickablecontrolEvery toolbar button and fieldcontrol-lgA page's one prominent actioncontrol-touchA row read by a thumbrowA table rowheaderThe header stripsectionBand padding on a phonesidebarThe railMinimum
24px · h-control-smNothing interactive is smaller: a row action, a chip, an inline icon.
Pointer
28px · h-controlThe workhorse: every toolbar button, field and select that was measured.
Touch
44px · h-control-touchOn a phone the row grows to the thumb. The control inside it keeps its size.
Turn the grid on
grid-cols-1 · md:2 · xl:3 · gap-x-12The overlay is the same grid the index uses, so it stays true at any width — three columns at 1280px, two at 768px, one below.
ProfileYour name, photo, and the email clients see.
Sign-in & securityPasskeys, two-step codes and sessions.
Workspace detailsLegal name, addresses and statement label.
Members & rolesInvite people and choose what they can change.
Payout accountsWhere cleared entries land, and when.
ReceiptsBranding, footers and the reply-to address.
06Motion
06 / 09100ms to answer. One curve, no travel.
Mynos moves with purpose: an immediate answer, one decelerating curve, and nothing that could be mistaken for a change in the data itself. The four recipes loop below — pause them, or replay from the top.
Running. The four recipes advance in order, one duration on one curve, until you pause.
Canonical response
One curve, four state changes
01
Press response
02
State change
03
Selection
04
Bounded loading
Every transition… · …
02Queued
State change
Colour and position move together so a control reads as one event.
100ms · standard easing
03Queued
Harlow & Pike$4,210.00
Selection
A row takes its selection in the same beat, with no slide or fade-up.
100ms · bg + ink
04Queued
Sync complete
Bounded loading
Ambient motion is reserved for work whose completion is unresolved.
while pending only
05 — 07Where motion stops
Three cases the system refuses05Held
Cleared this week
67,421.30
no frames between
68,105.44
Data never tweens
A number replaces itself. Nothing travels between two values, so nothing implies a direction.
0ms · transition: none
06Held
Syncing recordsloop runs
Sync completestops
Loops end when work does
Ambient motion claims something is unresolved. When it resolves, the loop stops competing for attention.
while pending only
07Held
motion on
reduced motion
same final frame
Reduced motion keeps meaning
Motion off removes the journey, never the destination. No meaning lives in skipped frames.
prefers-reduced-motion: reduce
01
Immediate
A hover or a press answers in the same beat it is given.
02
One curve
One decelerating timing function drives every transition.
03
No travel
Nothing grows, lifts or slides — a state change is colour.
04
Inclusive
Reduced motion keeps every final state and its meaning.
07
Components
One primitive. One argument.
Twenty-four plates, eight to a shelf, dealt at four widths and closing on one line. Every plate names the job it does, states the rule it follows, and shows a primitive doing that job on real entries — so you can type, toggle and open the evidence yourself.
- 63 primitives in the library
- Live specimens
- Scroll to explore →
Actions and identity
What a reader presses, and what tells them who and where.Action · one per viewButton
One primary action, and it is the only filled thing on the sheet.
Entry MYN-4820$240.00 · drafted
The six variants, ranked
Four sizes, one 6px corner
Nothing pressed yet.
--action fills one button per view. Everything else is outline, ghost or link.
State · the lifecycle rampBadge
A state carries its word, never only its colour.
MYN-4820Drafted
MYN-4819Open
MYN-4817Cleared
MYN-4811Reversed
Surfaces
DefaultSolidSecondaryOutlineGhost
Carrying a mark or a count
Verified8 entries
drafted · open · cleared · reversed — four states, one ramp.
People · who touched the entryAvatar · AvatarGroup
Initials carry the person when a photograph will not.
Who touched MYN-4820
Noor AdeyemiDrafted it · 12 Mar
Tunde OkaforCleared it · 14 Mar
Small, default, large
NANANA
A mark on the corner
TO
Everyone on the book
NATOML
+4
A group shows three and counts the rest. 24 · 32 · 40px.
Action · joined on one trackButtonGroup
Joined buttons are one control, so they move as one.
Ledger footer
1–10 of 18 entries
Paging a book
Counting entries
Stacked
The group keeps its height and its ends. Only the label between them changes.
State · pressed, not navigatedToggle
A toggle stays down. A button springs back.
Note formatting
A toggle reports what the selection already is.
Quiet and outlined
Three sizes, one corner
Held down, and unavailable
Size changes the box. It never changes the corner.
Place · switching booksTabs
Tabs change the view. They never change the page.
Client record
18 entries, 2 still open.
Segmented — inside a panel
18 entries · 2 open.
Underlined — across a destination
Every entry, newest first.
Segmented inside a panel. A line rule for a destination's own sections.
Path · where this entry livesBreadcrumb
The trail ends on the record, not on a link.
Ledger header
Noor Adeyemi$240.00
Down to the entry
A slash, where the trail is a path
Two steps is still a trail
The last crumb is the page itself, so it never links to where you already are.
Choice · a few, on one trackToggleGroup
Three or four choices sit on a track. More than that is a Select.
Ledger toolbar
One of three
Any of three
Joined, with no gap
One height at every width — a control's size is its role, not its viewport.
Fields and selection
What a reader types, picks and sets — and how a field says no.Field · a new entryField · Input
A field says what went wrong, in words.
New entry
Enter a complete email address.
Never a red edge alone. The sentence under the field is the signal.
Choice · one of manySelect
Six options are a Select. Six hundred are a search.
Ledger toolbar
Default
Small, for a toolbar
Unavailable
The trigger is a field — same height, same edge, same focus ring.
Field · carrying its unitInputGroup
A number carries its unit inside the field, not beside it.
Search this book
2 of 18 entries match. The count rides in the field it counts.
A mark and a shortcut
An amount, both ends
A fixed prefix
One ring around the group. The input inside draws none.
Choice · several, or noneCheckbox
A box holds many. A circle holds one.
Report filters
16 of 18 entries shown
Off, on, and partly on
Required, and not yet given
Mixed is a real third state, not a half-guessed check.
Choice · exactly oneRadioGroup
A radio set always has an answer.
Report schedule
Next report: Monday 17 March.
Stacked
In a line, when there are two
Decided elsewhere
One is always chosen. There is no way back to none.
Setting · takes effect nowSwitch
A switch acts on release. A checkbox waits for Save.
As soon as one is recorded.
Every Monday, one email.
On and off
Small, for a dense row
Unavailable, either way
The track carries the 6px corner; the knob inside carries 4.
Amount · a feel, not a figureSlider
A slider is for roughly. When exactly matters, give it a field.
Filter by amount
$20.00$80.00
Roughly is enough here — the field beside it takes exact.
One value
A range, both ends
Stepped, in quarters
Unavailable
A stepped track can only stop where the steps are.
Field · the long answerTextarea
A reason is a sentence, so give it room to be one.
Reverse MYN-4820
The client sees this on their statement.
Required, and empty
A reason is required.
Two rows to start. It grows by drag, never by surprise.
Feedback and disclosure
What the system says back, what it folds away, and what it does while you wait.Message · say what happenedAlert
Name the number, then name the cause.
2 of 18 entries were reversed.
The client’s card was declined on both. $480.00 returns to the Main book.
The same shape, at five weights
Your changes are saved.
A new statement is ready.
All 18 entries cleared.
2 entries need review.
The client's card was declined.
Never 'Error'. Say what happened, to how many, and why.
Wait · with an end in sightProgress
If you know where it ends, show the end.
Import running
Importing from Main book
12 of 18 entries
At zero
Not started
Underway
Importing entries
Done
All 18 entries imported
No total to report
A known total gets a number. An unknown one gets motion.
Wait · with no end in sightSpinner
A spinner is a promise, not a measurement.
Main bookSynced 4 minutes ago
RetainersSyncing…
Three sizes
Beside a sentence
Connecting to your workspace…
Inside the control that is busy
A busy control stays disabled until the work finishes.
Wait · the shape before the inkSkeleton
A skeleton is the real row with the ink taken out.
The same ledger row, loaded and loading
NA
Noor AdeyemiMYN-4820 · Main book
$240.00Text, held open to its own 20px line
Held open to a control's own height
Same tracks, same line boxes. Nothing moves when the data lands.
Interrupt · ask before actingDialog
A reversal asks first, and says what it will cost.
Ledger rows
Noor AdeyemiMYN-4820 · $240.00
ClearedTunde OkaforMYN-4819 · $95.00
OpenOnly the cleared one can be reversed, and only after it asks.
A consequence, spelled out
Nothing to decide, only to read
Open either one to try focus and dismissal.
The confirm button says the verb. Never 'OK'.
Aside · a small decision, in placePopover
A popover settles something small without leaving the row.
Ledger toolbar
18 entriesEach control below settles one thing and closes.
Anchored start
Anchored center
Anchored end
Overlays are the only things that lift — --shadow-overlay, and nothing else.
Disclosure · folded, not hiddenAccordion
Fold what most readers will skip, never what they need.
One open at a time
The entry stays in its book and takes the reversed state. Nothing is deleted.
As many as you like
A folded panel holds the real answer — never a teaser for one.
Gloss · a word, not a formTooltip
A tooltip explains a label. It never holds what you need.
Entry toolbar
An icon with no label needs one.
Carrying the shortcut, not the instruction
Above and below
Left and right
Hover or focus. Anything essential stays on the page.
08
Charts
Numbers that hold still.
Your own number is a line in the brand. Categories get three fixed hues, magnitude gets one hue stepping in lightness, and only a lifecycle chart may borrow status. Figures are tabular and every delta carries its sign.
- --chart-1 … 3
- --chart-seq-1 … 6
- Tabular figures
- Cleared today
- $12,480.00
- +8.2% on last week
- Open entries
- 18
- −3 on last week
- Reversed this month
- 16
- +2 on last week
- Average time to clear
- 1.8 days
- −0.4 d on last week
Your number is a brand line
--primary · dashed forecastNet volume · September$48,210.40+12.4%
The only chart where the accent draws: the number the page exists to show. The forecast continues it dashed rather than in a second colour, because it is the same series.
Three services, three hues
--chart-1 · --chart-2 · --chart-3Three categoricals is the ceiling. A fourth series is a second chart, not a fourth colour.
How long entries stay open
--chart-seq-1 … 6Magnitude is one hue stepping in lightness: the bigger the count, the stronger the mark. The palest steps carry an edge, so a small count stays visible on the card.
Lifecycle is status, so it may use status
--success · --warning · --danger- cleared180
- open18
- reversed16
- drafted11
The one chart allowed the status families: its categories are the lifecycle itself. Every slice also carries its word and its count, so colour is never the only signal.
09
Screens
Six whole pages, running inside this one.
Everything above is inventory — the tokens, the type, the shape, the primitives and the charts. This is what they add up to. Each panel below is a live route from the screen library, running in a frame that follows the palette and mode you are reading in. Six shells, one language.
- Live routes, not screenshots
- 103 in the library
- Desktop · tablet · phone
Loading /dashboard-001 …
Desk for an owner
Cash position tiles by book, the last seven days of money in and out, entries waiting on an owner, and clients owing in a quiet side panel.
Ledger entries
Segment cards with counts, dashed filter chips, Export and New entry, the entries table, results caption and page strip.
Entry detail
The amount as the title with its status, facts, the drafted to cleared timeline, related entries, and a client card and actions.
Assistant chat
A thread list in the rail beside one chat column — the open thread's header, messages that show the assistant's working, and a composer that never scrolls away.
Profit & loss
A profit-and-loss statement for the quarter: income and expenses by category against a year earlier, and the net that follows.
Desk on a phone
The owner's Desk under a thumb: four tiles two across, the entries waiting longest, and the clients who owe the most.
These six are a sample. The library carries 103 built screens across 13 categories, beside 63 composition blocks and 5 demo applications — every one a route or a file in this repository, on the tokens argued for above.
Browse the screen libraryThe end of the argument · the start of the work
Re-theme it by editing token values.
If a primitive needs a hex, the token set is short a token — so you add the role, then use it. One attribute on <html> swaps every palette above, and nothing in src/components/ui knows which one is on.
White page, navy ink, 14px ranked by weight, a 6px corner that never scales, and one accent that means you can act here.
Explore the demos
- Primitives
- 63
- Story files
- 66
- Composition blocks
- 63
- Built screens
- 103
- Palettes
- 6