The standard is simple: clean, premium, no AI slop, at the level of the best big-company product design and the best independent studios (Stripe, Linear, Apple, Attio, Figma, ARKET, kargul.studio). Everything below serves that. Read this whole file before building; the rules that decide quality are here, not in the guides.

Work in the project's existing stack. If the project has tokens, components or a , read them first and extend them.

Finished means the gate has seen it. Any new page, screen, dashboard or redesign is not done until has run on it at desktop and phone, its blockers are cleared, and the critic's fixes are applied. Run it even when the page looks finished or the request was one line; never report done, or hand over a preview link, on a page the gate has not seen. Report the score and its level honestly: pass (9), leader level (8) or below leader level (7 or less) with the remaining gaps. Polish and showcase modes go further when the person asks for them. Never end your turn while image generation, a build or the check is still running in the background: wait for it, then finish, because in one-shot and headless sessions ending the turn ends the work.

Every screen starts from the complete, conventional version of itself: what the best products put on that kind of screen, with the affordances people look for (a welcoming header on an onboarding dialog, icons that help people recognize options, a billing toggle and FAQ on pricing, an identity row on a profile). Seenry's slop rules then remove decoration: eyebrows, rails, leading dots, gradient blobs, italic accents, filler. They never remove content, affordances or recognition aids. When a screen looks tidy but thinner than the leaders' version of it, it is unfinished.

Before building any screen, write its inventory: the eight to twelve things the best products put on that kind of screen. Cover the data each item shows (columns, facts, statuses including the edge ones such as out of stock, pending, overdue or failed), the actions on each item (edit, remove, change role, add to list), the actions on the whole screen (create, invite, import, filter, search, sort), and the states (empty, loading, error, a single item, many items). Use Seenry MCP when it is connected to see how leaders lay that screen out; otherwise use what you know of them. Build every inventory item that needs no new backend, wiring actions to handlers the owner can connect, then check the inventory off again when you verify. A screen missing an inventory item a user would look for is unfinished, however clean it is.

Studio work reads as decided because it uses few values, each on purpose: the studio sites we measured render 5 to 11 font sizes; Seenry pages rendered 15 to 26, with ten spacing values off the grid and a dozen durations, typed one at a time. Before any layout, new page or existing app, the project has one token file and every style uses it:

When the request adds or changes something in an app that already has its own screens and styles ("fix the settings page", "add a pricing page", "add an empty state", "make this modal nicer"), use this path instead of the flow below. The owner wants a pull request they can merge, not a rebrand. A change that looks great but does not look like their app is a failed change.

Report in three or four sentences: what changed, what stayed the same on purpose, and anything the owner should decide.

When the whole brief is one line ("landing page for my habit tracker", "I'm a wedding photographer, need a portfolio site"), the person expects a complete site they could publish today, not a restrained sketch, and they are waiting for it. Run the flow below in quick mode unless the person asks for more; aim to finish in about ten to fifteen minutes, as fast as any design skill, because the quality comes from the research, the idea and the rules, not from review loops (in testing, first builds already scored at leader level and long loops added 0–1 point). Preview on the dev server while you iterate and run the production build once at the end; when check.mjs lists blockers, fix every one of them before running it again rather than one per round: one call plus one call, reading pixels only for the two strongest results; build three identity boards for (step 4; the pick is what gives the page its identity, so never skip it); start all imagery in one background batch right after the pick and build while it runs; and run : it clears the automatic blockers, asks the blind critic once, and you apply its fixes once and deliver with the score and level (pass 9, leader level 8, below leader level 7 or less). Use (up to four critic rounds, stopping at leader level) when the person asks for polish or a production-ready page, and (the full gate with a second direction, an hour or more) only when they ask for a showcase, a portfolio piece or the best possible result. In quick mode, a score below leader level is reported as such with the critic's top gaps, never as finished work. The one-call research budget above is for quick mode only: in polish and showcase modes do all of step 2, which means pulling at least three category leaders by name (capture the missing ones live with ), at least three leaders of the composition class (for software: Linear, Brex, Midday, Retool, Intercom, Metronome and the like), and their full pages, not only their heroes. Hold the result to these:

Taste is trained, not invented: it comes from looking hard at the best work and asking why it feels right. Seenry gives you the library for that; use it every time.

For changes inside an existing app, follow Inside an existing project instead of this flow.

Studios do not lay out a page and then pick colors. They design an identity, a few parts used with total conviction, and the website is one application of it. Look at any rebrand in Seenry (Sommerro, Wise, Murray's Cheese, Transavia, Toca Boca): a truth about the brand, one typographic voice set large, one color used as a full field, one graphic device that comes from the truth, one image treatment and a line in the brand's voice. Every touchpoint is built from those parts, so the brand is recognizable with the logo covered. AI pages, Seenry's included until now, do the opposite: a correct layout with a palette applied. Clean and correct is a 6; a designed identity is what makes a 9.

Before any layout, write and render it as , one screen like the opening frames of a rebrand film:

The board shows the wordmark, the type scale with all its levels in use (one short passage that sets display, lead, body, caption and annotation together), the color world in its real proportions, the device, one treated image, one drawing from the drawn layer, the motion score as a short storyboard, and two posters made only from these parts: the hero, and the page's hardest ordinary section (pricing, FAQ, security or the team) designed in the same system, because blind judges found every page held its idea in the hero and fell back to stock bands below it. If the poster could belong to a competitor, the identity is not done. Study at least two identity presentations in Seenry first (; the rebrand films show one system across signage, print, packaging and web: download the video and pull frames with ) and one studio site (), for how few parts a strong identity uses. Build your own; never take another brand's mark, face or device. Do not repeat yourself either. Run first: it prints the display face, hero color and device of the last identities built on this machine. Fit comes first: choose the identity that fits this brand best, then make sure it is not a copy of a recent one, never the same hue family and kind of device together; a face may repeat when it fits (two finance apps can share a fine grotesk), so when it is close, change the color or the device, never downgrade the type. Two pages from Seenry should not look like siblings, but variety never outranks fit. The examples in this file and in references are there to explain a principle, never to be reproduced.

Leading teams look premium for one root reason: they ranked the job, then removed everything that does not serve it. Calm is the visible result. The reasons behind each rule are in premium.

Do not hand-roll common components. Copy the core kit ( + : buttons, fields, select, checkbox, radio, switch, segmented control, tabs, menu, tooltip, dialog, sheet, toast, accordion, badge and status, avatars, cards, sortable and filterable table, pagination, empty state, stat strip, breadcrumb, kbd, skeleton, command menu) into the project, set its tokens from the direction, and restyle only through tokens. Open its to see every state in light and dark. In React, Vue or Svelte projects, use the README's snippets or the project's own library (Radix, Base UI, shadcn) styled to the same tokens; never ship two component systems.

Any interactive component the kits do not have (hold to confirm, slide to confirm, a status island, a morphing button, a reorderable list, a scrubber, a gauge, anything with states and motion): before writing code, fill in the component brief from interaction craft (job, one idea, state graph, geometry, motion score with reasons, interruption rule, input contract, accessible result, reduced motion, runtime budget, demo, must-not-happen) and save it as ; build to it, then review the result with that guide's checklist.

Make state changes understandable with the existing motion system. For a compatible plain page, Seenry Transitions ( + ) is an optional implementation: apply by attribute (, …) or the small JS API. Its tokens come from production motion, measured frame by frame from real products: curves E enter , M move , F fade , X leave ; durations 0 / 80 / 120 / 160 / 180 / 240 / 280ms chosen by distance × size × frequency, never one duration everywhere. Anything the hand moves or that retargets often (indicators, sheets, switches, dialogs) runs on the kit's springs (, , , , : SwiftUI-style response and bounce baked into CSS ), so it reverses from wherever it is; exact values and text never overshoot. Apply the frequency, keyboard and reduced-motion decisions above to each recipe; an appropriate instant state does not need decorative movement. When motion is warranted, choose by situation:

Every new page or redesign Seenry builds gets one crafted, creative component that makes the product's behavior or the brand's idea visible (not edits inside an existing app). Do not ask whether to add it; choosing it is part of the design. The signature comes from the idea chosen in step 3, not from a menu. When the page makes one big claim, one strong move is often the claim made visible: show it literally, in the product's own unit and at a size people read, with a pause control for anything that loops longer than 5 seconds. "Many" is never a cloud of tiny chips, domains, logos or dots: show three to five readable instances and the one result they become; if a visitor cannot read it, it is decoration. A large editorial statement with the brand's proof set inline (logos, marks, an icon for the promise, one action button) is available as the statement component when the idea calls for it. Otherwise start from the signature kit and its "Choosing the signature moment" guide: product demo player (a cursor clicks and types inside the real UI), line illustration draw-in, ambient field, scroll story (a sticky visual that changes with each step, scrubbed by scroll), live numbers, logo marquee, compare slider, case-study card with hover preview. Adapt it to the brand (content, color, drawing, timing from ) so no two pages look alike, or build an original one when the brief has a better idea. One per page, placed where it explains the most (usually the first screen or the product section), with on its root element (check.mjs looks for it); it has a complete still state and never blocks reading.

An idle loop may show the product doing its one job, step by step in the order it really happens, at most one per page, with a 4–6s period, paused on hover and off for reduced motion. Design it from this product's own behavior; never reuse a loop seen on another page or in a reference.

Independent studios separate themselves with a drawn visual language, and every new site gets one (the identity's drawn layer), built from its device:

4px base, 8px layout values, spacing . Align ink, not boxes: a title's cap height meets the media's top edge, icons sit on the text keyline; edges are exact or at least 8px apart (alignment, optical). Components have at most 3 sizes and 3 weights (components); pages share one shell (pages).

seenry-assets

Use for images, icons and fonts, for transitions and interaction, for native mobile, for identity systems, for audits, diffs and stress tests.

Lead with a brand guidelines summary the user can read without opening anything, then the paths:

Idea:      <the chosen idea in one sentence, the claim and proof it comes from, and where it shows on the page>
Bar:       <the 3 reference screens and the five lines on why they look premium>
Direction: <intent in one sentence>
Type:      <family and weights by role; why>
Palette:   <name hex role> · … ; temperature and why
Radius:    <family by role>; elevation rule
Imagery:   <what the images are and how they were made>
Owned detail: <the one detail this brand owns>
Rules:     3–5 testable do/don't lines for future work
Critic:    <round-by-round blind scores from check.mjs, e.g. 6 → 7 → 8 → 9> and what moved it
Motion:    <motion judge score, durations and curves used, the signature moment>
Verified:  <widths, interactions, contrast>; not verified: <…>

Write the same guidelines into under "Brand guidelines". State the critic's final score, never a self-score.