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

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

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

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

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

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

## 색상 팔레트
- Blue 60 (#0F62FE): Interactive — 주요 액션
- Blue 70 (#0043CE): Interactive Hover
- Gray 100 (#161616): 텍스트 Primary
- Gray 10 (#F4F4F4): UI Background
- White (#FFFFFF): Layer 01
- Support Error (#DA1E28): 오류 상태
- Support Success (#198038): 성공 상태

## 사용 사례
- 엔터프라이즈 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

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

Carbon Design System

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

연도

2017

제작자

IBM

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

#0F62FE

색상 팔레트

Blue 60

#0F62FE

Interactive — 주요 액션

Blue 70

#0043CE

Interactive Hover

Gray 100

#161616

텍스트 Primary

Gray 10

#F4F4F4

UI Background

White

#FFFFFF

Layer 01

Support Error

#DA1E28

오류 상태

Support Success

#198038

성공 상태

핵심 원칙

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

관련 스타일 탐색

Material Design

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

Ant Design

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

Atlassian Design System

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