APERTE · WEB DESIGN SYSTEM · v1.0

열리는 생각,
열리는 화면.

Aperte 웹디자인의 단일 기준. 모든 화면은 이 문서의 토큰·타입·컴포넌트에서만 나간다. 임의 값 금지.

기준일 2026-10-02 테마 Light (Paper) 소스 task-17/mockup.html :root (동결) 상태 v1.0 — 웹디자인용
DS-00

Overview

디자인 원칙 · 사용 규칙

디자인 원칙

모든 판단의 기준. 원칙이 충돌하면 번호가 앞선 것이 이긴다.

  1. P1명료함이 장식보다 먼저. 난해한 화법·과잉 연출은 에러. 한국인이 일상적으로 쓰는 문장으로 말한다.
  2. P2모바일이 기준. 360px에서 먼저 설계하고 데스크톱으로 확장한다. 모바일 라이트 버전이 아니라 모바일 퍼스트.
  3. P3덜어낼수록 프리미엄. 요소 추가 전에 제거를 먼저 검토한다. 에디토리얼 미니멀리즘.
  4. P4타이포가 곧 레이아웃. 히어로는 이미지 없이 타이포만으로 구성한다. 오버사이즈 타이포 허용.
  5. P5모션은 의미 전달용. 한 화면에 시그니처 모션 1~2개만. 목적 없는 움직임 금지.
  6. P6브랜드는 화면으로 말한다. 고객 대응의 주체는 개인이 아니라 Aperte 브랜드. 실명 노출 금지.

사용 규칙

토큰·컴포넌트 사용 시 강제 규칙.

  • R1색상은 :root 토큰만 사용. 하드코딩된 hex 금지. 새 색상 추가는 CEO 승인 필요.
  • R2간격은 8px 베이스 토큰만 사용 8 / 16 / 24 / 32 / 48 / 64 / 96. 임의 px 금지.
  • R3한글 줄바꿈은 word-break:keep-all + text-wrap:balance. 외톨이 음절 절대 금지.
  • R4터치 타깃 최소 44px. 버튼 기본 52px.
  • R5CTA 라벨은 영어만 사용 Contact / View Work / Get in Touch.
  • R6이메일 주소 직접 노출 금지. mailto: 링크 + "이메일 보내기" 표기.
  • R7prefers-reduced-motion 환경에서는 모든 모션 정적 폴백 필수.
DS-01

Color

Primitive palette · Semantic roles

Primitive palette — Grayscale

100#F5F6F7
paper
200#E2E4E8
border
300#C9CDD3
400#A8ADB5
500#6E6878
mauve
600#5A5464
700#4A4454
800#3A2E4D
ink
900#2A2138
plum-deep

Primitive palette — Plum / Violet

100#F4F0FB
200#E7DFF5
300#D3C3EC
400#B79BDD
500#7C5CBF
violet
600#684DA6
700#554087
800#42346B
900#3A2E4D
ink

Semantic roles

RoleTokenValueUsage
Background / Default--paper#F5F6F7페이지 기본 배경
Background / Raised--white#FFFFFF카드·섹션 교대 배경
Background / Inverse--plum-deep#2A2138다크 섹션·푸터 (제한적)
Text / Primary--ink#3A2E4D제목·본문 기본
Text / Secondary--mauve#6E6878보조 텍스트·캡션
Border / Default--border#E2E4E8구분선·카드 테두리
Interactive / Accent--violet#7C5CBF강조·CTA 보조·포커스. 액센트는 화면당 1색만
Success--success#2E7D4F성공 상태·확인 배지 (bg #E8F4ED)
Warning--warning#B7791F주의 상태 (bg #FBF3E2)
Error--error#C0392B에러 상태·폼 오류 (bg #FBEAE8)

원칙: 화면의 90%는 Grayscale(100–900)로 구성하고, Violet은 CTA·강조·포커스에만 사용한다. Success/Warning/Error는 상태 전달용으로만 사용하고 장식에 쓰지 않는다.

DS-02

Typography

Type scale · Writing rules

Type scale

Font: IBM Plex Sans → Pretendard Variable 폴백

Display76px / 1.2 / 700 / -0.01em
mobile 40px / 1.22
열리는 화면.
H148px / 1.2 / 700 / -0.01em
mobile 32px
섹션 대표 제목
H232px / 1.25 / 700 / -0.01em
mobile 24px
화면으로 증명하는 방식.
H318px / 1.25 / 600
생각 듣기
Body16px / 1.7 / 400–500
max-width 60ch
화면에 담을 생각을 정리하는 첫 단계. 시작 대화에서 엉킨 이유와 화면의 우선순위를 함께 정리.
Caption14px / 600 / +0.08em
eyebrow·label
절차 · PROCESS
Small12px / 1.6
hint·meta
© 2026 Aperte. 열리는 생각, 열리는 화면.

Writing rules — 한국어

브랜드 언어 + 명료함 우선 (P1)

  • W1고민은 '생각', 결과물은 '화면'으로 쓴다. ('고민 상담' → '생각 나누기')
  • W2중심 동사는 '열다 / 열리다'. '풀다'·'뚫다'·'막힌' 계열 금지.
  • W3슬로건 "열리는 생각, 열리는 화면."은 원문 그대로. 변형 금지.
  • W4CTA는 영어만: Contact / View Work / Get in Touch.
  • W5한국인이 일상적으로 안 쓰는 화법 제거. 브랜드 언어가 난해함을 만들면 명료함이 이긴다 (P1).
  • W6금지: 외톨이 음절 줄바꿈 ("스튜디"+"오"), 전문용어 방치 ("UI" → "화면"으로 풀어쓰기), 실명 노출.
  • W7본문은 max-width:60ch로 가독 행길이 유지.
DS-03

Foundations

Spacing · Radius · Elevation

Spacing

8px 베이스. 임의 값 금지 (R2)

8px · --space-8
16px · --space-16
24px · --space-24
32px · --space-32
48px · --space-48
64px · --space-64
96px · --space-96

섹션 간격 64–96, 블록 패딩 48–64, 요소 간격 16–32이 기본 리듬.

Border radius

3단계만 사용

4px
small
16px
card
999px
pill

small 4px — 포커스 링·태그
card 16px — 카드·입력 필드(12px 변형 허용)
pill 999px — 버튼·배지

Elevation

플랫 우선. 그림자는 필요할 때만

Level 0
border only
Level 1
0 1px 2px
Level 2
0 4px 12px
Level 3
0 12px 32px

기본은 Level 0(테두리). 모달·드롭다운에만 Level 2–3.

DS-04

Component Usage

Anatomy · Behavior guidelines

Button — Anatomy

모든 버튼은 이 구조를 따른다

View Work

① min-height 52px (터치 타깃) ② padding 12px 32px ③ radius pill ④ 2px border (고스트용) ⑤ font 16px/600/-0.01em

DO
Primary 1개 + Ghost 1개 조합. 한 화면에 Primary는 1개만.
DON'T
Primary 2개 병렬, 44px 미만 높이, 한국어 CTA 라벨.

Behavior rules

인터랙션 공통 규칙

  • B1Hover는 (hover:hover) 환경에서만. 터치 기기에서 hover 스타일 잔류 금지.
  • B2Primary hover: 배경 --plum-deep + translateY(-2px). 200ms --ease.
  • B3Focus visible: 3px Violet 아웃라인 + 3px 오프셋. 키보드 접근성 필수.
  • B4Disabled: opacity 0.4, 커서 not-allowed, transform 없음.
  • B5모션 이징은 --ease: cubic-bezier(0.22,1,0.36,1) 단일 값.
  • B6링크가 아닌 버튼처럼 보이는 요소에 cursor:pointer 필수.
DS-05

Components

Buttons · Text Fields · Badges · Navigation

Buttons

Primary / Ghost — default · hover · disabled

Primary

default → hover → disabled

Ghost (secondary)

default → hover → disabled

Small

Text Fields

default · focus · disabled · error

Default

Focus — violet border + ring

Disabled

Error — 숫자만 입력 가능합니다

Badges

상태 전달용. 장식 금지

완료 검토 중 반려 진행 중 대기

텍스트는 2–4자. 도트 + 라벨 구조 고정.

Navigation

헤더 내비게이션 — 64px 고정

규칙: 높이 64px 고정 · 줄바꿈 원천 차단(white-space:nowrap + overflow:hidden) · 로고보다 내비가 시각적으로 크지 않게 · 모바일에서는 내비 숨김 + CTA만 노출.

States

Default — ink Hover — violet + tint Active — violet 600