CLAUDE/DESIGN-SYSTEM™
v1.0 · 2026
CLAUDE / DESIGN — SYSTEM™ — OLIVE.BASE — V1.0 — 2026.05
// EDITION 01
v1 / Guide

Claude Output
Design System*

결과물을 일관되고 아름답게. 채도 낮은 올리브 베이스 + 모든 색·폰트 즉시 커스터마이즈.

시작하기 → 테마 만지기
/01 Stats — Overview
60+
CSS Variables
20+
Components
9
Gradients
0
Dependencies
/02 Principles
01 / Build

빌드 단계 없음

CSS·JS 두 줄만 임포트하면 바로 동작. 빌드 툴체인 0.

02 / Custom

완전 커스터마이즈

모든 색·폰트·라운드를 즉시 변경. localStorage 자동 저장.

03 / Portable

이식성

폴더 통째로 백업·이동 가능. 인터넷 없이도 동작.

04 / Theme

라이트 / 다크

한 번 클릭으로 전환. 토큰 기반 자동 동기화.

CHAPTER 02

Foundations

색·그라데이션·타이포그래피. 스와치를 클릭하면 변수명이 클립보드로 복사돼요.

색상

--bg-primary
페이지 배경
--bg-secondary
카드
--text-primary
본문
--accent
Toss Blue
--success
긍정·완료
--warning
주의
--danger
위험
--info
정보

그라데이션 9종

Primary
--grad-primary
Success
--grad-success
Warning
--grad-warning
Danger
--grad-danger
Violet
--grad-violet
Sunset
--grad-sunset
Mint
--grad-mint
Aurora
--grad-aurora
Ocean
--grad-ocean

타이포그래피

h1 / 40px / 700
제목 헤딩
h2 / 26px / 700
섹션 제목
body / 15px
본문 텍스트는 줄높이 1.7로 흐릅니다.
mono / 13px
SELECT * FROM users
CHAPTER 03

Actions

버튼·배지·태그. 클릭하면 리플 효과가 퍼집니다.

Buttons

기본 4종 + 사이즈 3단계.

Badges

Report Spec Note Data

Tags

performance database backend migration refactor
CHAPTER 04

Data Display

숫자가 카운트업되고 바가 채워집니다. 챕터 진입할 때마다 다시 재생.

Stat Cards

총 요청
1,242,891
+12.4%
평균 응답
142ms
-8.1%
에러율
0.04%
stable
활성 사용자
8,421

Bar Chart

/search
840ms
/feed
410ms
/profile
180ms
/health
8ms

Table

Endpointp50p95
/search120ms840ms
/profile45ms180ms
/feed92ms410ms

Key-Value

Total1.2M
Avg142ms
Error0.04%

Progress

Stage 1 / 5

Stage 3 / 5

Stage 5 / 5

CHAPTER 05

Content Blocks

결과물 본문을 채우는 블록들 — 콜아웃·코드·아바타·배너.

Callouts

참고: p95는 7일 롤링 평균입니다.
주의: 인덱스 추가 전 백업 권장.
위험: 프로덕션 직접 적용 금지.
완료: 스테이징에서 검증됨.

Code Block

handlers/search.ts:42TypeScript
// 사용자별 items 조회
const users = await db.query("SELECT * FROM users");
return users.filter(u => u.active);

Diff

function searchItems(userId) {
- const items = await fetchAll();
+ return await fetchByUser(userId);
}

Avatars

M
J
S
+3
A
B
C

Quote

측정 없는 추측은 거의 항상 틀린다. Donald Knuth

Banner

Skeleton

CHAPTER 06

Patterns

컴포넌트들을 조합한 실제 결과물 패턴.

분석 리포트 카드

Report

API 응답 시간 분석

지난 7일간 /search의 p95가 점진적으로 악화. N+1 쿼리가 주된 원인.

p95 변화
+147%
악화
예상 회복
200ms
목표

스펙 문서 헤더

📋
Spec

결제 모듈 리팩터링

레거시 결제 흐름을 모듈화하고 테스트 커버리지를 70% 이상으로 회복합니다.

M
J
S

알림 + CTA

CHAPTER 07

Theming

우측 하단 ⚙ 버튼 → 슬라이드 패널. 모든 토큰 즉시 변경, localStorage 자동 저장.

지금 바로 시도해보세요

테마 패널을 열어 색을 바꿔보고, 모든 페이지에 적용되는 걸 확인하세요.

/02 Capabilities
01 / Color

색 변경

컬러 피커 또는 hex 직접 입력. 변경 즉시 반영.

02 / Save

저장

localStorage에 자동 기록. 모든 페이지에 동일 적용.

03 / Mode

라이트 / 다크

한 클릭으로 전체 전환. 토큰 기반 자동 동기화.

04 / Sync

Export / Import

JSON으로 백업·복원·공유.

CHAPTER 08

Quickstart

새 결과물을 추가하는 워크플로우. 세 단계면 끝.

1. 파일 생성

날짜 + 슬러그 형식으로 저장.

/Users/midbar_/Desktop/Claude/2026-05-02-api-latency.html

2. HTML 골격 복사

HTML 시작 골격HTML
<!DOCTYPE html>
<html lang="ko">
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <header class="header">
      <span class="badge">Report</span>
      <h1>제목</h1>
    </header>
    <!-- 본문 -->
  </main>
  <script src="theme.js"></script>
</body>
</html>

3. 인덱스에 한 줄 추가

index.htmlHTML
<a class="index-item" href="2026-05-02-api-latency.html">
  <div class="date">2026-05-02</div>
  <span class="badge">Report</span>
  <div class="title">API 응답 시간 분석</div>
</a>