표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Carbon Design System
IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.
- YEAR
- 2017
- BY
- IBM
- MOOD
- 미니멀 · 신뢰감
- PRIMARY#0F62FE
- SECONDARY#393939
- ACCENT#42BE65
- BG#161616
- SURFACE#262626
취급 표시
- 각진 모서리
- 가는 테두리
- 격자 바탕
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 1단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 미니멀
- 신뢰감
어디에 쓰나
실제로 쓰는 곳
- IBM Cloud
- Watson
- IBM Cognos Analytics
사용 사례
- 엔터프라이즈 SaaS
- 데이터 분석 대시보드
- IBM 클라우드 제품
- 내부 관리자 도구
이런 프로젝트에 맞습니다
- 엔터프라이즈 SaaS
- B2B 제품
- 관리자 대시보드
- IBM 생태계 서비스
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2017년 IBM이 자사 제품군의 통일성을 위해 오픈소스로 공개. IBM Plex 폰트와 함께 '엔터프라이즈 오픈소스 디자인 시스템'의 대표 사례.
핵심 원칙
- 명확하고 직관적
- 접근 가능하고 포용적
- 일관되고 예측 가능
주요 특징
- 그리드 기반 레이아웃
- 체계적인 타이포그래피
- 접근성 우선
- 일관된 컴포넌트 라이브러리
- 다크/라이트 테마 지원
장점과 한계
장점
- WCAG 2.1 AA 완전 준수
- 오픈소스로 자유롭게 사용 가능
- 8px 그리드 기반의 철저한 수학적 레이아웃
- 화이트·그레이·블랙·g10 등 다양한 테마 공식 제공
한계
- 기업/테크 이미지가 강해 소비자 앱엔 어울리지 않음
- 높은 학습 곡선
- 비교적 보수적인 시각 스타일
컬러 시스템
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 시스템 철저 준수
- Focus indicator — 키보드 포커스 시 2px 파란 외곽선 필수
- 데이터 테이블·폼 등 복잡한 컴포넌트는 반드시 Carbon 컴포넌트 사용
하지 말 것
- 8px 그리드 벗어난 spacing 사용 금지
- IBM Blue 외 강조색 추가 금지
- 장식적 그라데이션·그림자 사용 금지 — 완전 플랫
모션 — Productive 모션: 100~200ms, Linear. Expressive 모션: 200~400ms, ease-in-out. 불필요한 애니메이션 배제 — 기능 중심.
접근성
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 등이 있습니다.