Summary#
A design built quickly converges on one of a few looks a hundred sites already share — even when the builder looked at
real references. The theme says which: the same accent family, the same page, the same corners and face. osy design check reads the theme the app declares and names the look it sits in, so the moment to change direction is the moment
the theme is written, not after every screen is built on it.
Signature#
osy design check [<path>] [--json]Description#
The concept, first#
Before the theme, it reads the concept: the ## Concept section of DESIGN.md (in the project's root or design/),
one labelled line per constraint ([[ui-design#concept]]). Each line is checked for what can be checked:
| line | warned when |
|---|---|
Audience: | it names no one ("everyone", "users", "customers"), or fewer than five words |
Idea: | more than one sentence, more than 35 words, or fewer than five |
Grid: | it has no number: no columns, measure or ratio |
Type: | no because; a reason that would fit any brand ("clean", "modern", "elegant"); or none of the faces the theme sets is named |
Scale: | fewer than three sizes and no ratio; or a FontSize token the app's theme sets in px/rem is not one of them |
Palette: | no number; or the app's theme sets more hue families in Colors than the number (neutrals, status colours and chart series are not counted) |
Motion: | no number ("none but hover" counts as 0); or the app declares more animation blocks than the number |
Forbidden: | fewer than two moves, separated by ; or , |
Signature: | it is a signature generated pages already have (a gradient hero, frosted cards, a bento grid, a logo strip, big statistics, cards that lift, an oversized footer wordmark…) |
The budgets are read off the app's own .osy files, never a kit's, and test files are left out. With no
DESIGN.md, or none with a concept, it prints the nine lines to fill in. --json carries the concept beside
the themes.
What it reads#
The app's own theme blocks (theme tokens), in light mode where a token differs by mode:
| feature | from |
|---|---|
| accent hue, saturation, lightness | Colors.Primary (else Accent, Brand, Highlight), a hex or Palette.From("#…") |
| page lightness | Colors.Bg (else Background, Page, Paper, Surface) |
| ink lightness | the darkest of OnBg/Text/Ink and Border |
| corners | Radius.Card, else Md, Control, Lg, Sm (never Pill) |
| shadow | Shadow tokens: none, soft, or hard (an offset with no blur) |
| display face | Font.Display (else Heading, Serif, Sans): serif, sans, mono or display, from the stack's own generic family and the face's name |
The looks#
| look | what puts a theme there |
|---|---|
| tape-yellow/black poster | a saturated yellow accent, black ink, corners of 3px or less |
| dark neon dashboard | a page under 15% lightness and an electric accent (saturation ≥ 70%, lightness ≥ 50%) |
| premium dark | a page under 15% lightness |
| earthy serif editorial | a serif display face, with cream paper or a clay accent |
| SaaS indigo on white | an indigo or blue accent of weight on a white page, in a plain sans |
| soft pastel rounded | a pale page, a pale accent and corners of 16px or more |
They are tried in that order, and the first that fits is named. Each was measured, not imagined: across this repository's apps the editorial look holds 18 themes and the indigo one 10, two are premium dark, and of the kept workspaces of one recent build brief, four of five landed on the poster.
$ osy design check
theme Poster — accent hsl(50, 100%, 50%), page 95% light, corners 0px, shadow hard, display sans (Bricolage Grotesque)
⚠ tape-yellow/black poster — a saturated yellow accent on black ink with square corners — the look of every hardware-store and "bold" startup poster; references in the category converge here
what puts it there: accent yellow (hue 50°, 100% saturation); black ink (7% lightness); corners 0px
what moves it out: take the accent from a reference outside the category, give corners a rule other than none, or let the ink be a colour rather than black"✓ no stock look" is the answer a decided theme gets — and it is not a verdict on the design, only that it is not one
of these. Look at the pages anyway (osy test --pixels). An app with no theme wears the kit's own look, and the
verb says so. --json prints the features and the verdict for a tool.
See also#
- Designing an app that looks designed — direction, type, colour, composition and motion — choosing a direction, and the defaults to avoid
- theme tokens — the tokens a theme declares
- Finding licence-clear photographs past the stock picks —
osy photo find - Looking at a reference site before you design —
osy design look