# Carbon Design System — 디자인 스타일 가이드

## 기본 정보
- **ID**: carbon-design
- **카테고리**: design-language
- **연도**: 2017
- **제작자**: IBM

## 설명
IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.

## 역사·배경
2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.

## 핵심 원칙
- 명확하고 직관적
- 접근 가능하고 포용적
- 일관되고 예측 가능

## 주요 특징
- 그리드 기반 레이아웃
- 체계적인 타이포그래피
- 접근성 우선
- 일관된 컴포넌트 라이브러리
- 다크/라이트 테마 지원

## 컬러 시스템 가이드
White/Gray10/Gray90/Gray100 4가지 테마 기반. 모두 회색-파랑 계열의 절제된 팔레트

### 색상 역할
- interactive: 버튼, 링크, 포커스 — IBM Blue (#0F62FE)
- ui-background: 페이지 배경 (테마에 따라 #fff, #f4f4f4, #262626, #161616)
- ui-01/02: 컴포넌트 배경 — 테마에 따라 2단계
- text-01/02/03/04: 텍스트 계층 4단계
- support-error/warning/success/info: 상태 색상 4종

### 색상 제약 조건
- IBM Blue 계열 외 primary 색상 사용 금지
- 4가지 공식 테마 중 하나 선택 — 임의 테마 생성 지양
- 상태 색상(error/warning 등)을 장식 목적으로 사용 금지

### 다크모드 전략
Gray90 또는 Gray100 테마로 전환. 동일한 token 이름 사용, 값만 교체

### 대비 요구사항
WCAG 2.1 AA 전면 준수. 모든 테마에서 텍스트-배경 4.5:1 이상

## 타이포그래피 가이드
- **폰트 성격**: IBM Plex Sans — 기술적이고 전문적이며 가독성 높은 산세리프. 고정폭 코드에는 IBM Plex Mono
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: Carbon Type Scale 고정 (4px 기반 수학적 스케일)

### 타이포그래피 제약
- IBM Plex 계열만 사용 권장 (Plex Sans, Plex Mono, Plex Serif)
- 14단계 Type Scale 준수 (12/14/16/18/20/24/28/32/36/42/48/54/60/68px)
- Productive vs Expressive 두 모드 구분 — 대시보드는 Productive(촘촘), 마케팅은 Expressive(여유)

## 하면 안 되는 것 (안티패턴)
- 8px 그리드 벗어난 spacing 사용 금지
- IBM Blue 외 강조색 추가 금지
- 장식적 그라데이션·그림자 사용 금지 — 완전 플랫

## 반드시 포함해야 하는 것
- 8px 기반 spacing 시스템 철저 준수
- Focus indicator — 키보드 포커스 시 2px 파란 외곽선 필수
- 데이터 테이블·폼 등 복잡한 컴포넌트는 반드시 Carbon 컴포넌트 사용

## 모션 가이드
Productive 모션: 100~200ms, Linear. Expressive 모션: 200~400ms, ease-in-out. 불필요한 애니메이션 배제 — 기능 중심.

## 사용 사례
- 엔터프라이즈 SaaS
- 데이터 분석 대시보드
- IBM 클라우드 제품
- 내부 관리자 도구

## 추천 프로젝트 유형
- 엔터프라이즈 SaaS
- B2B 제품
- 관리자 대시보드
- IBM 생태계 서비스

## 장점
- WCAG 2.1 AA 완전 준수
- 오픈소스로 자유롭게 사용 가능
- 8px 그리드 기반의 철저한 수학적 레이아웃
- 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공

## 단점·한계
- 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음
- 높은 학습 곡선
- 비교적 보수적인 시각 스타일

## 실제 사용 제품·서비스
- IBM Cloud
- Watson
- IBM Cognos Analytics

## 접근성
WCAG 2.1 AA 기준 전면 준수. 키보드 내비게이션, 스크린 리더, 고대비 모드 모두 검증.

## 관련 스타일
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [ant-design](https://ui.buildersgate.com/styles/ant-design)
- [atlassian-design](https://ui.buildersgate.com/styles/atlassian-design)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #0F62FE
- secondary: #393939
- accent: #42BE65
- background: #161616
- surface: #262626
- text: #F4F4F4
- textSecondary: #C6C6C6
- border: #393939

### 헤더
- background: linear-gradient(90deg, #161616 0%, #262626 100%)
- textColor: #F4F4F4
- accentColor: #0F62FE

### 타이포그래피
- fontFamily: IBM Plex Sans, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 2px 6px rgba(0,0,0,0.3)
- md: 0 4px 8px rgba(0,0,0,0.3)
- lg: 0 8px 16px rgba(0,0,0,0.3)
- xl: 0 12px 24px rgba(0,0,0,0.4)

### Border Radius
- none: 0
- sm: 0
- md: 0
- lg: 0
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #393939

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.11s cubic-bezier(0.2, 0, 0.38, 0.9)

### 애니메이션
- duration: 110ms
- easing: cubic-bezier(0.2, 0, 0.38, 0.9)

### 컴포넌트 토큰
- 버튼: shape=square / hoverEffect=darken / textTransform=none
- 카드: style=flat / hoverEffect=border
- 인풋: style=outlined / focusEffect=border
- 배지: shape=rounded / style=solid
- 아이콘: package=tabler / strokeWidth=1.5 / defaultSize=20

### 레이아웃
- containerStyle: boxed
- sectionSpacing: compact

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

### Q: Carbon Design System이란 무엇인가요?
A: IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다. 2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.

### Q: Carbon Design System의 핵심 디자인 원칙은 무엇인가요?
A: Carbon Design System의 핵심 원칙은 명확하고 직관적, 접근 가능하고 포용적, 일관되고 예측 가능입니다.

### Q: Carbon Design System은 어떤 프로젝트에 적합한가요?
A: Carbon Design System은 엔터프라이즈 SaaS, 데이터 분석 대시보드, IBM 클라우드 제품, 내부 관리자 도구, 엔터프라이즈 SaaS, B2B 제품, 관리자 대시보드, IBM 생태계 서비스 등의 프로젝트에 적합합니다.

### Q: Carbon Design System의 장단점은 무엇인가요?
A: 장점으로는 WCAG 2.1 AA 완전 준수, 오픈소스로 자유롭게 사용 가능, 8px 그리드 기반의 철저한 수학적 레이아웃, 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공이 있습니다. 단점으로는 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음, 높은 학습 곡선, 비교적 보수적인 시각 스타일이 있습니다.

### Q: Carbon Design System에서 색상은 어떻게 사용하나요?
A: White/Gray10/Gray90/Gray100 4가지 테마 기반. 모두 회색-파랑 계열의 절제된 팔레트 색상 역할은 interactive: 버튼, 링크, 포커스 — IBM Blue (#0F62FE), ui-background: 페이지 배경 (테마에 따라 #fff, #f4f4f4, #262626, #161616), ui-01/02: 컴포넌트 배경 — 테마에 따라 2단계입니다. 주의사항: IBM Blue 계열 외 primary 색상 사용 금지, 4가지 공식 테마 중 하나 선택 — 임의 테마 생성 지양.

### Q: Carbon Design System에 어울리는 폰트 스타일은 무엇인가요?
A: Carbon Design System에는 IBM Plex Sans — 기술적이고 전문적이며 가독성 높은 산세리프. 고정폭 코드에는 IBM Plex Mono 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: IBM Plex 계열만 사용 권장 (Plex Sans, Plex Mono, Plex Serif), 14단계 Type Scale 준수 (12/14/16/18/20/24/28/32/36/42/48/54/60/68px).

### Q: Carbon Design System 디자인에서 하면 안 되는 것은 무엇인가요?
A: Carbon Design System에서 피해야 할 것: 8px 그리드 벗어난 spacing 사용 금지, IBM Blue 외 강조색 추가 금지, 장식적 그라데이션·그림자 사용 금지 — 완전 플랫.

### Q: Carbon Design System을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Carbon Design System을 적용한 대표적인 제품·서비스로는 IBM Cloud, Watson, IBM Cognos Analytics 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=carbon-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=carbon-design&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Carbon Design System

IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.

연도

2017

제작자

IBM

2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.

#0F62FE

핵심 원칙

1

명확하고 직관적

2

접근 가능하고 포용적

3

일관되고 예측 가능

주요 특징

  • 그리드 기반 레이아웃
  • 체계적인 타이포그래피
  • 접근성 우선
  • 일관된 컴포넌트 라이브러리
  • 다크/라이트 테마 지원

장단점

장점

  • +WCAG 2.1 AA 완전 준수
  • +오픈소스로 자유롭게 사용 가능
  • +8px 그리드 기반의 철저한 수학적 레이아웃
  • +화이트·그레이·블랙·g10 등 다양한 테마 공식 제공

단점 / 한계

  • −기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음
  • −높은 학습 곡선
  • −비교적 보수적인 시각 스타일

적합한 사용처

사용 사례

  • 엔터프라이즈 SaaS
  • 데이터 분석 대시보드
  • IBM 클라우드 제품
  • 내부 관리자 도구

이런 프로젝트에 추천

엔터프라이즈 SaaSB2B 제품관리자 대시보드IBM 생태계 서비스
접근성

WCAG 2.1 AA 기준 전면 준수. 키보드 내비게이션, 스크린 리더, 고대비 모드 모두 검증.

실제 사용 예시

IBM CloudWatsonIBM Cognos Analytics

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Carbon Buttons

IBM의 엔터프라이즈급 버튼 디자인

Data Table

체계적이고 접근 가능한 데이터 테이블

NameStatusDateActions
Project AlphaActive2024-01-15
Project BetaPending2024-01-20
Project GammaCompleted2024-01-10

Form Elements

접근성을 고려한 입력 컴포넌트

Notifications

시스템 알림 컴포넌트

Information
This is an informational notification.
Success
Your action was successful.
Error
There was an error processing your request.

Tags

정보 분류를 위한 태그 시스템

DefaultInfoSuccessError

Carbon Typography

IBM Plex Sans 기반의 체계적인 타입 스케일

Display 01 (42px)

Carbon Design

Heading 03 (32px)

명확하고 직관적인 시스템

Heading 02 (28px)

엔터프라이즈 오픈소스

Body 02 (16px)

Carbon은 IBM의 오픈소스 디자인 시스템으로, 8px 기반 그리드 시스템과 IBM Plex 폰트 패밀리를 바탕으로 엔터프라이즈 제품의 일관성과 접근성을 확보합니다.

Label 01 (12px)

IBM Design · 2017 · WCAG 2.1 AA

자주 묻는 질문

Carbon Design System이란 무엇인가요?
IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다. 2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.
Carbon Design System의 핵심 디자인 원칙은 무엇인가요?
Carbon Design System의 핵심 원칙은 명확하고 직관적, 접근 가능하고 포용적, 일관되고 예측 가능입니다.
Carbon Design System은 어떤 프로젝트에 적합한가요?
Carbon Design System은 엔터프라이즈 SaaS, 데이터 분석 대시보드, IBM 클라우드 제품, 내부 관리자 도구, 엔터프라이즈 SaaS, B2B 제품, 관리자 대시보드, IBM 생태계 서비스 등의 프로젝트에 적합합니다.
Carbon Design System의 장단점은 무엇인가요?
장점으로는 WCAG 2.1 AA 완전 준수, 오픈소스로 자유롭게 사용 가능, 8px 그리드 기반의 철저한 수학적 레이아웃, 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공이 있습니다. 단점으로는 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음, 높은 학습 곡선, 비교적 보수적인 시각 스타일이 있습니다.
Carbon Design System에서 색상은 어떻게 사용하나요?
White/Gray10/Gray90/Gray100 4가지 테마 기반. 모두 회색-파랑 계열의 절제된 팔레트 색상 역할은 interactive: 버튼, 링크, 포커스 — IBM Blue (#0F62FE), ui-background: 페이지 배경 (테마에 따라 #fff, #f4f4f4, #262626, #161616), ui-01/02: 컴포넌트 배경 — 테마에 따라 2단계입니다. 주의사항: IBM Blue 계열 외 primary 색상 사용 금지, 4가지 공식 테마 중 하나 선택 — 임의 테마 생성 지양.
Carbon Design System에 어울리는 폰트 스타일은 무엇인가요?
Carbon Design System에는 IBM Plex Sans — 기술적이고 전문적이며 가독성 높은 산세리프. 고정폭 코드에는 IBM Plex Mono 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: IBM Plex 계열만 사용 권장 (Plex Sans, Plex Mono, Plex Serif), 14단계 Type Scale 준수 (12/14/16/18/20/24/28/32/36/42/48/54/60/68px).
Carbon Design System 디자인에서 하면 안 되는 것은 무엇인가요?
Carbon Design System에서 피해야 할 것: 8px 그리드 벗어난 spacing 사용 금지, IBM Blue 외 강조색 추가 금지, 장식적 그라데이션·그림자 사용 금지 — 완전 플랫.
Carbon Design System을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Carbon Design System을 적용한 대표적인 제품·서비스로는 IBM Cloud, Watson, IBM Cognos Analytics 등이 있습니다.

관련 스타일 탐색

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

Ant Design

엔터프라이즈급 UI 디자인 언어로, 중국 알리바바 그룹에서 개발했습니다.

Atlassian Design System

아틀라시안의 제품군에 사용되는 디자인 시스템입니다.