# Tactile Luxury Editorial
크림-샌드 종이 위에 미세한 그레인 텍스처와 비대칭 매거진 그리드를 얹은 촉각적 럭셔리 에디토리얼 — 세리프와 산세리프가 한 면에서 만난다.
- taxonomy: warm-paper · tactile, luxury-editorial, warm-paper, magazine-grid, serif-sans-mix, grain-texture, earth-tone · complexity=medium
- page types: landing, editorial, portfolio, marketing
- best for: 브랜드 매거진·저널 사이트, 럭셔리·호스피탈리티 랜딩, 에디토리얼 포트폴리오
- avoid for: 데이터 밀도 높은 대시보드, 차갑고 미니멀한 테크 SaaS, 네온·다크 게이밍 UI
- provenance: authored (design-diversity 팩 'web-tactile-luxury-editorial' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# Tactile Luxury Editorial
## Overview
Warm cream-and-sand paper, a whisper of procedural grain, and a serif-meets-sans magazine layout. This is 2026 "tactile maximalism" tuned for luxury editorial: the background is never pure white, surfaces carry a faint printed-noise texture, and slightly rounded cards float on soft ink-brown shadows like sheets of stacked paper. Hierarchy comes from an asymmetric multi-column grid, a serif/sans type mix, and two disciplined earth accents — mustard and olive.
## Colors & Roles
Foundation is warm paper: `background` cream-sand (#efe8da), `card` a lighter cream (#f6f1e6), `secondary`/`muted` a deeper sand (#e7ddc9) for alternating sections and footer. Text is ink brown-black (#2c2620, ~11:1 on cream — WCAG AAA); `muted-foreground` is a softer taupe (#6f6557) for meta, captions, page numbers. Exactly two chromatic accents: `primary` = mustard (#b8862f) for CTAs, kickers, links, tags; `accent` = olive (#5f6b3c) for rules, borders, quotes. Combined accent area stays under ~8%, and the two are never used together in one component (mustard = emphasis text/tags, olive = rules/borders). `border` and `destructive` are derived (ink-brown at 12% for borders; a warm terracotta authored for destructive since the pack ships none).
## Typography Rules
Serif + sans mix. Display and headlines use a transitional serif (Spectral, 400–600): H1 `clamp(2.4rem, 5vw, 4.2rem)`, weight 500, letter-spacing −0.01em, line-height 1.16. Leads and pull-quotes use Source Serif 4 italic. Body, kickers, and meta use Inter: body `1.0625rem`/400/line-height 1.72 with 62–72ch measure; kickers `0.75rem`/600 uppercase with wide 0.16em tracking in mustard; meta `0.8rem`/500 in taupe. Scale ratio ≈ 1.25.
## Layout Principles
Max content width 1180px, 32px gutters, mobile/desktop padding 24/64px. The 12-column grid is deliberately asymmetric — never split evenly. Lead text spans ~5 columns against a 7-column image; the next section flips to 4/8. Cards align to the grid but are nudged 24–48px out of alignment to create magazine rhythm. Long body sections go two-column on desktop (`column-count: 2`, 48px gap, olive 1px rule between columns). Vertical rhythm is balanced: `clamp(80px, 9vw, 128px)` between sections — neither airy nor dense.
## Depth & Elevation
Tactile, not flat. A subtle procedural grain overlays surfaces — `feTurbulence` (baseFrequency ~0.9) or a repeating radial-gradient dot noise at 5–8% opacity with `mix-blend-mode: multiply`. Cards float on warm multi-layer shadows: `0 1px 2px rgba(44,38,32,0.06), 0 8px 24px rgba(44,38,32,0.10)`. Shadows are always ink-brown toned — never gray. No gradients, glass, or blur panels.
## Shapes
Corners are softly rounded, not sharp: cards and images at radius 8px (a paper-corner feel), buttons at 6px. Large radii (>12px) and fully squared (radius 0) cards are both off-limits.
## Component Stylings
- **Button**: mustard solid fill (`primary`) with cream text, radius 6px, padding 14px 28px, weight 600. Ghost variant: 1px ink border, transparent fill, ink text. Hover lifts translateY(−1px) with a deeper shadow over 260ms.
- **Card**: cream `card` surface, radius 8px, 1px ink-12% border, warm multi-layer shadow. Small image + mustard kicker + Spectral title + Inter excerpt + olive 1px rule + page-number meta. Lay three across, offset the middle one 32px down.
- **Input**: 1px border, radius 6px, cream surface; focus border goes mustard (`ring`).
- **Nav**: hairline bottom rule, Spectral serif wordmark left, uppercase Inter kicker links right.
- **Image**: radius 8px with a faint multiply grain overlay (printed feel), saturation −8%.
- **Footer**: deeper sand (`secondary`) ground, 2px mustard top rule, Spectral wordmark left, Inter uppercase menu columns right, balanced 64px padding, small olive copyright.
## Motion
Subtle. Scroll-entry is opacity 0→1 with translateY(16px→0) over 420ms ease-out, cards staggered 60ms. Card hover lifts translateY(−3px) with a deeper shadow (260ms); links thicken a mustard underline 1px→2px; image grain opacity ticks up slightly. No parallax, bounce, or rotation. The texture itself is static.
## Do's and Don'ts
**Do:** keep the ground cream-sand with a faint procedural grain; mix serif headlines with sans body; build an asymmetric offset grid; hold accents to mustard + olive under ~8% area; use warm ink-brown shadows and 8px paper corners.
**Don't:** use pure-white backgrounds; use gray shadows; repeat an even 3-card grid; combine mustard and olive in one component or add a third accent; use radius >12px or 0 on cards; use glass/blur, neon, multicolor or gradient-text; ship stock texture image files (generate texture in SVG/CSS).
## Responsive Behavior
Below 1100px and 720px breakpoints the asymmetric grid collapses toward single-column; two-column body reflows to one; padding drops to 24px. Display type scales via `clamp()`. Card offsets flatten on mobile so the reading order stays clean.
## Agent Prompt Guide
> Build this in the 'Tactile Luxury Editorial' style: a warm cream/sand paper ground (never pure white) with subtle procedural grain, an asymmetric multi-column magazine grid (1180px, 32px gutters, offset cards), Spectral serif headlines mixed with Inter body, uppercase wide-tracked mustard kickers, exactly two earth accents (mustard + olive) under ~8% area and never combined in one component, 8px paper-corner cards on soft warm ink-brown shadows, and subtle 420ms fade-up motion.
## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-tactile-luxury-editorial` — an authored spec, so all confidence is `manual`. Light (cream/sand) is canonical and traces its background, surfaces, text, mustard, and olive directly to the pack's measured hex. The dark theme is not supplied by the pack and is authored faithfully as a warm dark-paper/ink variant (never neutral gray). `border` and `destructive` are derived, not pack originals. Fonts (Spectral, Source Serif 4, Inter) are open Google Fonts (OFL); grain texture is procedural SVG/CSS, no stock assets.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Tactile Luxury Editorial — theme.css (generated, do not edit) */
:root {
--radius: 8px;
--radius-selector: 6px;
--radius-field: 6px;
--font-sans: 'Inter', system-ui, sans-serif;
--font-serif: 'Spectral', Georgia, serif;
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
--font-display: 'Spectral', Georgia, serif;
--spacing: 8px;
--shadow: 0px 8px 24px 0px color-mix(in oklab, oklch(0.273 0.014 67.2) 10%, transparent);
--ks-display-weight: 500;
--ks-display-tracking: -0.01em;
--background: oklch(0.933 0.020 84.6);
--foreground: oklch(0.273 0.014 67.2);
--card: oklch(0.959 0.016 86.4);
--card-foreground: oklch(0.273 0.014 67.2);
--popover: oklch(0.977 0.013 86.8);
--popover-foreground: oklch(0.273 0.014 67.2);
--primary: oklch(0.654 0.118 77.4);
--primary-foreground: oklch(0.933 0.020 84.6);
--secondary: oklch(0.900 0.029 84.6);
--secondary-foreground: oklch(0.273 0.014 67.2);
--muted: oklch(0.900 0.029 84.6);
--muted-foreground: oklch(0.512 0.025 76.3);
--accent: oklch(0.506 0.070 120.7);
--accent-foreground: oklch(0.977 0.013 86.8);
--destructive: oklch(0.550 0.150 32);
--destructive-foreground: oklch(0.977 0.013 86.8);
--border: oklch(0.860 0.013 82);
--input: oklch(0.860 0.013 82);
--ring: oklch(0.654 0.118 77.4);
--chart-1: oklch(0.654 0.118 77.4);
--chart-2: oklch(0.506 0.070 120.7);
--chart-3: oklch(0.512 0.025 76.3);
--chart-4: oklch(0.273 0.014 67.2);
--chart-5: oklch(0.900 0.029 84.6);
}
.dark {
--background: oklch(0.205 0.010 70);
--foreground: oklch(0.920 0.016 85);
--card: oklch(0.245 0.012 72);
--card-foreground: oklch(0.920 0.016 85);
--popover: oklch(0.245 0.012 72);
--popover-foreground: oklch(0.920 0.016 85);
--primary: oklch(0.700 0.120 78);
--primary-foreground: oklch(0.205 0.010 70);
--secondary: oklch(0.275 0.012 72);
--secondary-foreground: oklch(0.920 0.016 85);
--muted: oklch(0.275 0.012 72);
--muted-foreground: oklch(0.680 0.022 78);
--accent: oklch(0.580 0.075 121);
--accent-foreground: oklch(0.205 0.010 70);
--destructive: oklch(0.600 0.160 32);
--destructive-foreground: oklch(0.205 0.010 70);
--border: oklch(0.320 0.012 72);
--input: oklch(0.320 0.012 72);
--ring: oklch(0.700 0.120 78);
--chart-1: oklch(0.700 0.120 78);
--chart-2: oklch(0.580 0.075 121);
--chart-3: oklch(0.680 0.022 78);
--chart-4: oklch(0.920 0.016 85);
--chart-5: oklch(0.275 0.012 72);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Volume 04 — The Warmth Issue
Paper you can almost feel.
Grain, sand, and ink — an editorial ground that reads like it was printed, not rendered.
Flatness gave way to warmth; screens learned to feel like surfaces again.
p. 012
Field Note
Two earth tones
Mustard for emphasis, olive for rules — never mixed inside one component.
p. 018
Craft
Serif meets sans
Spectral headlines, Inter body — one page, two voices in harmony.
p. 024
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/tactile-luxury-editorial.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `