Angular True Black
순흑 캔버스에 헥사곤·예각 사선 clip-path 패널이 비대칭으로 맞물리고 골드 1px 보더·all-caps 콘덴스드 산세리프로 외치는 공격적 프레스티지 다크 스타일.
설명
완전한 #000000 위에 헥사곤과 예각 사선으로 clip-path된 패널이 서로 16–32px 겹쳐 긴장감 있게 맞물린다. 위계는 세로로 압축된 all-caps 콘덴스드 산세리프와 단 하나의 골드 액센트가 만든다. 골드는 큰 면이 아니라 각진 1px 보더·작은 라벨·구분선에만 등장하고(면적 6% 이하), 둥근 모서리는 하나도 없다. 깊이는 그림자가 아니라 패널 명도 차와 골드 엣지로, 모션은 120–200ms의 절제된 마이크로모션으로만 낸다.
타입 스케일
display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
spec Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
디스플레이는 Saira Condensed 700 대문자 — 세로로 압축된 공격적 콘덴스드로 헤드라인이 화면을 지배. 본문·라벨은 Saira. 라벨/키커는 넓은 자간(0.22em) 대문자 골드. 스펙 숫자는 tabular-nums 대형. 상용/독점 폰트 없이 OFL 공개 웹폰트만.
골든 예제 (exemplar)
Do
- 배경은 완전한 순흑 #000000 — 차콜/그레이 금지
- 모든 패널을 헥사곤·예각 사선 clip-path로 자르고 16–32px씩 오버랩해 맞물린다
- 골드는 각진 1px 보더·라벨·구분선에만, 면적 6% 이하
- 헤드라인은 all-caps 콘덴스드 산세리프(Saira Condensed 700)로 크게
- 빈 순흑 영역은 옅은 헥사곤 와이어프레임 SVG·골드 사선 라인으로 해소
Don't
- 둥근 모서리 절대 금지 — radius 0, 헥사곤·예각 clip-path만
- 골드를 큰 면·솔리드 버튼 배경으로 칠하기 금지
- 골드 외 강조색·그라디언트·글로우·이모지 금지
- 이미지를 직사각형 그대로 쓰기 금지 — clip-path 필수
- 평면 단색 데드 보이드·고립된 단일 패널 금지
- playful·바운스·스냅 모션 금지 — 120–200ms 절제된 마이크로모션만
컴포넌트 노트
- button
- 평행사변형(사선 clip-path). 투명 배경 + 1px solid 골드(accent) + 골드 텍스트, 대문자 letter-spacing 0.16em, 패딩 12px 28px, radius 0. 호버 시 골드 보더 채도 한 단계 밝아짐 + 텍스트 밝아짐(채움 없음).
- card
- 헥사곤 clip-path, card 표면(#161616), 1px 골드 보더(가상요소·SVG stroke), 내부 패딩 32px. 각진 라인 아이콘 + 골드 키커 + Saira Condensed 제목 + 본문. 헥사곤 안 죽은 공백 금지 — 콘텐츠를 패널 형태에 맞춰 정렬.
- input
- radius 0, 1px 골드 보더 또는 언더라인. 포커스 시 ring(골드). 둥근 모서리 금지.
- nav
- 높이 68px, 배경 순흑, 하단 1px 골드 헤어라인. 좌측 워드마크(Saira Condensed 700 대문자), 우측 메뉴(Saira 600 대문자 0.72rem 자간 0.22em muted-foreground). CTA는 평행사변형 골드 보더 버튼. 모바일은 각진 햄버거 라인 아이콘.
- icon
- 1.5px 스트로크 각진 지오메트릭 라인, 색 muted-foreground(#7C7C7C). 헥사곤·예각 모티프로 크래프트. 둥근 아이콘·이모지 금지.
- spec_panel
- 사선 clip-path 패널 + 거대 tabular-nums 숫자(spec 스케일) + 단위 + 골드 1px 구분선.