Osy#betaRun it on Osyrin: osyrin.com

Reference / Local

Checking whether a theme is a stock look

osy design check [<path>] [--json]

`osy design check` reads the app's `theme` — its accent's hue, the page's lightness, the corner radius, the shadow and the display face — and names the stock look it falls into, if any: tape-yellow/black poster, dark neon dashboard, premium dark, earthy serif editorial, SaaS indigo on white, soft pastel rounded. Each verdict says what put the theme there and what would move it out. Before the theme it checks the concept in `DESIGN.md`: an idea in one sentence, who it is for, a grid with its numbers, a type pairing with its reason, the budgets (type scale, colours, motion, what is forbidden) held against the app's own source, and a signature no generated page already has.

stablelocalclidesignui

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:

linewarned 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:

featurefrom
accent hue, saturation, lightnessColors.Primary (else Accent, Brand, Highlight), a hex or Palette.From("#…")
page lightnessColors.Bg (else Background, Page, Paper, Surface)
ink lightnessthe darkest of OnBg/Text/Ink and Border
cornersRadius.Card, else Md, Control, Lg, Sm (never Pill)
shadowShadow tokens: none, soft, or hard (an offset with no blur)
display faceFont.Display (else Heading, Serif, Sans): serif, sans, mono or display, from the stack's own generic family and the face's name

The looks#

lookwhat puts a theme there
tape-yellow/black postera saturated yellow accent, black ink, corners of 3px or less
dark neon dashboarda page under 15% lightness and an electric accent (saturation ≥ 70%, lightness ≥ 50%)
premium darka page under 15% lightness
earthy serif editoriala serif display face, with cream paper or a clay accent
SaaS indigo on whitean indigo or blue accent of weight on a white page, in a plain sans
soft pastel roundeda 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#

Related

Designing an app that looks designed — direction, type, colour, composition and motion

How to make an Osy# app look like somebody designed it rather than like the default: commit to one visual direction…

theme tokens

A `theme` block names your app's design tokens — colors, spacing, radii, and more — as reusable values. A token can…

Finding licence-clear photographs past the stock picks

`osy photo find` searches Openverse — openly licensed photographs, no key needed — under several wordings of the…

Looking at a reference site before you design

Renders a web page the way a visitor sees it — wide (1440×900) and on a phone (390×844) — into PNGs in your project's…