Taste

Apply these rules before you write markup or styles. Then run the smell test on what you wrote. Fix every failure before you show the work.

Before you start

1. Find the design system. Look for design-systems/ in the kit this skill came from (two folders above this file). If the project has its own tokens, those win.
2. Pick one variant and say which: base, editorial for reading, dashboard for dense data, marketing for landing pages, showcase for a page that has to be remembered. Read its README.
3. Load its tokens.json. Variant values override base. Use token names in code, not raw values.
4. Have an idea. Write one sentence naming a concept from the product's own world, and let it decide the typeface, the imagery and the wording. Rules make a page tidy. They do not make it worth looking at. A page that passes every rule below and has no idea has failed.
5. Get real content. Ask for it, or read it from the project. If none exists, write plausible specific content for this product. Never lorem ipsum, never "Feature one".

Rules

Colour

• Pick one accent colour. Use it for at most three things, and name them before you start. Example: primary button, current nav item, links.
• If the variant has a support colour, use it. It is there for mood, within the count the variant gives. A page that is allowed a second colour and shows only grey has left its best tool in the box.
• Everything else is neutral, unless the variant says otherwise. Status colours (danger, warning, success) are for status only.
• The focus ring may use the accent hue and does not count as one of the three. Any other use does, including a border that turns accent on focus.
• Count the accent uses in your CSS before you report. If the design system's component rules would push you past three, follow this rule and say so.
• No gradients. No glassmorphism or background blur. No drop shadows. The exception: the variant's effects block allows it, and then only where it says.
• Separate surfaces with a 1px border or a change in fill, not a shadow.

Type

• Five sizes at most: caption, body, lead, title, display. Do not invent a sixth.
• If the variant lists typeface pairings, choose one. The system font is for app screens, not for pages that have to make an impression.
• Create hierarchy with size and weight first, then colour. Two weights are usually enough.
• Never centre body text. Left-align it (or start-align for right-to-left languages). A short headline may be centred.
• Keep lines of text between 45 and 75 characters.

Spacing

• Every margin, padding and gap is a multiple of 4px and uses a named step: hair 4, tight 8, snug 12, base 16, roomy 24, wide 32, section 48, block 64, page 96.
• Space inside a group is smaller than space between groups.
• If you need a value that is not a step, the layout is wrong. Change the layout.

States

• Design the empty state and the error state first. Then loading. The happy path comes last.
• An empty state says what will appear, how to make it appear, and offers the action.
• An error says what happened and what to do next, in plain words, next to the cause.
• Every interactive element gets hover and focus-visible states. Also pressed and disabled where they apply.
• Never remove a focus outline without replacing it.

Content

• Content decides the layout. Write the words, then arrange them.
• Buttons are verbs that name the result.
• Icons must carry meaning the text does not. If removing the icon loses nothing, remove it.
• Let content set the height. Do not pad or truncate cards to match each other.

Restraint is not the goal

These rules remove noise so that one idea can be loud. They are not a target to hit by doing less. If you have followed them and the page is quiet, grey and polite, you have not finished. Turn up the things the variant allows: the size of the headline, the support colour, the presence of the product, the motif.

Look at it

Before you report, render the page and look at a screenshot at desktop and phone width. If you cannot, say so in the report. Do not describe a page you have not seen as finished.

Smell test

Run this on your own output. Answer each question honestly. A "yes" means rework, not a note.

1. Does it look like every other AI landing page?
2. Is there a hero with a gradient, followed by three cards?
3. Are the icons decorative?
4. Is every card the same height?
5. Is any body text centred?
6. Is the accent on more than three kinds of element?
7. Are there more than five font sizes, or any spacing value off the 4px grid?
8. Is there a shadow, gradient or blur the variant did not ask for?
9. Is any text placeholder: lorem ipsum, "John Doe", "Your title here"?
10. Does any interactive element lack a hover or focus state?
11. Is the empty state or error state missing?
12. Could you swap the product name for a competitor's and change nothing else?
13. Is it tidy and forgettable? Can you name the idea behind it in one sentence?
14. Is the page mostly grey when the variant allows colour?
15. Is it set in the system font when the variant offers typefaces?

Report

End your response with four lines:

• Variant: which one you used, and why.
• Concept: the one sentence behind the page.
• Accent: the colour and the three things it marks.
• Smell test: "passed", or which items failed and what you changed.