8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
63 lines
2.9 KiB
CSS
63 lines
2.9 KiB
CSS
/* ==========================================================================
|
|
Lumina Optics — 디자인 토큰 (2026-10 재작업)
|
|
컨셉 한 문장: 18% 그레이 카드 위에 놓인 검은 시험 상자 — 색은 프리즘이 만든
|
|
스펙트럼과 632.8 nm 헬륨네온 빨강 한 줄뿐이다.
|
|
재작업 이유: 2026-09판은 pulsegate·synapse-bci와 같은 틀(니어블랙 바탕, 모노
|
|
소문자 워드마크, 왼쪽 글·오른쪽 다크 패널, radius 2px, IBM Plex)
|
|
이었다(레드팀 06 P0-1, tools/similarity.mjs 유사도 0.84).
|
|
결정:
|
|
- 바탕: 사진가가 노출을 맞추는 중성 회색 카드에서 출발해 본문 대비 7:1이
|
|
나오도록 명도를 끌어올린 중간 회색(L*≈68). 어두운 면은 시험 상자 하나.
|
|
- 서체: 한글 본문·표제 모두 SUIT. 숫자가 주인공인 페이지라 SUIT의 숫자 폭과
|
|
900 굵기를 쓴다. 모노는 쓰지 않는다 — 수치는 tabular-nums로 맞춘다.
|
|
- 형태: 렌즈는 원이다. 상자·패널은 큰 반경(28px), 조작부는 알약형.
|
|
- 모션: 스크롤 등장 없음. 조작(슬라이더·드래그)에만 반응한다.
|
|
하지 않은 것: 스펙트럼 그라디언트 배경, 'unrivaled clarity' 카피, 3열 카드,
|
|
스크롤 리빌. 이유: 색과 움직임은 시험대가 소유한다.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* 타입 — 최대 표제(88px) ÷ 본문(17px) ≈ 5.2배. 숫자를 이미지로 쓴다. */
|
|
--step--1: 0.8125rem;
|
|
--step-0: 1.0625rem;
|
|
--step-1: 1.25rem;
|
|
--step-2: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
|
|
--step-3: clamp(2.375rem, 1.2rem + 4.6vw, 5.5rem);
|
|
--step-num: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);
|
|
|
|
--leading-tight: 1.08;
|
|
--leading-normal: 1.7;
|
|
|
|
--font-body: "SUIT Variable", "SUIT", "Apple SD Gothic Neo", sans-serif;
|
|
|
|
/* 색 — 회색 카드와 검은 시험 상자 */
|
|
--surface: #a6a9a9; /* 중간 회색 바탕 — 본문 잉크 대비 ≈7.8:1 */
|
|
--surface-raised: #b9bcbc; /* MTF·표 면 */
|
|
--surface-chamber: #070808; /* 시험 상자 */
|
|
--ink: #0d0f10;
|
|
--ink-muted: #2c3133; /* 회색 바탕 위 대비 ≈4.9:1 */
|
|
--ink-on-dark: #e9eceb;
|
|
--ink-on-dark-muted: #a9b0b1;
|
|
--line: #7e8383;
|
|
--line-strong: #0d0f10;
|
|
--accent: #d4231a; /* 632.8 nm 헬륨네온 빨강 — 선·점·눈금 전용, 글자 금지 */
|
|
--accent-on-dark: #ff5a4a;
|
|
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 1rem;
|
|
--space-4: 1.5rem;
|
|
--space-5: 2.5rem;
|
|
--space-6: 4rem;
|
|
--space-7: 6rem;
|
|
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
|
|
|
--radius: 28px;
|
|
--radius-pill: 999px;
|
|
|
|
--container: 1280px;
|
|
--pad-inline: clamp(1rem, 0.6rem + 2.4vw, 4.5rem);
|
|
|
|
--dur-quick: 140ms;
|
|
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|