# High End Visual Design

> Make a site or app UI look like an expensive agency built it instead of like default AI output. Locks a design contract (type, color, spacing, depth, motion) before any component is written, builds against house rules, then audits the result against the visual tells that mark a page as machine-made. Trigger on "make it look expensive", "high-end design", "premium UI", "agency-grade", "this looks generic", "it looks AI-generated", "make this look designed", or on any frontend build or redesign where visual quality is the point.

- Skill: `sva-admin/high-end-visual-design` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add sva-admin/high-end-visual-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sva-admin/high-end-visual-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: sva-admin (https://skillmd.com/u/sva-admin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sva-admin/high-end-visual-design

---


# High-End Visual Design

Expensive is not a style. It is a small number of decisions, made once, applied everywhere without exception.

Pages that read as cheap are rarely ugly. They are inconsistent: nine spacing values, four corner radii, three font weights doing the same job, a drop shadow borrowed from a different website. The fix is procedural, not artistic. Lock the system first. Build second. Audit third.

## When to use this

Use it for: landing pages, marketing sites, product UI, dashboards, portfolios, any redesign, and any time the user says the current build looks generic, cheap, templated, or AI-made.

Skip it when: you are patching one component inside an existing design system. Then the job is to match that system exactly, not to impose a better one.

## Step 1. Read the room, do not run an interview

Answer these from context. Do not send the user a questionnaire.

1. What is being sold, and to whom.
2. Which two real products this sits next to in a buyer's head, and what that category's visual conventions are.
3. Register: quiet and confident, or loud and kinetic. Pick one, they do not mix.
4. Content reality: how much real copy, real data, and real imagery exists right now.

State your read in one sentence, then build. Taste does not need permission, it needs a working page to argue with.

## Step 2. Pick one lane and stay in it

Mixing lanes is the fastest way to look cheap. Choose one, write it as a comment at the top of the entry file, do not drift.

**Quiet Luxury.** High-ticket services, wellness, hospitality, anything sold on trust.
Type: a display serif (Instrument Serif, Fraunces) over a neutral grotesk body. Palette: warm neutrals, one muted accent, no more. Space: generous, base rhythm 8px, section padding 96 to 160px. Radius: 2px or none. Depth: almost flat, borders instead of shadows. Motion: slow fades, 320 to 500ms, nothing bounces. Signature move: one oversized photograph with real air around it.

**Editorial.** Content, publications, research, long-form product stories.
Type: a text serif at 19 to 21px for body (Newsreader, Source Serif 4), grotesk for labels and captions. Palette: paper background, ink text, one signal color for links. Space: measured by line length, never past 70ch. Radius: none. Depth: rules and hairlines. Motion: minimal, reading is the interaction. Signature move: a real hierarchy of headings, standfirsts, pull quotes, and captions.

**Precision Software.** SaaS, dashboards, developer tools, anything data-dense.
Type: a technical grotesk (Geist, Space Grotesk) plus a real mono (Geist Mono, JetBrains Mono) for every number. Palette: cool neutrals, one accent used only for the primary action and current state. Space: base rhythm 4px, tight and consistent. Radius: 6px on controls, 10px on containers, nothing else. Depth: one subtle elevation step plus a 1px border. Motion: 120 to 200ms, functional only. Signature move: tabular numbers that line up in columns.

**Raw Industrial.** Portfolios, agencies, tools with attitude, editorial with an edge.
Type: a wide or condensed grotesk (Archivo, Anton for display) plus mono for metadata. Palette: two colors and a background, high contrast, no gradients. Space: dense grid, visible structure, exposed 1px dividers. Radius: zero everywhere. Depth: none, use overlap and z-order. Motion: hard cuts and instant state changes, 80 to 120ms. Signature move: type large enough to be uncomfortable.

**Warm Consumer.** Apps for humans, community products, education, commerce.
Type: a friendly geometric or variable grotesk (Bricolage Grotesque, Outfit) at heavier display weights. Palette: one saturated brand color, a tinted neutral ramp derived from it, generous white. Space: base rhythm 8px, comfortable touch targets at 44px minimum. Radius: 12 to 16px on cards, pill buttons. Depth: soft layered shadows tinted with the brand hue. Motion: spring-feeling easing, 200 to 300ms, small scale changes on press. Signature move: real photos of real people, not illustrations of blobs.

## Step 3. Write the contract before the markup

Emit the token block first, as CSS custom properties or a Tailwind theme extension, before the first component exists. It is short on purpose.

- **Families:** two, maximum three if one is a mono for numbers.
- **Scale:** one ratio for the whole page. 1.2 for dense UI, 1.333 for marketing. Generate the steps, do not hand-pick sizes.
- **Weights:** three, maximum. Usually 400, 500, and one heavy display weight.
- **Color:** a background, a surface, a border, three text levels (primary, secondary, muted), one accent, and semantic success and danger. That is the whole palette. Derive the neutral ramp by tinting toward the accent hue instead of using pure gray.
- **Space:** a fixed set on a 4px grid. 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Nothing between them exists.
- **Radius:** two values plus a pill. Assign each to a role and never cross roles.
- **Elevation:** two steps, each built from two layered shadows (a tight contact shadow and a wide soft one), colored with the darkest palette hue at low alpha. Never a single blurry black box shadow.
- **Motion:** three durations (fast 120ms, base 200ms, slow 320ms) and two easings (an entrance ease-out and a symmetric ease-in-out). Everything uses these.

Once the block exists, components may only reference tokens. A raw hex, a raw pixel value, or a one-off duration inside a component is a bug, and you fix it by adding to the contract or by using what is already there.

## Step 4. House rules while building

**Type.** One typeface can carry a page only if something else is distinctive. Treat the platform default stack as the null choice: it signals that no decision was made, so if you use it, pay for it with layout or color instead. Set display type with negative tracking and tight leading. Set body at 16 to 21px with leading around 1.6. Never center a paragraph longer than two lines. Optical size matters more than weight: a large 400 reads more expensive than a small 700.

**Color.** Backgrounds carry the mood, accents carry the meaning. One accent, spent only on the primary action, the current state, and links. Body text needs 4.5:1 contrast against its actual background, large text 3:1, and you check this rather than assuming. Pure black on pure white is a laboratory, not a brand: use an off-black tinted toward the accent hue and a paper white.

**Space.** Whitespace is the cheapest luxury signal there is, and the most commonly cut. Group related elements tight, push unrelated groups far apart, and let the gap do the explaining instead of a divider. Vertical rhythm between sections should vary with importance, not repeat identically down the page.

**Depth.** Pick one metaphor: layered surfaces, or flat with borders. Do not run both. Shadows describe a light source, so every shadow on the page points the same direction with the same softness.

**Layout.** One dominant element per viewport, everything else in support. Set a container max width between 1200 and 1440 with real gutters, then break the grid deliberately once or twice so the page has a spine and a surprise. Asymmetry reads as designed, perfect symmetry reads as generated. Collapse to a single column below 768px and check that the collapse is intentional, not accidental.

**Motion.** Animate transform and opacity only. Reveal on scroll with IntersectionObserver, never a scroll event listener. Stagger a group by 40 to 60ms per item, and stop after about six items. Respect `prefers-reduced-motion` by cutting distance and duration, not by removing feedback entirely. If an animation does not help someone understand what changed, delete it.

**Content.** Real names, real numbers, real nouns. Placeholder copy is where premium design goes to die, so write plausible specifics instead. Images: use real assets when they exist, and a deterministic seeded placeholder service otherwise so the layout never renders broken. Any text over an image gets a scrim or a solid panel, tested at the width where the image crops hardest.

**States.** Every interactive element ships with hover, active, focus-visible, and disabled. Every list ships with loading, empty, and error. A page that only has the happy path is a mockup, not a build.

## Step 5. Run the tell audit before you show anything

Each question below describes something that makes a page read as machine-made. Any yes gets fixed before delivery.

1. Three identical cards in a row, each an icon, a three-word title, and two lines of filler? Break the symmetry: make one card dominant, or convert to a list with a strong left rule.
2. Is every corner on the page the same radius, buttons and cards and inputs and images alike? Assign radii by role.
3. Is every shadow pure black at high alpha? Rebuild them as tinted layered pairs.
4. Is everything centered? Choose a left edge and defend it.
5. Is a violet-to-blue gradient doing work that a photograph, a real screenshot, or type should be doing?
6. Are `#000` and `#fff` in the file? Replace with the tinted pair from the contract.
7. Does the copy contain elevate, seamless, unleash, empower, revolutionize, or transform your workflow? Name the actual thing the product does instead.
8. Are the stats round marketing fiction (99.9%, 10x, 50% faster)? Use measured numbers or none.
9. Do hover states change color instantly with no transition and no second signal?
10. Does every section have identical vertical padding and an identical centered header? Vary rhythm by importance.
11. Is the hero `100vh`? Use `100svh` or `100dvh` so mobile browser chrome does not clip it.
12. Are there icons from more than one set, at more than two sizes, with inconsistent stroke widths?
13. Are emoji standing in for icons?
14. Is any body text under 4.5:1 contrast, or any focus ring invisible or removed?
15. Are the numbers in a data table proportional rather than tabular, so columns fail to line up?

## Step 6. Ship it whole

Deliver complete, runnable files. No `// ...`, no "rest of the component unchanged", no "for brevity", no offer to provide the remainder on request. If the output is genuinely too large for one message, stop at a clean file boundary and say exactly which files are done and which remain, then continue.

## Done looks like

- A token contract exists at the top of the work and every component reads from it.
- The lane is named in a comment and nothing on the page contradicts it.
- The layout was checked at 390px, 768px, and 1440px, and each one is deliberate.
- Keyboard tab order is sane and every focused element is visibly focused.
- All fifteen audit questions answer no.
- Every file is complete and runs as delivered.

## Anti-patterns for this skill itself

- Do not ask the user to choose a font. Choose, show, and offer to swap.
- Do not deliver three design directions to dodge a decision. Deliver one build and name the tradeoff you made.
- Do not describe the design in prose when you could render it.
- Do not let a design system argument block shipping a page. The contract takes about five minutes, then you build.