apple-modern-ui
SKILL.md 35.8 KB
пакет: 13 файл(ов), 128.1 KB
обновлён 03.11.2026 22:15
---
name: apple-modern-ui
description: "Apple-style anti-slop web UI ruleset: Onest typography, one-accent color tokens with verified contrast, functional glass, Lucide icons, Motion + anime.js recipes, components, accessibility, Delivery Gate. Use for ANY web UI work — landing pages, components, styling, animation, UI review — and for vague requests like 'make it look good / modern / professional' or pages that read as AI-generated templates. Web only: not for native mobile, print, or email."
---
# Apple-Modern UI Ruleset · anti-slop edition
**Version 1.1 (EN, updated 2026-11-04).** Rules for AI agents (Claude Code, Cursor, Codex, Windsurf, v0, etc.) and humans. Goal: the web UI looks like a modern Apple site, not a generated template.
**Default stack:** **Onest** typeface, **Lucide** icons, **Motion (motion.dev)** + **anime.js v4** for animation, CSS-first.
---
## Package layout (file map)
The ~36k-token ruleset is split so that agents load only what a task needs: this file is the working core, `references/` is detail read on demand. Section numbering (§) is canonical across the whole package — cross-references like (§7.5) resolve via this map.
| File | Holds |
|---|---|
| `SKILL.md` (this file) | §0 How to use · §1 Direction · §3 Hard bans · §16 Tokens · §18 Delivery Gate |
| `references/conflicts.md` | §2 Resolving conflicts between skills |
| `references/typography.md` | §4 Typography (Onest) |
| `references/color.md` | §5 Color |
| `references/layout-glass.md` | §6 Grid, spacing · §7 Surfaces, radii, shadows, glass |
| `references/components.md` | §8 Icons (Lucide) · §10 Components and states |
| `references/motion.md` | §9 Motion (Motion + anime.js) |
| `references/media.md` | §11 Images and media |
| `references/copy-ru.md` | §12 Copy (Russian UI) |
| `references/quality-passes.md` | §13 Accessibility · §14 Performance · §15 Mobile layer |
| `references/hero.md` | §17 Hero skeleton (as in the reference) |
| `references/installing.md` | §19 Installing the skills · §20 Sources |
| `scripts/gate.sh` | §18.3 autochecks as one command (bash + ripgrep) |
## 0. How to use
### 0.1 Connecting to an agent (load on demand)
The package splits a ~36k-token ruleset: `SKILL.md` (this core) plus `references/` read on demand, so a typical task loads 3–6k tokens, not the whole ruleset. Load it only for UI work; never put it into always-on context. The file map above says which file holds each §.
- **As a skill (best):** copy the whole `apple-modern-ui/` folder (not just SKILL.md) to `.claude/skills/apple-modern-ui/` (Claude Code), `.agents/skills/apple-modern-ui/` (Codex) or `.cursor/skills/apple-modern-ui/` (Cursor). The frontmatter at the top is the skill header: until a UI task triggers the skill, only its `description` sits in context. When triggered, read this file, then the reference files the Reading map (§0.5) names for the task.
- **As a project file:** keep the folder in the repo (for example `design/apple-modern-ui/`) and add one line to `CLAUDE.md` / `AGENTS.md`: `Before any UI work, read design/apple-modern-ui/SKILL.md and follow it, loading references per its Reading map.` Write it without `@`: in Claude Code an `@...` import loads the file into every session.
- **Cursor rule:** `.cursor/rules/design.mdc`, attached by globs, not always:
```md
---
description: Apple-modern UI ruleset (anti-slop). Use for any web UI work.
globs: ["**/*.{tsx,jsx,vue,svelte,astro,html,css}"]
alwaysApply: false
---
Follow design/apple-modern-ui/SKILL.md for every UI change; load its references per the Reading map (§0.5).
```
- Installed skills (frontend-design, taste-skill, impeccable, etc.) may run alongside. `references/conflicts.md` (§2) resolves their conflicts.
### 0.2 Modality
- **MUST / NEVER**: hard rule. Deviate only on the user's explicit request.
- **SHOULD**: default. Deviation is fine if the reason is recorded in one line (PR or `DESIGN.md`).
- **AVOID**: AI-slop tell. Use only with a recorded reason.
### 0.3 Source priority
1. The user's explicit words and the brief. Pinned fonts, palettes and eras are honored even against anti-slop warnings ("the brief wins", impeccable).
2. The project's `DESIGN.md` / brand guide.
3. This Ruleset.
4. Defaults of installed skills.
**Exception:** accessibility (§13) and honesty (§3.7) are never overridden by any brief.
### 0.4 Agent workflow
1. **Read the project:** stack, tokens, components, real content. Don't ask what the code can tell you.
2. **Write the Design Read and Dials** (§1.4) as the first line of the reply.
3. **Plan before code:** tokens (colors, font, scale), copy deck (real text), per-screen composition (ASCII sketch), one signature animation.
4. **Build the static version** without animation: content, grid, typography, all states.
5. **Add motion** within the budget (§9.4).
6. **Check the render** at 390, 768, 1280×800, 1440×900 and 1920 px, light and dark theme, keyboard, reduced motion. Pass the Delivery Gate (§18) and attach evidence.
### 0.5 Reading map
Not every task needs every file. Read what the task needs instead of "applying everything".
| Task | Read first | Also relevant |
|---|---|---|
| Any task (always) | this file: §1 Direction, §3 Hard bans, §18 Delivery Gate | `references/conflicts.md` if other design skills are installed |
| New page or landing from scratch | `references/layout-glass.md`, `references/hero.md` | `references/color.md`, `references/media.md` |
| Styling existing components | `references/components.md`, `references/layout-glass.md` | this file: §16 |
| Animation and motion | `references/motion.md` | §3.5, §9.4 budget |
| Typography | `references/typography.md` | this file: §16 |
| Color, themes, contrast | `references/color.md` | this file: §16 |
| Icons | `references/components.md` (§8) | — |
| Copy (Russian UI) | `references/copy-ru.md` | §3.6 |
| Accessibility pass | `references/quality-passes.md` (§13) | §18 G |
| Performance pass | `references/quality-passes.md` (§14) | §18 H |
| Mobile layout | `references/quality-passes.md` (§15) | §18 D |
| UI code review of an existing page | §18.5 review format | §3 |
The Delivery Gate (§18) is checked on every handoff, whatever the task. Reference files keep the canonical § numbering — pointers like (§7.5) resolve via the file map at the top.
---
## 1. Direction: Apple-modern
### 1.1 Seven pillars
1. **The hero is the product and the content; the UI steps back.** Color and emotion come from photos, renders and real screenshots. Chrome stays neutral and quiet.
2. **One accent.** One interactive color for everything "press me": links, primary CTA, focus, selected state. No second brand color.
3. **Big, dense grotesque.** Huge short headline with negative tracking, calm 17 px body. Hierarchy comes from size and weight, not color or decoration.
4. **Whitespace as structure.** One screen, one idea. Sections are separated by a surface change (white ↔ "parchment" #f5f5f7 ↔ black), not by lines and shadows.
5. **Materials by meaning.** Translucent glass only on floating chrome: navigation, panels, controls over media. Shadow only on what truly floats (menu, popover, dialog) and on a product standing on a surface.
6. **Physical, interruptible motion.** Instant press feedback, springs without bounce, animation explains cause and effect. One authored scene per page.
7. **Craft in the details.** Concentric radii, optical alignment, tabular numerals, styled `::selection` / `caret` / scrollbar, precise copy, all states.
### 1.2 Apple principles as questions for every screen
| Principle | Question |
|---|---|
| Purpose | Why does this screen exist, and does the design serve it? |
| Agency | Can the user skip, cancel, go back? Undo beats confirm. |
| Responsibility | Is it transparent about data and permissions? |
| Familiarity | Are the patterns familiar and consistent? |
| Flexibility | Does it work at any size, with any input, with enlarged text? |
| Simplicity ≠ minimalism | Has every element earned its place? |
| Craft | Are spacing, alignment, wording and motion finished? |
| Delight | Is there feeling, and is it the right one? "Don't confuse delight with decoration." |
### 1.3 Reference composition: cinematic hero
Breakdown of the provided example (antislop.ai):
- full-bleed cinematic illustration or photo filling the first screen (`min-height: 100svh`), dark vignette scrim at the bottom and edges for legibility;
- transparent header over the hero: wordmark left, 4–5 centered items with `ChevronDown` on dropdowns, on the right one text link and one glass pill CTA;
- centered huge dense grotesque (max 2 lines, tracking -0.03…-0.04em), below it 1–2 subtitle lines in ~80 % white (verify contrast!);
- glass pill field with a monospace `npx …` command and a round copy button (Lucide `Copy` → `Check`);
- small footnote at the bottom center.
This is the page's **only centered moment**. Everything after it uses left-aligned compositions with varied rhythm.
### 1.4 Design Read and Dials
Mandatory first line of the agent's reply, before any code:
```text
Design Read: <page type> for <audience>, Apple-modern language (<cinematic dark | gallery light>), signature: <one thing>. Dials: E2 R2 M2.
```
| Dial | 1 | 2 (default) | 3 |
|---|---|---|---|
| **ENERGY** (contrast, scale, color) | quiet: docs, app | confident: landing | poster: launch, promo |
| **RHYTHM** (density, composition changes) | even | breathing | dramatic shifts |
| **MOTION** | feedback + 1 reveal | + hero sequence and 2–3 reveals | + one scroll scene and a "living image" |
### 1.5 Surface mode (impeccable)
- **Persuade** (landing, marketing, pricing): bold, one strong idea, real imagery.
- **Operate** (app, dashboard, settings): scannability and stability over expression. Motion only for feedback.
- **Read** (docs, articles): reading comes first.
- **Experience** (portfolio, gallery): the artifact leads, the UI steps back.
Choose the mode by surface, not by product: a tool's landing page is still Persuade; a fashion house's docs are still Read.
---
## 3. Hard bans (AI-slop registry)
Everything below is **NEVER**. Deviate only on the user's explicit request (§0.3). The fix follows the arrow.
### 3.1 Color and surfaces
- **Purple-indigo gradients** (purple→blue, purple→pink, cyan on dark), gradient text, aurora, mesh blobs, orbs, halos, glow around buttons and cards. → Atmosphere comes from photos and the product. A gradient is allowed only as a neutral scrim under text on a photo.
- **"Assistant" palettes:** cream #F4F1EA + terracotta #D97757 + a serif; near-black + acid green or vermilion + neon. → Apple neutrals and one accent (§5).
- **Stock Tailwind swatches** (`indigo-500`, `violet-600`, `slate-900`) as the brand. → Own tokens.
- **A shadow on every card** (soft gray `rgba(0,0,0,.1)`), colored halo without offset, hard offset shadows. → Cards are separated by surface tone (§7).
- **Card in a card**; 1px border plus a wide soft shadow on one surface ("ghost card"). → One means only: tone, border or shadow.
- **Decorative backgrounds:** grids, dots, `feTurbulence` noise, grain, diagonal stripes.
- **Colored left stripe** on a card or alert without a real status.
- **Pulsing status dots** and any infinite pulse.
- **Glass on content cards**, glass on glass, glass everywhere at once (header + cards + modals + sidebar). → §7.4.
- **`#000` / `#fff` / hex literals in components.** → Tokens only.
- **Accent on more than ~5 % of the screen area.** The accent is a signal, not a fill.
### 3.2 Typography
- **Inter, Roboto, Arial, system-ui as the headline voice**; Space Grotesk or Geist "by default" without a reason. → Onest (§4).
- **One "accent" word** in a headline set in italic, color or gradient.
- **Eyebrow / kicker above the headline:** letter-spaced caps, pill badge "New", "Beta", "✨ Introducing".
- **Small letter-spaced caps labels**, monospace labels, small caps. → A label is the same font one step smaller, sentence case, no letter-spacing.
- **Section numbering 01 / 02 / 03**, meta lines "A · B · C", "WORD — fragment" constructions.
- **text-shadow, outline or gradient** on display text.
- **Text under 12 px**; body under 16 px; inputs under 16 px on mobile (iOS zooms the page).
- **More than 3 weights** in use, more than one family (plus mono for code only).
- **h1 longer than 2 lines** at any width; 8–9 near-identical font sizes. → At most 5–6 steps, clearly distinct.
- **Justified text**, centered blocks longer than 3 lines.
- **Weight change on hover** (text "jumps").
- **Synthesized bold or italic.** → `font-synthesis: none`.
- `...` instead of `…`; straight quotes `"…"` instead of «guillemets» in Russian.
### 3.3 Composition
- **The landing template:** hero → "Trusted by" → 3 feature cards → "How it works" in 3 steps → testimonials → 3 pricing tiers → CTA → 4-column footer.
- **"Trusted by" logo bar** with made-up logos.
- **Three identical cards** "icon in a rounded square + title + two lines".
- **Bento by default.** Bento only if the content truly has different sizes and weights.
- **Same rhythm for every section**, same spacing, differing only by background color.
- **Everything centered.** Center is allowed once, in the hero (§2 #5).
- **A dashboard, terminal or browser window drawn in HTML** instead of a real screenshot; phone or laptop frames more than once.
- **A CSS box with a gradient** in place of an image; empty placeholder blocks.
- **"Hand-drawn" illustrations**, Undraw, Storyset, 3D blobs, abstract "neural networks".
- **Near-empty screens** (more than one intentional pause per page), "dead" bands over 160 px inside the hero.
- **A lone orphan item** in the last grid row.
- **Decorative text:** rotated captions, "Scroll ↓", "© 2026 · Scroll", local time, coordinates, crop marks.
- **The same fact** repeated 3–4 times on a page.
- **Floating pill-island navigation.** → Full-width header (§10.2).
### 3.4 Components and chrome
- **AI-cliché icons:** `Sparkles`, `WandSparkles`, `Zap`, `Rocket`, `Bot`, `BrainCircuit`, `Gem`, `Lightbulb`, decorative `Star`. Icon in a colored "coin". Emoji in the UI.
- **An "→" arrow on every button and link.** Arrows only where they say something (external link: `ArrowUpRight`; "next" in a step flow).
- **Two filled buttons side by side**, more than one primary per viewport.
- **Faceless CTAs:** «Начать», «Узнать больше», «Попробовать», «Подробнее», "Get Started", "Learn More", "Explore". → Verb + object: «Скачать для macOS» (Download for macOS), «Скопировать команду» (Copy command), «Посмотреть тарифы» (See pricing).
- **Glow as the main clickability cue.**
- **Hover ensemble:** lift + shadow + scale on every card, image zoom on hover, several effects on one element, hover on non-interactive elements.
- **Custom cursor**, cursor trail, magnetic buttons.
- **Capsule badges** with border, glow, dot and caps.
- **A modal by reflex** when the task can be done inline.
- **Celebratory toast** for a result the user already sees.
- **Links to nowhere** (`href="#"`), buttons without behavior, fake form submission.
- **Generic FAQ** of questions nobody asks.
### 3.5 Motion
- **The same fade-up on every section**; "everything moves" (fade + float + scale + bounce).
- **Infinite loops** (except a loading indicator), floating elements, autoplaying carousels and marquees without pause.
- **Bounce and overshoot on UI states**; `ease-in` on enter and on ordinary exits.
- **`transition: all`**; animating `width`, `height`, `top`, `left`, `margin`.
- **Starting from `scale(0)`**; a popover expanding from its center instead of from the trigger.
- **Preloaders, loading counters, "gates"**, scroll-jacking, wheel hijacking, mouse parallax, starfields.
- **Animating keyboard-initiated actions** and frequent actions (100+ times a day).
- **Content hidden until JS or until scroll.** The first screen doesn't wait for scroll; nothing in view stays hidden longer than 900 ms.
- **scrambleText and typewriter effects** on headlines; per-character splits of long headlines (characters only for 1–3 words).
- **Blur-in on body text**; animated large `blur` or `backdrop-filter` on full-screen surfaces.
- **Motion longer than 5 s without a pause control.**
- **`will-change` in a class "just in case".**
### 3.6 Copy
- **Filler words (RU):** революционный, инновационный, передовой, нового поколения, на базе ИИ, бесшовный, мощный, интеллектуальный, идеальный, уникальный, непревзойдённый, «откройте для себя», «погрузитесь», «раскройте потенциал», «на новом уровне», «всё, что нужно», «меняет правила игры», «будущее уже здесь», «путешествие», «экосистема» and «решение» as empty words.
- **(EN):** AI-powered, next-generation, revolutionary, seamless, cutting-edge, intelligent, ultimate, powerful, effortless, unlock, elevate, supercharge, reimagine, game-changer, journey, delve.
- **Patterns:** «Не просто X, а Y» (not just X, but Y), «Будь вы X или Y…» (whether you're X or Y…), «Забудьте о…» (forget about…), «Скажите „прощай“…» (say goodbye to…), adjective triads («быстрый, простой и надёжный»), colon headlines, «Нажмите здесь» (click here), «Упс!» (oops), apologies in errors, exclamation marks, emoji, dashes in UI.
### 3.7 Honesty
- **No invented** numbers, percentages, "10,000+ customers", ratings, testimonials, faces, client logos, awards, certificates.
- **Honest placeholders, visible on the page** (in the page language): `[LOGO]`, `[REAL DATA: number of active teams]`, `[TESTIMONIAL: name, role, company]`, `[PHOTO: product on a desk, daylight, 3:2]`, `[SCREENSHOT: report screen]`. Every placeholder goes into the TODO list in the agent's reply.
- **Demo data** is labeled as demo: `example.com`, `name@example.com`.
- **A form without a backend** honestly says "Form not connected yet" and doesn't fake success.
- **Don't claim what wasn't measured:** "Lighthouse 100", "loads in 0.5 s". Only with a measurement.
### 3.8 Accessibility (the floor)
- `outline: none` without a replacement; a focus ring that animates in; focus hidden under a sticky header.
- `user-scalable=no`, `maximum-scale=1`.
- Icon button without `aria-label`; `<div onClick>` instead of `<button>`; navigation not via `<a href>`.
- Information conveyed by color alone; disabled shown only by opacity.
- Contrast below 4.5:1 for text, below 3:1 for large text, icons, input borders and focus; text on photos without a scrim.
- No `prefers-reduced-motion`; paste blocked in inputs; autoplaying video with sound.
- Skipped heading levels, more than one `h1`, missing `lang` and `<title>`.
### 3.9 "Avoidance aesthetics" are slop too
Removing clichés isn't enough. A sterile page (white background, gray borders, small radius, default font, no images) fails just like a purple gradient. **Idea first:** what only this product has, one signature scene, real images. **Logo-swap test:** if a competitor's logo can be put on the page and nothing breaks, the page isn't done.
---
## 16. Tokens (CSS + Tailwind v4)
### 16.1 `tokens.css` (any stack)
```css
/* tokens.css · Apple-modern Ruleset 1.0 */
:root {
color-scheme: light dark;
/* Color */
--bg: light-dark(#ffffff, #000000);
--bg-2: light-dark(#f5f5f7, #161617);
--surface: light-dark(#ffffff, #1d1d1f);
--surface-2: light-dark(#fafafc, #272729);
--ink: light-dark(#1d1d1f, #f5f5f7);
--ink-2: light-dark(#6e6e73, #a1a1a6);
--ink-3: #86868b;
--hairline: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .10));
--fill: light-dark(rgb(0 0 0 / .04), rgb(255 255 255 / .08));
--fill-2: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .14));
--accent: #0071e3;
--accent-hover: #006edb;
--accent-pressed: #0066cc;
--accent-text: light-dark(#0066cc, #2997ff);
--on-accent: #ffffff;
--focus: light-dark(#0071e3, #2997ff);
--danger: light-dark(#d70015, #ff6961);
--success: light-dark(#207a39, #30d158);
--warning: light-dark(#c93400, #ff9f0a);
--on-media: #ffffff;
--on-media-2: rgb(255 255 255 / .8);
--media-solid: #1d1d1f;
/* Glass */
--glass-border: light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .10));
--glass-highlight: light-dark(rgb(255 255 255 / .55), rgb(255 255 255 / .08));
--glass-media-fill: rgb(255 255 255 / .14);
--glass-media-border: rgb(255 255 255 / .18);
/* Fonts (next/font sets --font-onest and --font-geist-mono) */
--font-sans: var(--font-onest, "Onest"), "Onest Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: var(--font-geist-mono, "Geist Mono"), "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Type scale */
--text-hero: clamp(2.5rem, 1.25rem + 5.2vw, 5.75rem);
--text-display: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
--text-title: clamp(2rem, 1.5rem + 1.9vw, 3rem);
--text-headline: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
--text-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
--text-body: 1.0625rem;
--text-callout: 0.9375rem;
--text-caption: 0.8125rem;
--text-fine: 0.75rem;
/* Spacing and rhythm */
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
--space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 5rem; --space-10: 6rem;
--space-11: 7.5rem; --space-12: 10rem; --space-13: 12.5rem;
--section-sm: clamp(4rem, 3rem + 4vw, 7.5rem);
--section: clamp(5rem, 3rem + 7vw, 10rem);
--section-lg: clamp(6rem, 3rem + 10vw, 12.5rem);
/* Layout */
--container: 80rem; --container-wide: 90rem; --measure: 65ch;
--gutter: clamp(1.25rem, 4vw, 4rem); --grid-gap: clamp(1rem, 2vw, 1.5rem);
--header-h: 3.5rem;
/* Radii */
--radius-xs: 6px; --radius-sm: 10px; --radius-field: 12px; --radius-md: 16px;
--radius-card: 22px; --radius-panel: 28px; --radius-pill: 999px;
/* Shadows: each layer's color depends on the theme (the §7.3 variant in one token) */
--shadow-float:
0 0 0 1px light-dark(transparent, rgb(255 255 255 / .08)),
0 1px 1px light-dark(rgb(0 0 0 / .04), transparent),
0 4px 12px light-dark(rgb(0 0 0 / .06), rgb(0 0 0 / .3)),
0 16px 40px light-dark(rgb(0 0 0 / .10), rgb(0 0 0 / .5));
--shadow-modal:
0 0 0 1px light-dark(transparent, rgb(255 255 255 / .08)),
0 2px 4px rgb(0 0 0 / .04),
0 12px 32px light-dark(rgb(0 0 0 / .12), rgb(0 0 0 / .4)),
0 40px 80px light-dark(rgb(0 0 0 / .16), rgb(0 0 0 / .6));
--shadow-product: drop-shadow(3px 5px 30px rgb(0 0 0 / .22));
/* Motion */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
--ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--dur-press: 120ms; --dur-hover: 180ms; --dur-ui: 240ms; --dur-overlay: 320ms;
--dur-sheet: 450ms; --dur-reveal: 800ms; --dur-open: 1100ms;
--stagger-line: 90ms; --stagger-item: 60ms; --stagger-char: 24ms;
/* Layers */
--z-raised: 10; --z-sticky: 20; --z-header: 40; --z-popover: 60; --z-overlay: 100; --z-toast: 1000;
}
/* Manual theme choice over the system one */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
```
`light-dark()` is supported in Chrome 123+, Safari 17.5+, Firefox 120+. For older browsers, duplicate the colors in `@media (prefers-color-scheme: dark)`.
### 16.2 Base
```css
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 100%;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none;
text-size-adjust: 100%;
overflow-x: clip;
scroll-padding-top: calc(var(--header-h) + 1rem);
accent-color: var(--accent);
caret-color: var(--accent);
scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
}
body { margin: 0; min-height: 100svh; overflow-x: clip; font-size: var(--text-body); line-height: 1.5; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }
img, video { display: block; max-width: 100%; height: auto; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
```
The 17 px font size is set on `body`, not `html`: otherwise `1rem` becomes 17 px and the whole scale shifts.
### 16.3 Tailwind v4
```css
/* app/globals.css */
@import "tailwindcss";
@import "./tokens.css"; /* shadows, glass, durations, section rhythm, header offsets */
@theme {
--color-*: initial; /* drop the stock palette (indigo-500 etc.) */
--color-bg: light-dark(#ffffff, #000000);
--color-bg-2: light-dark(#f5f5f7, #161617);
--color-surface: light-dark(#ffffff, #1d1d1f);
--color-surface-2: light-dark(#fafafc, #272729);
--color-ink: light-dark(#1d1d1f, #f5f5f7);
--color-ink-2: light-dark(#6e6e73, #a1a1a6);
--color-ink-3: #86868b;
--color-hairline: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .10));
--color-fill: light-dark(rgb(0 0 0 / .04), rgb(255 255 255 / .08));
--color-fill-2: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .14));
--color-accent: #0071e3;
--color-accent-hover: #006edb;
--color-accent-pressed: #0066cc;
--color-accent-text: light-dark(#0066cc, #2997ff);
--color-on-accent: #ffffff;
--color-focus: light-dark(#0071e3, #2997ff);
--color-danger: light-dark(#d70015, #ff6961);
--color-success: light-dark(#207a39, #30d158);
--color-warning: light-dark(#c93400, #ff9f0a);
--color-on-media: #ffffff;
--color-media-solid: #1d1d1f;
--text-*: initial; /* our scale only, no 9 near-identical sizes */
--text-hero: clamp(2.5rem, 1.25rem + 5.2vw, 5.75rem);
--text-hero--line-height: 1;
--text-hero--letter-spacing: -0.035em;
--text-hero--font-weight: 600;
--text-display: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
--text-display--line-height: 1.04;
--text-display--letter-spacing: -0.03em;
--text-display--font-weight: 600;
--text-title: clamp(2rem, 1.5rem + 1.9vw, 3rem);
--text-title--line-height: 1.08;
--text-title--letter-spacing: -0.025em;
--text-title--font-weight: 600;
--text-headline: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
--text-headline--line-height: 1.2;
--text-headline--letter-spacing: -0.015em;
--text-headline--font-weight: 600;
--text-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
--text-lead--line-height: 1.35;
--text-lead--letter-spacing: -0.01em;
--text-body: 1.0625rem;
--text-body--line-height: 1.5;
--text-callout: 0.9375rem;
--text-callout--line-height: 1.45;
--text-caption: 0.8125rem;
--text-caption--line-height: 1.38;
--text-caption--letter-spacing: 0.005em;
--text-fine: 0.75rem;
--text-fine--line-height: 1.33;
--text-fine--letter-spacing: 0.01em;
--radius-*: initial;
--radius-xs: 6px;
--radius-sm: 10px;
--radius-field: 12px;
--radius-md: 16px;
--radius-card: 22px;
--radius-panel: 28px;
--radius-pill: 999px;
--ease-*: initial;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
--drop-shadow-product: 3px 5px 30px rgb(0 0 0 / .22);
--container-page: 80rem;
--container-wide: 90rem;
}
@theme inline {
--font-sans: var(--font-onest), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;
}
@utility glass {
background-color: color-mix(in srgb, var(--color-bg) 72%, transparent);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
backdrop-filter: blur(24px) saturate(1.5);
}
@utility glass-media {
color: var(--color-on-media);
background-color: var(--glass-media-fill);
border: 1px solid var(--glass-media-border);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
backdrop-filter: blur(12px) saturate(1.4);
}
```
- Shadows and durations come from `tokens.css`: `shadow-(--shadow-float)`, `shadow-(--shadow-modal)`, `duration-(--dur-ui)`.
- One source of truth. In a Tailwind project, the scale, radii and curves live in `@theme`, while `tokens.css` keeps shadows, glass, durations, section rhythm and `--header-h` (identical names with identical values don't conflict, but must never diverge).
- Spacing: use only multiples of Tailwind's base unit (`--spacing: 0.25rem`) that match the §6.1 scale: `1, 2, 3, 4, 6, 8, 12, 16, 20, 24, 30, 40, 50`.
- Button example: `class="inline-flex h-11 items-center gap-2 rounded-pill bg-accent px-5 text-callout font-medium text-on-accent transition-[transform,background-color] duration-(--dur-press) ease-out hover:bg-accent-hover active:scale-[.97]"`. In Tailwind v4, hover styles apply only on hover-capable devices by default.
---
## 18. Delivery Gate (pre-handoff check)
### 18.1 Format
The agent hands off with a table. **A FAIL blocks handoff. "Not checked" counts as FAIL.** Evidence: a screenshot path, a measured value, `file:line` or command output.
| # | Check | Status | Evidence |
|---|---|---|---|
| B2 | h1 at most 2 lines at 320–1920 px | PASS | `shots/hero-320.png` … `hero-1920.png` |
| C1 | `--ink-2` contrast on `--bg-2` | PASS | 4.66:1 |
### 18.2 Checklist
**A. Direction and anti-slop**
- A1 Design Read, Dials and surface mode are recorded (§1.4–1.5).
- A2 One signature, one centered moment, the logo-swap test passes.
- A3 Not a single item from §3 (autochecks §18.3 + screenshot review).
- A4 Glass only in the functional layer, at most 2 roles per viewport, fallbacks in place.
- A5 One accent, at most ~5 % of the area.
**B. Typography**
- B1 Onest loads with Cyrillic (Network tab), font swap without a jump.
- B2 h1 at most 2 lines at 320, 390, 768, 1024, 1280, 1440, 1920 px.
- B3 Tracking and leading per §4.4; at most 3 weights and 6 sizes per page.
- B4 Guillemets, `…`, non-breaking spaces, no dangling prepositions or one-word lines, no dashes in UI.
- B5 Figures in prices, tables and counters are tabular.
**C. Color and contrast**
- C1 Measurement table: text from 4.5:1, large text from 3:1, icons, input borders and focus from 3:1.
- C2 Text over media measured at the lightest point beneath it.
- C3 Dark theme: every surface checked, the toggle works without a flash.
- C4 Tokens only; no hex literals outside `tokens.css`.
- C5 `::selection`, `caret-color`, `scrollbar-color`, `theme-color` are styled.
**D. Grid and responsive**
- D1 No horizontal scroll at 320 px.
- D2 Hero headline, phrase and action visible without scrolling at 1280×800 and 390×844.
- D3 Section rhythm varies, all spacing comes from the scale, no orphans in grids.
- D4 At 1920 px content is bounded by the container; no extra columns.
**E. Components**
- E1 Every control has hover, focus, active, disabled, loading, error (state screenshots).
- E2 One primary per viewport; button labels don't wrap.
- E3 Forms: visible labels, error at the field, focus moves to the first error, paste allowed.
- E4 Empty, loading and error states exist and are written per §10.10–10.11.
- E5 No links to nowhere and no buttons without behavior.
**F. Motion**
- F1 The chosen MOTION budget is respected: one entry pattern, one scroll choreography.
- F2 Motion tokens only; no `transition: all`; transform and opacity animated (filter and clip-path deliberately).
- F3 Reduced motion (DevTools emulation): no movement, all content visible.
- F4 With JS disabled content is visible; if scripts fail, the safety net fires after 2.5 s.
- F5 Animations are interruptible, input isn't blocked, motion longer than 5 s can be paused.
- F6 At 10 % speed: no jank, origin at the trigger, exit faster than enter.
**G. Accessibility**
- G1 Full keyboard pass: order, visible focus, Esc, focus traps only in modals.
- G2 Screen reader: landmarks, one h1, no skipped levels, icon-button labels, live regions.
- G3 Touch targets from 44×44 (min 24×24).
- G4 200 % zoom, 320 px width, forced colors, reduced transparency, increased contrast.
**H. Performance**
- H1 LCP, INP, CLS measured and reported as numbers (lab; field data if available).
- H2 The LCP image is not lazy and has `fetchpriority="high"`; all media have dimensions; AVIF / WebP.
- H3 One variable font file, only the critical one preloaded.
- H4 Tested on iPhone Safari in Low Power Mode or with 4× CPU slowdown.
**I. Honesty**
- I1 No invented numbers, testimonials, logos or faces.
- I2 All placeholders listed as a TODO list in the reply.
- I3 A form without a backend says so.
**J. Code**
- J1 Imports: `motion/react` (no `framer-motion`), named Lucide icons, modular anime.js.
- J2 No `outline: none` without a replacement, no `100vh`, no `overflow-x: hidden` on html and body, no `user-scalable=no`.
- J3 Production build checked: `backdrop-filter` and the `-webkit-` prefix are in place.
### 18.3 Autochecks
```bash
# Banned patterns
rg -n "transition:\s*all|outline:\s*none|\b100vh\b|overflow-x:\s*hidden|user-scalable=no|maximum-scale=1|from ['\"]framer-motion['\"]" src
# Hex literals outside tokens
rg -n "#[0-9a-fA-F]{3,8}\b" src -g '!**/tokens.css' -g '!**/*.svg'
# AI-cliché icons and whole-library imports
rg -n "\b(Sparkles|WandSparkles|Rocket|BrainCircuit|Bot|Gem|Zap)\b|import \* as \w+ from ['\"]lucide" src
# Filler words (RU + EN)
rg -n -i "революц|инновац|бесшовн|нового поколения|на базе ии|раскройте|погрузитесь|seamless|cutting-edge|next-gen|revolutionary|supercharge|unlock" src
# Dashes in UI copy
rg -n " — | – " src -g '*.{tsx,jsx,vue,svelte,astro,html,mdx}'
# Animating layout properties
rg -n "transition:[^;]*\b(width|height|top|left|margin|padding)\b" src
```
All of the above are bundled as one command: `scripts/gate.sh <source-dir>` (bash + ripgrep; PASS/FAIL per check, exit 1 on any finding). Run it instead of retyping the patterns.
### 18.4 Self-score and "remove one accessory"
Before handoff, score each axis 1 to 5. **Anything below 4 gets fixed before handoff.**
| Axis | Question |
|---|---|
| **P** Purpose | Does every element serve the screen's goal? |
| **H** Hierarchy | Is it clear within 3 seconds what matters and what to press? |
| **E** Execution | Are spacing, alignment, states and copy finished? |
| **S** Specificity | Does the page belong only to this product (logo-swap test)? |
| **R** Restraint | One accent, one signature, nothing extra? |
| **V** Vitality | Is there life (media, rhythm, motion) rather than a sterile template? |
Then **remove one decorative element** and compare screenshots. If it's no worse without it, it doesn't come back.
### 18.5 Review format for an existing UI
| Severity | Where | Before | After | Why |
|---|---|---|---|---|
| Blocker | `Hero.tsx:42` | `outline: none` on a button | `:focus-visible` ring 2 px `--focus` | WCAG 2.4.7, §13 |
| Major | «Возможности» section | 3 identical cards with icons in circles | one large scene + a list | template, §3.3 |
| Minor | Footer | `...` | `…` | §4.8 |
Severity: **Blocker** (accessibility, honesty, broken behavior), **Major** (slop, hierarchy, motion), **Minor** (polish). Verdict: "Block", "Changes needed" or "Accepted".
---
§2, §4–§15, §17 and §19–§20 live in `references/` (file map at the top). § numbering is canonical across the package.