Looks Expensive

Looks Expensive

The Anti-Template Mandate

Designers identify AI-generated pages at a glance through a small set of tells. This skill exists to kill them:

1. Excessive bullet points. Bullets are the lazy answer. Real editorial uses prose, ledgers, definition lists, tables. Max 5 bullets total per page. See reference/ux-writing.md.
2. Eyebrow-pill subheadings on every section. The uppercase pill above every heading is the most common AI tell of 2025. Max 1 per page. Ideally zero.
3. Same card chrome everywhere. Every section wrapped in border-radius: 16px; border: 1px solid rgba(0,0,0,0.06) is the visual signature of AI. Max 2 sections using the default card pattern. Other sections use ledgers, rules, tables, prose, or full-bleed photography. See reference/non-card-patterns.md.
4. Generic 3-tier pricing tables. Free/Pro/Enterprise as three identical card-columns. Use a real HTML table or inline pricing instead.
5. Generic 4-column stat strip with counters. Replace with an inline-stat narrative or a single hero stat. Counter animations are NOT mandatory — they're often a tell.
6. Lack of imagery. A hospitality/food/fashion/real estate/services brand without a real `` tag where a hero photo belongs is the loudest AI tell on the page. Use Picsum or Unsplash URLs per reference/imagery.md.
7. Identical container chrome across the entire page. Variance IS the design. If 6 of 7 sections use the same container pattern, redesign.
8. Meta-template fingerprint. The 9-phase workflow itself can become a tell if every output's DESIGN.md uses the same section headers, every type scale uses the same H1 range, every palette uses literal #111/#fff. The PHASES are gated; the OUTPUT FORMAT inside each phase is flexible. Vary DESIGN.md per project: a hospitality brief leads with photography and scene; a dev tool brief leads with type, color, and motion; a luxury brand brief leads with the scene sentence. Document the scale, palette, and rhythm DERIVED from THIS brand — not copied from the last one.

Before every output, audit the page against ALL eight. The skill's job is not to apply a template — it's to make decisions per brief and avoid the patterns above.

The Aesthetic North Star

The target aesthetic depends on the brief. This skill explicitly DOES NOT default to Linear/Vercel/Stripe for every product.

• For SaaS, dev tools, fintech, infrastructure: Linear, Vercel, Stripe, Cursor, Mercury, Eleven Labs.
• For hospitality, hotels, restaurants: Aman Resorts, The Modern, Single Thread Farms. Real photography, generous whitespace, often serif headings.
• For luxury goods, fashion, food brands: Aesop, Glossier, Hodinkee, Snow Peak. Real product photography, editorial typography, warm or neutral palette per the brand.
• For agencies and portfolios: Pentagram, Studio Sutherl&, Mast (the agency, not the chocolate). Less content, larger type, real work shown via photos and case study layouts.
• For services (coaching, therapy, dental, legal): O&O Studio, Wax Atelier (the studio sites). Calm, confident, sometimes a real photograph of the practitioner or workspace.

If the brief is for a hotel and you've built something that looks like Vercel, you went wrong. North Star follows the brief.

What every premium design shares regardless of category:

• One typeface family carrying the headlines (sometimes paired with a quiet serif body, never with three families)
• Color palette of 3-5 deliberate tokens, not random hex values
• Generous whitespace, breath between sections
• Real content (photos, mockups, copy) — not gradient blobs as placeholders
• Restraint with motion — animation serves the content, doesn't decorate it
• Variance per section — no two sections containerized the same way

---

Nine phases. Gated. Each phase's output gets user approval before the next begins.

---

Phase 1: Product Positioning

Before any visual work, establish the taste filter.

Interview

Ask these questions. Do not proceed until answered:

1. What is this product? One sentence.
2. Who is it for? Audience, technical level, context of use.
3. Brand or Product register?

• Brand: design IS the product (marketing, portfolios, agency). Distinctiveness, typographic risk.
• Product: design SERVES the product (dashboards, SaaS, tools). Earned familiarity.

1. The memorable thing? One sentence that filters every decision.
2. What are you NOT? 3-4 anti-references.
3. 2-3 products whose quality you want to match.
4. Emotional temperature?

• Cool/Technical: precision, security, dev tools, fintech (cool whites, slate, blue-black)
• Warm/Earthy: food, wellness, hospitality, agriculture (cream is allowed HERE ONLY)
• Neutral/Clean: general SaaS, productivity, B2B, agencies, consulting, real estate (pure white, true gray, true black)
• Bold/High-Contrast: consumer apps, creative tools, marketplaces (pure black + white + one saturated accent — the saturated accent lives on links, icons, and tinted blocks; primary button fills use --accent-ink per Color System step 5 when text is near-white)
• Vibrant/Playful: social, education, community (bright accents on white)

1. Constraints? Timeline, team size, existing code.

Output

Write the positioning brief. Present. STOP. Wait for approval.

---

Phase 2: Competitive Research

Study the named products plus 7-10 more.

Methodology

1. Web search each reference: "[product] design", "[product] website". Extract fonts, colors, spacing, borders, shadows, motion timing.
2. Search 3-5 angles per product.
3. Cross-pollination: search 2-3 categories OUTSIDE the obvious one.
4. Extract "expensive vs generic" tells for this surface type.
5. Build Steal/Avoid lists with evidence.

Output

Research brief: TL;DR, Steal list, Avoid list, cross-pollination findings, ASCII wireframes. Present. STOP. Wait for approval.

---

Phase 3: Design Contract (DESIGN.md)

Load reference files: reference/ux-writing.md, reference/border-radius.md, reference/imagery.md. If the scene sentence forces a dark theme, also load reference/dark-mode.md. If serif is earned AND the product is a genuine editorial/publishing/long-read product, also load reference/typography-editorial.md.

Product Context

From Phase 1.

Aesthetic Direction

Direction label, decoration level, mood sentence, anti-references.

Scene Sentence

Before choosing theme (dark vs light), color palette, or typography register, write ONE sentence describing the physical scene of use:

• Who is using this product?
• Where, in what ambient light?
• In what mood / what's happening around them?

Example weak: "Observability dashboard." Example strong: "An SRE glancing at incident severity on a 27-inch monitor at 2am in a dim home office, while their phone is buzzing with PagerDuty."

Example weak: "Luxury furniture brand." Example strong: "A 38-year-old designer in their renovated SF studio, comparing the Foundry Table to an Aman catalog at the kitchen counter on a Sunday morning with coffee."

If the sentence doesn't FORCE a theme choice (dark vs light, warm vs cool, dense vs spacious), add detail until it does. DO NOT default to "dark for SaaS/dev tools, light for marketing, cream for food." Derive theme from the scene.

The scene sentence is the anchor for every subsequent decision: type register, color palette, density, animation tone, imagery treatment.

Imagery Decision

For every brief, decide which imagery category the product falls into:

| Category | Examples | Treatment | |----------|----------|-----------| | Photography mandatory | Hospitality, food/bev, fashion, real estate, physical goods (furniture, craft, retail, jewelry, hardware), services with human element, agencies, lifestyle, travel, heritage/craft brands | Real `` tags with Picsum or Unsplash URLs in hero AND at least one in-page section. No CSS gradient stand-ins. No styled rounded-rectangle "placeholder" boxes. | | Photography preferred | Construction, fitness, education, B2B with field operations | At least one real image somewhere on the page. Hero may use mockup OR photo. | | Photography optional | SaaS, dev tools, analytics, infrastructure, fintech | Use CSS mockups per reference/css-mockups.md. Add a single editorial photo if the brand has a human/team angle. | | Photography unsuitable | Pure data products, code-only APIs, abstract infrastructure | Lean into typography, custom SVG instruments, and bespoke diagrams. No imagery is fine — but no gradient blobs either. |

Write the imagery decision into DESIGN.md explicitly. List the sections that will use photography and what each photo should show. See reference/imagery.md for URL format and sizing.

Font System

The default is ONE typeface family carrying the headlines and body. Hierarchy comes from weight and size, not from mixing families. Most software, services, and agencies use one sans.

Serif headings are allowed when:

1. The product is food, beverage, luxury goods, hospitality, fashion, real estate, editorial, or a craft/heritage brand AND
2. The emotional temperature is Warm/Earthy OR the brand has explicit editorial positioning

When earned, use a modern serif (Fraunces, Cormorant, Playfair Display, Lora, Libre Baskerville, Spectral) for H1/H2 paired with a sans body. NOT serif body — that reads as legacy magazine, not premium.

Serif body is permitted (rare) when:

1. The product is editorial, a publication, a thought-leader's personal site, OR a coaching/advisory service where the brand is explicitly literary AND
2. The user specifically wants that editorial register

In all other cases (agencies, clinics, SaaS, marketplaces, real estate, services): all-sans.

INTER IS BANNED AS THE DEFAULT. Inter appeared in 8 of 11 test outputs. It is a fine font but using it on every project makes every output identical. You MUST select a different sans-serif for each project. Before choosing, list 5 candidates and pick the best match.

Font candidates (all sans-serif, search for more):

• Space Grotesk, Outfit, DM Sans, Instrument Sans, Geist, IBM Plex Sans
• Satoshi, General Sans, Albert Sans, Sora, Plus Jakarta Sans, Switzer
• Cabinet Grotesk, Manrope, Archivo, Bricolage Grotesque
• Rubik, Nunito Sans, Source Sans 3, Libre Franklin

Selection process:

1. List 5 sans-serif candidates that match the product's personality
2. Eliminate any font you've used recently
3. Pick the one that best matches while being different from your default
4. One family. Hierarchy through weight (400/500/600/700) and size. Not through mixing families.

Rules:

• ONE sans-serif family. Not two. Not serif + sans.
• NO Inter unless explicitly justified in one sentence.
• NO .serif class. NO .h-display with a different font family.
• NO italics. No `, , .italic, font-style: italic`. Ever.
• Monospace is a DATA ACCENT, never body/headline type. Banned for body, headlines, and ANY uppercase letter-spaced label, always, in every category. PERMITTED — small (≤14px) — for discrete technical data atoms in tech registers ONLY (devtools, fintech, hardware, infra): IDs/hashes/keys, version/commit/model/build tags, timestamps/durations, stat UNITS (the unit, not the prose), tabular figures that must align in a column, and code/`/. Guardrails (any miss → remove the mono): category-scoped (banned on hospitality/food/fashion/services/agencies/luxury/editorial); ≤14px only; mono is the DATUM not decoration (a mono eyebrow is the new pill-eyebrow tell); one mono family max; set with positive tracking + tabular/lining figures (font-feature-settings: "tnum" 1, "lnum" 1`). Mono accent families (pick ONE, only when the carve-out applies — keep separate from the sans candidates): Geist Mono, JetBrains Mono, Berkeley Mono, IBM Plex Mono, Commit Mono.

Type scale — DESIGN PER PROJECT. Do NOT copy a fixed 9-step ladder to every project. Real designers shape the scale to the register.

For each project, declare in DESIGN.md:

1. Base body size: 15px (dense product UIs), 17px (standard marketing), 19px (editorial/luxury). Pick consciously.
2. Scale ratio: 1.2 (compact / product UI), 1.25 (standard), 1.333 (perfect-fourth, marketing), 1.5 (editorial), 1.618 (luxury / dramatic).
3. Generate the ladder from base × ratio (e.g., body 17 × 1.333^4 ≈ 56px H1).

H1 ranges by category (illustrative — derive your own):

• Dense product UI: 28-36px
• Standard SaaS marketing: 40-56px
• Hospitality / luxury: 56-88px
• Editorial / agency / dramatic: 72-120px

Document the chosen base and ratio in DESIGN.md so the next project starts fresh. Do NOT default to H1: 40-72px on every project — that's the fingerprint.

Weight is a separate axis: 400 body, 500 mid-emphasis labels and h5/h6, 600 h2/h3, 700 h1. Don't use both 500 and 600 unless the weights are noticeably different in the chosen font.

Typography craft layer (the invisible-typographer wins). Defects an AI default leaves in and a real typographer removes. Progressive enhancement with no-op fallbacks — apply everywhere:

• text-wrap: balance on every heading, eyebrow, and blockquote (kills ragged orphan lines); text-wrap: pretty on prose ONLY (kills widows; it has a layout cost, so scope it to body copy).
• font-variant-numeric: tabular-nums is GLOBAL for any aligned numbers (stat strip, ledger row, pricing table, dashboard column). Misaligned digits are the same crime as zero-padded step numbers.
• Ligatures stay default-on (liga/calt). Oldstyle figures (onum) only in the serif-prose case already gated (Warm/Earthy food/luxury/hospitality/editorial); lining figures everywhere else.
• font-optical-sizing: auto ONLY when the chosen face actually carries an opsz axis (claiming it otherwise is a lie in DESIGN.md).
• HARD-BAN as the next tell: no animated/scroll-linked/hover variable-axis weight runs; no swashes/discretionary ligatures/decorative ssXX/decorative fractions (frac only for real fractional data); keep the named-weight model (400/500/600/700) — no wght 540 default reflex.

Labels can be uppercase but use sparingly — see Eyebrow Discipline in reference/ux-writing.md. Max 1 per page, ideally zero.

Color System

Derive neutrals from the brand hue. Do NOT default to the same #111111 ink and #ffffff paper on every project. Real designs tint neutrals slightly toward the brand color so the page feels cohesive.

Use OKLCH:

1. Pick the brand accent first (hue H, chroma 0.10-0.20, lightness 0.55-0.70 for a saturated accent that reads as a color). This base --accent is for LINKS, ICONS, ACCENT STROKES, and TINTED BACKGROUNDS — NOT directly for primary button fills with white text (see step 5).
2. Derive paper from the brand hue: oklch(0.97-0.99 0.005-0.015 H) — a 1-2% tint toward the brand. Slightly warmer for warm hues, cooler for cool hues.
3. Derive ink from the brand hue: oklch(0.13-0.18 0.005-0.020 H) — near-black tinted toward brand.
4. Generate secondary/tertiary ink at lower opacity OR at higher L: oklch(0.45 0.010 H) (secondary), oklch(0.65 0.010 H) (tertiary).
5. Derive --accent-ink for button fills with white text (REQUIRED if any primary button uses near-white text on accent). White-on-accent at L=0.55-0.70 with brand chroma lands at ~3.9-4.4:1 — FAILS WCAG AA. Pick --accent-ink: oklch(L 0.10-0.18 H) with L in the range 0.42-0.48 (safe AA range — near-white text on L=0.48 gives ≥4.6:1, with headroom for the hover-must-darken rule). Do NOT push L above 0.48 — at L=0.50 the rest-state is on the AA edge and the hover-must-be-darker rule leaves no room. Keep the SAME hue H as --accent. Use --accent-ink ONLY for background on primary buttons; keep --accent for links, icons, and tints. Alternative path: keep the bright --accent on the button background and switch the BUTTON TEXT to the dark page background — dark-on-bright-accent passes 5:1+ and preserv

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: TuahaJawaid
• Source: TuahaJawaid/looks-expensive
• License: MIT
• Homepage: https://tuahajawaid.com

Install and usage instructions live in the source repository linked above.