Acid Display Tech Zine
짙은 캔버스 위에서 애시드 민트·울트라바이올렛 듀오가 충돌하고, 굵은 포스터 디스플레이 활자와 의도적으로 어긋난 비대칭 진(zine) 레이아웃·하드 오프셋 스냅 모션으로 짠 테크 매거진 스타일.
설명
거의 검정인 다크 캔버스를 기본값으로, 강조색을 하나가 아니라 애시드 민트와 울트라바이올렛 두 색의 듀오로 충돌시켜 활기를 만든다. 헤드라인은 굵은 디스플레이 활자로 포스터처럼 크게 짜고, 요소는 12열 그리드에 정확히 정렬하지 않고 살짝 어긋나거나 겹쳐 진(zine) 콜라주처럼 거칠게 배치한다. 깊이는 그림자가 아니라 패널 명도 차와 듀오 컬러 보더로 만들며, 호버·진입은 하드 오프셋 스냅과 120–180ms의 단호한 트랜지션으로 처리한다.
타입 스케일
index Ag 스타일 견본 Style Specimen
display Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
kicker Ag 스타일 견본 Style Specimen
포스터 디스플레이(Clash Display 700)로 헤드라인·거대 인덱스 번호를 짜고, 본문·키커는 Inter로. 키커/라벨은 대문자 + 넓은 자간(0.14em)에 민트/바이올렛 배색. 모노(JetBrains Mono)는 코드·메타 스탬프용 보조.
골든 예제 (exemplar)
Do
- 강조는 애시드 민트 + 울트라바이올렛 두 색을 듀오로 함께 쓴다
- 헤드라인은 굵은 Clash Display로 포스터처럼 크게 짠다
- 빈 near-black 영역은 거대 이슈 번호·듀오톤 패널·태그 칩·zine 패턴으로 채운다
- 깊이는 하드 오프셋 스냅 그림자(4px 4px 0)와 듀오 보더로만 만든다
- 요소를 그리드에 정확히 정렬하지 않고 의도적으로 어긋나게(회전 -3~3°, 겹침) 배치한다
Don't
- 강조색을 하나로 줄이기 금지 — 민트+바이올렛 듀오가 정체성
- 원색(빨강·노랑) + 하드 섀도 조합 금지 (neo-brutalism 회피)
- 둥근 카드(radius > 4px)·이모지·글래스 패널 금지
- 그라디언트 텍스트·라디얼 글로우·블러 그림자 금지
- 민트를 작은 본문 텍스트에 쓰기 금지 (대비 부족 — 큰 디스플레이·라벨에만)
- 느린 페이드(>250ms)·바운스·패럴랙스 금지 — 모션은 snappy
- 평면 단색 데드 보이드·무작위 부유 요소 금지
컴포넌트 노트
- button
- base: 민트 솔리드 + 다크 텍스트 / 또는 바이올렛 솔리드 + 흰 텍스트. radius 4px, padding 12px 28px, Inter 700 대문자.hover: 하드 오프셋 그림자(4px 4px 0 var(--accent)) 즉시 등장 + translate(-2px,-2px), 120–150ms.focus: 2px offset outline (ring = 바이올렛)disabled: opacity 0.4secondary_variant: 투명 배경 + 2px 바이올렛 외곽선
- card
- 패널 배경(card), 2px 듀오 보더(민트/바이올렛 번갈아), radius 4px, 내부 패딩 24–28px 일관. 거대 인덱스 번호 + 키커 + Clash 제목 + Inter 본문. 호버 시 하드 오프셋 + translate(-2px,-2px). 박스 안 죽은 공백 금지.
- input
- 패널 배경, 2px 바이올렛 외곽선, radius 4px. 포커스 시 보더가 민트로 스위치.
- nav
- 높이 64px, 캔버스 배경, 하단 2px 민트/바이올렛 라인. 좌측 워드마크(Clash 700), 우측 대문자 키커 링크(0.74rem) + 민트 솔리드 CTA. 메뉴 호버 시 텍스트 하이라이트가 바이올렛 면으로 즉시 채워짐.
- chip
- 민트 또는 바이올렛 외곽선 칩, Inter 700 대문자, padding 4px 12px.