TAEKCLE Design Guide

이 페이지는 TAEKCLE의 디자인 원칙과 시각적 가이드라인을 요약합니다. 전체 가이드는 프로젝트 루트의 DESIGN_GUIDE.md를 참조하세요.

Brand Identity

키워드: Black Steel, Gunmetal, Industrial Pipe, Controlled Deployment

느낌: Premium, Sturdy, Technical, Industrial, Reliable

금지: Playful, Cartoonish, Over-colorful, Soft SaaS Gradients, Neon Glow

Color System

Backgrounds

Page BG
#08090A
Code BG
#101214
Cards
#15181B
Table Header
#1E2327

Steel Scale

100
200
300
500
700
900

Accents

Cool
#AEB8C2
Blue
#8FB7D8
Warm
#D3B47C

Typography

Space Grotesk — Display

h1, 로고, 히어로 헤드라인에만 사용

Inter / Pretendard — Body & UI

본문, 버튼, 네비게이션, 테이블 등 모든 UI 요소

Components

Buttons

Badges

ONOFFA 50%

Metal Panel

99.9%
flag evaluation uptime

Do / Don't

Do

  • 다크 배경 + subtle metallic border
  • 상태 badge에 반투명 배경
  • CSS 변수로 색상 참조
  • Space Grotesk은 h1/로고에만
  • 공유 스타일은 lib/styles.ts에서 import

Don't

  • 밝은 배경 (white, #f8fafc)
  • 네온/글로우 과용
  • Accent를 넓은 면적에 사용
  • 인라인 style에 hex 하드코딩
  • body에 Space Grotesk 사용