# Premium Design

> Builds premium, editorial-grade web interfaces for high-end brands, luxury products, design-forward SaaS, and creative portfolios. TRIGGER when the user wants an editorial, luxe, high-end, premium, creative agency, magazine-style, or fashion-brand website. Explicit triggers: 'premium design', 'luxe', 'editorial', 'high end', 'atelier', 'make it premium', 'make it luxe', 'fashion brand', 'creative…

- **Type:** Skill
- **Install:** `agentstack add skill-luukalleman-premium-design-skill-premium-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [luukalleman](https://agentstack.voostack.com/s/luukalleman)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [luukalleman](https://github.com/luukalleman)
- **Source:** https://github.com/luukalleman/premium-design-skill/tree/main/skills/premium-design

## Install

```sh
agentstack add skill-luukalleman-premium-design-skill-premium-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Premium Design — Kinetic Luxe

A catalog-driven skill for building premium, editorial, high-end interfaces. Distinct from the general `design` skill: this one is opinionated about typography, motion, and restraint.

---

## Design philosophy — the five rules

### 1. Typography is the protagonist

Display type (headlines) uses a serif or distinctive display sans. Body uses a refined sans (Inter, Geist, Satoshi). Headlines are *big* — `text-[clamp(2.5rem,8vw,10rem)]` territory. Letter-spacing is tightened on display (`tracking-tight` or tighter). Line-height is generous on display (`leading-[0.9]` or `leading-none`), tighter on body (`leading-[1.45]`).

**Font pairings that work:**
- Fraunces (display) + Inter (body) — editorial magazine feel
- Canela (display) + Geist (body) — luxury contemporary
- Migra (display) + Manrope (body) — sharp editorial
- Reckless (display) + Inter (body) — soft editorial warmth

Font is loaded via `` in `index.html` or CSS `@import`. Never use system fonts for display.

### 2. Motion is intentional, never decorative

No bouncy springs. No quick `ease-out-200ms` fades. Premium motion uses:
- **Long durations**: 800–1800ms for reveals
- **Refined easing**: `cubic-bezier(0.16, 1, 0.3, 1)` (easeOutExpo), `cubic-bezier(0.22, 1, 0.36, 1)` (easeOutQuint), or custom curves
- **Scroll-driven over page-load**: use `useScroll` + `useTransform` from framer-motion so motion is tied to user action
- **One signature motion per section**: don't stack 5 animations in a hero. Pick the one that amplifies the content.

If an animation doesn't serve the content, remove it.

### 3. Depth through layers, not shadows

Premium depth is created by stacking subtle layers:
- Base: noise texture overlay (CSS or SVG)
- Below content: warm/cool gradient wash (very subtle, 5-15% opacity)
- Mid-layer: decorative element (a large display character, a faded photograph, a grid)
- Foreground: content

Avoid `shadow-lg` / `shadow-2xl` — they read generic. Use `shadow-[0_1px_0_rgba(255,255,255,0.05)]` or gradient borders instead.

### 4. Restraint in color, confidence in composition

The palette is typically:
- **Background**: one warm or cool off-white/off-black (never pure `#000` or `#fff`). Examples: `#0A0908` (warm black), `#F7F5F1` (warm off-white), `#0F1117` (cool black).
- **Text**: high-contrast to bg, but softened. Examples: `#F7F5F1` on `#0A0908`, `#1A1A1A` on `#F7F5F1`.
- **Accent**: ONE color, used sparingly. Examples: `#C8522C` (terracotta), `#4C3F2F` (espresso), `#B8A978` (brass), `#D9C2A4` (champagne).

No rainbow gradients. No teal/purple tech-startup vibes.

### 5. Composition breaks the grid intentionally

Standard 3-column grids feel generic. Premium layouts use:
- **Asymmetry**: 2-column where one column is 2x the other, or 7-column grids with content spanning 3+4
- **Intentional whitespace**: a section with 60% whitespace, content in one corner
- **Scale contrast**: tiny label next to massive headline
- **Overlap**: elements that break out of their container bounds

When in doubt, remove a column or add more whitespace.

---

## What this skill is NOT for

If the user wants:
- Standard B2B SaaS landing page (chat bubbles, product mockups, feature grids) → use `design`
- Admin dashboard / data-dense UI → use `design`
- Mobile app landing with phone mockup → use `design`
- Corporate site with stock-photo hero → use `design`

This skill is for: fashion brands, luxury products, design agencies, creative portfolios, architecture firms, editorial publications, premium SaaS positioning as design-forward.

---

## Workflow — STEP 0: READ THE CATALOG

Before writing any page, READ:
1. `references/design-tokens.md` — colors, typography scale, spacing
2. `references/motion-principles.md` — easing, timing, motion philosophy
3. The matching category `.md` in `references/catalog/` — variants available

Then pick a variant and read its `.tsx` in `references/catalog/components/`.

**Page → Catalog file mapping:**

| Page type | Catalog file(s) |
|---|---|
| Landing / Home | `hero.md` + `features.md` + `testimonials.md` + `cta-sections.md` + `footers.md` |
| Pricing | `pricing.md` |
| About / Studio / Manifesto | `about.md` |
| Contact | `contact.md` |
| Portfolio / Work | `gallery.md` |
| FAQ / Remarks | `faq.md` |
| Navigation (all pages) | `navigation.md` |

**Current catalog inventory — 11 components, all genuinely original:**
- `navigation.md` — 1 variant (Editorial Masthead)
- `hero.md` — 1 variant (Kinetic Mask Hero)
- `features.md` — 1 variant (Editorial Index)
- `stats.md` — 1 variant (Editorial Numbers)
- `logos.md` — 1 variant (Editorial Client Ledger)
- `gallery.md` — 1 variant (Editorial Work Index)
- `about.md` — 1 variant (Editorial Story / Manifesto)
- `testimonials.md` — 1 variant (Editorial Pull Quote)
- `pricing.md` — 1 variant (Editorial Asymmetric)
- `faq.md` — 1 variant (Editorial FAQ / Remarks)
- `cta-sections.md` — 1 variant (Moment CTA)
- `contact.md` — 1 variant (Editorial Contact Form)
- `footers.md` — 1 variant (Editorial Manifesto Footer)

---

## Non-negotiable checklist

Before reporting done:

1. **Foundation read**: `design-tokens.md` + `motion-principles.md` were read BEFORE any code was written.
2. **Catalog consulted**: A specific variant was chosen from the catalog. Name it.
3. **Fonts loaded**: The required display + body fonts are loaded via `` in `index.html` OR CSS `@import`. System fonts break the premium feel.
4. **Single accent color**: The design uses ONE accent color (plus neutrals). No rainbow palettes.
5. **Motion timing**: At least one section uses scroll-driven motion (not just page-load fades). Easing is `easeOutExpo` or similar — not default `easeOut`.
6. **Composition breaks**: At least one section uses asymmetric layout, intentional whitespace, or scale contrast. Not all equal-column grids.
7. **Mobile**: Tested at 375px. Display type scales down but keeps the character (bigger than standard mobile H1).

## Source & license

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

- **Author:** [luukalleman](https://github.com/luukalleman)
- **Source:** [luukalleman/premium-design-skill](https://github.com/luukalleman/premium-design-skill)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-luukalleman-premium-design-skill-premium-design
- Seller: https://agentstack.voostack.com/s/luukalleman
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.