Warm Print Direction
A light, warm, print-inspired direction with concrete type, color, texture, and motion-density values.
이 자료로 구현하기
원문 주소와 버전이 포함된 요청문입니다. 복사한 뒤 만들 화면과 요구사항을 채워 에이전트에게 전달하세요.
Primary role: named art direction with starting values.
Repository Boundary
These values are a starting point for product pages in showcase/ or a consumer's own CSS. They are not tokens, defaults, or Layout inputs.
Reusable Method
Mood: a well-made independent magazine. Off-white paper, heavy grotesk display, ink-black text, one saturated spot color, visible grid lines, halftone texture.
:root {
--paper: #f4efe6;
--paper-2: #ebe4d6; /* inset panels */
--ink: #141210;
--ink-dim: rgb(20 18 16 / 0.64);
--rule: rgb(20 18 16 / 0.18);
--spot: #1f4bff; /* one spot color, used sparingly */
--spot-2: #ff4a1c; /* optional second spot, never beside the first */
--grotesk: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
--text: "Newsreader", Georgia, serif;
--mono: "IBM Plex Mono", ui-monospace, monospace;
--gutter: clamp(1rem, 3vw, 2.5rem);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}| Role | Value |
|---|---|
| Hero display | --grotesk 800, clamp(3rem, 12vw, 12.5rem), tracking -0.05em, line height 0.85, uppercase optional |
| Section display | --grotesk 700, clamp(2.2rem, 6vw, 6rem), tracking -0.04em |
| Body | --text 400, 1.125rem, line height 1.6, max 34rem measure |
| Labels | --mono 0.72rem, uppercase, tracking 0.1em, preceded by a --rule hairline |
| Grid | Visible 1px --rule column lines on a 12-column grid at 64rem and wider |
| Surfaces | Flat --paper-2, no shadows, no radius or at most 0.25rem |
| Images | Duotone via mix-blend-mode: multiply over --spot, or grayscale plus halftone |
| Motion density | Few entrances, crisp: 0.6-0.8s, --ease-out, line-by-line reveals, one horizontal marquee of headlines |
Opinionated Guidance
Light editorial pages die from timidity. Make the display type uncomfortably big, let one headline break the grid, and keep everything else strictly on it.
Platform-Specific Guidance
Multiply blending needs an opaque ancestor background to blend against; set --paper on the section, not only on body, or the effect disappears inside isolated stacking contexts.
Unsupported Absolutes
No reference build exists yet for this direction; its values are proposals until a showcase work uses them and passes review.
Verification Contract
A page using this direction passes node scripts/check-showcase.mjs. Check --ink-dim text contrast on --paper-2 panels and confirm the grid lines disappear below 64rem.
Source, License, And Attribution
Locally authored direction. Font families are Google Fonts under the SIL Open Font License; no upstream prose or code is reproduced.
IA Navigation
Parent: Expression. Next: Gradient Atmosphere.