Style Gallery.
Expression가이드실험적 가이드

Nocturne Editorial Direction

A dark, glowing, editorial direction with concrete type, color, texture, and motion-density values.

이 자료로 구현하기

원문 주소와 버전이 포함된 요청문입니다. 복사한 뒤 만들 화면과 요구사항을 채워 에이전트에게 전달하세요.

원문 가이드 ENGLISH

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 city at 3am seen through glass. Dark ground, warm glowing accents, oversized serif display, and quiet mono labels.

:root {
  /* Ground and text */
  --ink: #07070a;
  --ink-2: #111118;           /* raised surfaces */
  --paper: #efe9df;           /* primary text: warm, never pure white */
  --paper-dim: rgb(239 233 223 / 0.62);
  --line: rgb(239 233 223 / 0.14);
  /* Accents: one hot, one cool, one highlight */
  --ember: #ff5a36;
  --violet: #7b5cff;
  --haze: #9bd1ff;
  /* Type */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
Role Value
Hero display --serif 400, clamp(3.1rem, 11.5vw, 11rem), tracking -0.035em, line height 0.9, text-wrap: balance
Section display --serif 400, clamp(2.6rem, 7vw, 7rem), tracking -0.03em, line height 0.95
Body --sans 350, clamp(1rem, 0.95rem + 0.25vw, 1.125rem), line height 1.55, dimmed to --paper-dim for secondary copy
Labels --mono 0.75rem, uppercase, tracking 0.14em
Accent word Italic serif with linear-gradient(100deg, var(--ember), #ffb454 40%, var(--violet)) clipped to text, one word per headline
Surfaces --ink-2 with 1px --line border, radius 1.5rem, two corner radial gradients from the card's own accent pair
Buttons Pill radius, primary is --paper on --ink, ghost is a --line border only
Texture Grain at 0.22 opacity, mix-blend-mode: overlay
Atmosphere Gradient aurora behind the hero, optional WebGL field
Motion density One entrance sequence, three to four scroll scenes, one ambient loop. Easing expo.out, entrances 1.1-1.3s, 0.06s word stagger

Opinionated Guidance

Use the gradient only on one italic word per headline; used on whole sentences it turns into a gaming UI. Keep body copy dim and let display type carry the contrast.

Platform-Specific Guidance

background-clip: text still needs the -webkit- prefix in some engines; declare both. Large blurred gradients are expensive on low-end GPUs; keep them to three blobs and stop their animation under reduced motion.

Unsupported Absolutes

These values produced one legible reference page. They are not proven for long-form reading, data-dense UI, or light-mode contexts.

Verification Contract

A page using this direction passes node scripts/check-showcase.mjs. Check --paper-dim body text against the actual ground in its screenshots; over bright aurora areas it may need a darkening gradient layer, as the reference hero uses.

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: Warm Print Direction.

Expression 전체 ↗