# Premium Finish — The Layer That Separates Good From Expensive

> **Scope:** frontend-design-system
> **Layer:** 3
> **Keywords:** premium, polish, typography, film grain, atmosphere, load-in, scrim, legibility over video, accent
> **Load When:** ui-designer active, or the brief asks for a premium or high-end feel

**Verified against:** Production landing pages, CSS-only techniques, no runtime dependency. Last-verified: 2026-08-21.

---

A build that runs, is responsive and has scroll animation can still look like a template. The gap between that and something a client reads as expensive is a finish layer applied on purpose. This is that checklist and the reasoning behind each item.

**Read these as principles, not as a recipe.** The goal is to hit the quality *level* for any brand, not to reproduce one project's aesthetic choices. Each item states the principle, which always holds, and then an illustrative answer in italics, which is one option among many.

**Never converge on the same choices across projects.** Same font, same palette, same gradient across clients is the failure mode. Each page should look designed for that business.

---

## Section 1: Typography With Character

Stack default fonts (Inter, Roboto, Arial, system) and the fonts that have become AI-generation tells (Space Grotesk, Playfair) announce "made by a machine". Commit to a display face with real personality, chosen from the brand: what it sells, to whom, at what temperature. Pair a distinctive display with a sober, legible body.

- Enable `font-optical-sizing: auto`.
- Tighten `letter-spacing` slightly on large headings (`-0.012em` to `-0.015em`) for an editorial set.

*One project (menswear tailoring) used Cormorant for headings and Jost for body. For a property developer or a SaaS the answer is different. Cormorant is not the rule, it was one answer.*

---

## Section 2: Atmosphere, Never Flat Color

Solid backgrounds flatten. Depth and texture make the eye read material. All of these generalize: film grain, subtle radial gradients (a brand glow), vignette, gradient meshes, dramatic shadows, layered transparency.

Film grain is cheap and universal, via an inline SVG `feTurbulence`:

```css
body::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

The correct opacity is low: texture you feel, not texture you see. Calibrate per brand and per how dark the theme is.

---

## Section 3: One Orchestrated Load-In Beats Ten Micro-Interactions

A single well-choreographed page load (hero elements rising in stagger) delivers more impact than effects scattered across the page. Concentrate the effort on first contact.

Animate the children of the first hero block with one keyframe and increasing `animation-delay`: kicker, then H1, then subtitle, then CTA.

```css
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero-beat--1 .kicker,
.hero-beat--1 h1,
.hero-beat--1 .sub,
.hero-beat--1 .actions {
  opacity: 0; animation: heroRise 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-beat--1 .kicker  { animation-delay: .30s }
.hero-beat--1 h1       { animation-delay: .46s }
.hero-beat--1 .sub     { animation-delay: .68s }
.hero-beat--1 .actions { animation-delay: .84s }
```

The exact delays are an example rhythm. The principle is stagger on first impact.

---

## Section 4: Legibility Over Video (Close To a Hard Rule)

Text over video or photography is where a premium hero most often breaks. Solve it with a **directional scrim plus text-shadow**, every time.

The scrim darkens exactly the side where the copy lives and stays clear over the subject. A uniform veil is the wrong tool: it dims the whole image and kills the footage.

```css
.scrub__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(14,11,12,.86) 0%, rgba(14,11,12,.5) 38%, rgba(14,11,12,0) 70%);
}
.scrub__copy {
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 34px rgba(0,0,0,.5);
}
```

The text-shadow is the insurance policy: it keeps the copy readable if a bright frame passes behind it.

If the subject collides with the copy, mirror the footage at extraction time (`hflip`) to throw the subject to the opposite side. See `frontend/scroll-driven/frame-scrub.md`.

---

## Section 5: One Precious Accent, Used Sparingly

A jewel-like detail in very few places (primary CTA, a proof number, one heading highlight) raises perceived value. Sparing and precise: if everything shines, nothing does.

```css
/* light sweep on the CTA */
.btn-accent { position: relative; overflow: hidden; }
.btn-accent::before {
  content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transition: left .6s cubic-bezier(.2,.7,.2,1);
}
.btn-accent:hover::before { left: 150%; }

/* metallic gradient text */
.metallic {
  background: linear-gradient(180deg, #fff3cf 0%, #ffecb4 28%, #c9a24b 62%, #9a7b35 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 16px rgba(201,162,75,.25));
}
```

*The gold above is one answer. For another brand the accent could be chrome, copper, a brand neon, or a single stroke of color. The principle is "one precious accent, used sparingly", not "use gold".*

---

## Section 6: The Details That Add Up

- Scrollbar styled in brand color, not browser gray.
- `::selection` in the accent color.
- Hairlines (1px) as gradients that fade at the ends, instead of solid borders.
- Hover states with a micro-transition (a gap that grows, an arrow that advances), never binary on/off.
- Consistent radii and a spacing system, not loose numbers.

---

## Section 7: Order of Application

Apply this from the start of the build, not as a final polish pass. The client judges in two seconds.

1. Define brand tokens first (colors, fonts, radii, shadows) as CSS variables. Everything inherits from there.
2. Apply atmosphere globally (grain plus glow).
3. Work the hero until the load-in and legibility are flawless.
4. Place the accent in two or three spots, maximum.
5. Sweep the details (scrollbar, selection, hovers, hairlines).

Finish with fresh eyes: open the page as if you were the client. Whatever looks like a template is the next thing to raise.

---

## Checklist

- [ ] Display font chosen from the brand, not from stack defaults or the AI-tell list
- [ ] Brand tokens defined as CSS variables before any component styling
- [ ] Atmosphere layer applied (grain, glow, or equivalent) at low opacity
- [ ] Hero load-in staggered with a single keyframe and increasing delays
- [ ] Directional scrim plus text-shadow on every text-over-media block
- [ ] Accent used in three places or fewer
- [ ] Details swept: scrollbar, selection, hairlines, hover micro-transitions
- [ ] Fresh-eyes pass done, and it does not read as a template