GrindX Design System · Tokens FINAL

정밀과 안전의
새로운 기준

GrindX 로고의 블루와 오렌지를 하나의 시스템으로 조화시킨 디자인 토큰 최종본. 로고 정확색(#E94809)을 적용하고, 단색·각진 모서리에 버튼 그림자를 제거했습니다. 타이포그래피는 Paperlogy와 Pretendard 두 폰트로만 구성됩니다.

GrindXBetter Safety · Better Satisfy

DISPLAY / Paperlogy BODY / Pretendard PRIMARY / Industrial Blue ACCENT / Spark Orange #E94809

01Color

컬러 팔레트

두 개의 브랜드 축(블루·오렌지)과 중립 그래파이트, 안전 옐로우, 시맨틱 컬러. 오렌지는 로고 정확색 #E94809을 베이스로 합니다.

Industrial Blue PRIMARY

구조 · 신뢰 · 헤더 · 링크

50#ECF2FC

100#D4E2F8

200#A8C4EF

300#739FE2

400#4076CE

500#2056B5

600#1A4796

700#163B7B

800#163063

900#14274D

950#0C1830

Spark Orange ACCENT

액션 · CTA · 강조 · 로고색 #E94809

50#FEF2EC

100#FCDFD1

200#F8BCA4

300#F3906B

400#EE6838

500#E94809

600#C93C07

700#A22F08

800#80270C

900#68220E

950#380F05

Graphite

NEUTRAL · 텍스트 · 배경 · 보더

0#FFFFFF

25#FAFBFC

50#F6F7F8

100#ECEEF0

200#D5DADE

300#B2BAC1

400#88929C

500#69727C

600#525A63

700#3F454D

800#2A2E34

900#1A1D21

950#0E1012

✓Success

#16A34A

!Warning

#D97706

×Danger

#DC2626

iInfo

#0891B2

02Brand Harmony

블루 × 오렌지 조화

두 색의 역할을 분리하는 것이 핵심입니다. 블루가 화면의 뼈대와 신뢰를 잡고, 오렌지는 행동을 유도하는 지점에만 등장합니다.

Primary · 구조

Industrial Blue

헤더·네비게이션·섹션 배경·링크. 넓은 면적을 차분하게 채워 전문성과 안정감을 전달합니다.

Accent · 액션

Spark Orange

주요 CTA·핵심 강조·하이라이트. 좁은 면적에 집중해서 써야 시선을 끄는 힘이 커집니다.

권장 색 비율 · 60 / 30 / 10

60% NEUTRAL

30% BLUE

10% ORANGE

그래파이트/화이트 — 바탕·여백 블루 — 구조·신뢰 오렌지 — 액션·강조

실제 적용 — 네비게이션 (블루 구조 + 오렌지 CTA)

Design Principle

안전은 기본, 만족은 약속입니다

Better Safety, Better Satisfy — 모든 디자인 결정은 이 원칙 위에서 이루어집니다.

03Typography

두 개의 폰트

디스플레이는 Paperlogy, 본문·UI는 Pretendard. 단 두 폰트만으로 위계를 만듭니다.

Display · Heading

Paperlogy

페이퍼로지 · G마켓산스 한글 + Montserrat 영문 · OFL

정밀 GrindX 2026

헤드라인, 섹션 제목, 큰 숫자, 브랜드 로고타입, 강조 라벨에 사용합니다.

400 Regular600 SemiBold700 Bold800 ExtraBold900 Black

Body · UI

Pretendard

프리텐다드 · 한글 본문 최적화 · OFL

본문과 UI 텍스트 Aa 123

본문, 설명, 캡션, 버튼, 폼, 표 등 읽기 위한 모든 텍스트에 사용합니다.

400 Regular500 Medium600 SemiBold700 Bold

타입 스케일

Display 7xl · 72pxPaperlogy 800

절단의 정밀함

Display 5xl · 48pxPaperlogy 800

원터치 탈장착 시스템

Display 3xl · 30pxPaperlogy 700

안전을 위한 설계 기준

xl · 20pxPretendard 600

CE 인증 · EN12413 테스트 완료

base · 16pxPretendard 400

GrindX는 그라인더용 절단석, 연마석, 플랩디스크와 원터치 탈장착 지그를 만드는 브랜드입니다.

sm · 14pxPretendard 400

제품 사양 및 호환성 정보는 제품 상세 페이지를 참고하세요.

기술 사양 표기 — Pretendard + tabular-nums (모노 폰트 미사용)

절단석107 × 1.2 × 16 4" / 125 × 1.2 × 16 5"

연마석107 × 3T × 16 4"

플랩디스크100 × 16 #40 / #80

04Spacing

스페이싱 스케일

4px 베이스 그리드. 모든 여백·간격은 이 스케일 내 값만 사용합니다.

space-1 · 4px

space-2 · 8px

space-3 · 12px

space-4 · 16px

space-6 · 24px

space-8 · 32px

space-12 · 48px

space-16 · 64px

space-24 · 96px

space-32 · 128px

05Radius & Shadow

라운딩 & 그림자

각진(angular) 인상을 위해 라운딩을 최소화합니다. 면은 0~2px, 필요한 곳만 최대 4px. 그림자는 중립 회색만 사용하며 색상 그림자는 쓰지 않습니다.

RADIUS

none0

sm1px

base2px

md3px

lg4px

full원형 전용

SHADOW · 중립 회색만

sm카드

md드롭다운

lg팝오버

06Components

컴포넌트 적용

버튼은 플랫·각진 모서리(2px)이며 색상 그림자가 없습니다. 오렌지는 주요 액션, 블루는 구조·보조 액션에 사용합니다.

Buttons — 액션 위계 (그림자 없음)

Badges

CE CERTIFIEDEN12413NEW

Form

이름

문의 내용 (포커스 시 블루 링)

CUTTING DISC

절단석 4인치

107 × 1.2 × 16

Alerts

⚠

안전 주의 · 작업 전 보호 장비를 착용하세요.

✓

인증 검사를 통과한 정품입니다.

07Guidelines

사용 원칙

듀얼 브랜드·2폰트 시스템을 일관되게 유지하기 위한 핵심 규칙입니다.

블루는 뼈대

헤더·네비게이션·배경·링크 등 구조와 신뢰를 담당하며 가장 넓은 면적을 차지합니다.

오렌지는 액션

한 화면의 주요 CTA는 오렌지 하나에 집중합니다. 10%를 넘기지 않아야 강조 효과가 유지됩니다.

제목은 Paperlogy

헤드라인과 큰 숫자는 Paperlogy로 강한 인상을 만듭니다. 긴 본문에는 쓰지 않습니다.

본문은 Pretendard

읽기 위한 모든 텍스트는 Pretendard. 숫자·규격은 tabular-nums로 정렬합니다.

모서리는 각지게

라운딩은 최소화(0~2px). 버튼·카드 모두 샤프하게 유지하고 색상 그림자는 쓰지 않습니다.

롤 토큰 우선

원시 색상 대신 --color-brand / --color-accent 같은 시맨틱 토큰을 연결합니다.