Carbon
カーボン / 2016– / 양식 / 디자인 시스템
IBM이 공개하고 유지하는 설계 언어로, IBM Design Language를 제품에서 쓸 수 있는 형태로 옮긴 것이다. 8px의 최소 단위를 2로 나누거나 곱해 치수를 정하는 2x 그리드, IBM Plex, 회색 면을 층으로 쌓고 핵심 파랑 하나만 조작에 남기는 배색이 뼈대가 된다.
모서리를 거의 굴리지 않은 사각형 부품과 아래쪽 변에만 선을 그은 입력란 / 흰색과 #f4f4f4의 면이 번갈아 쌓이고 층이 올라갈 때마다 바탕의 명도가 한 단계씩 움직인다 / 조작할 수 있는 곳에만 나타나는 단 하나의 파랑 #0f62fe, 그 밖은 거의 무채색이라는 배분 / 제목부터 주석까지 IBM Plex 한 집안으로만 짜이고 다른 글꼴이 섞이지 않는다
사전 항목
- 적합한 용도
- 기업용 관리 화면을 밝은 주제와 어두운 주제에서 설계를 바꾸지 않고 내보내고 싶을 때 · 여백과 열 너비의 근거를 사내에 설명할 수 있는 형태로 만들어 여러 팀의 화면을 맞추고 싶을 때
- 타이포그래피
- IBM Plex로 통일하고 제품 화면은 촘촘한 productive, 읽을거리는 큰 expressive로 나누어 쓴다. 크기는 스스로 정하지 않고 마련된 단계에서 고른다.
- 구성
- 8px의 최소 단위를 기준으로 삼는다. 열은 하나에서 시작해 계속 반으로 나누어 정하고, 바깥 여백도 안쪽 여백도 최소 단위의 정수배로 맞춘다.
- 재료
- 회색 면을 층으로 쌓고 층이 바뀌는 곳에서 바탕의 명도를 한 단계 움직인다. 파랑은 조작할 수 있는 곳에만 쓰고 경고의 색은 따로 남겨 둔다.
- 주의
- 색을 hex로 직접 적어 넣으면 밝고 어두운 주제를 바꾼 순간 층의 관계가 무너지는데, 색은 역할의 이름으로 고른다는 전제 위에 전체가 짜여 있기 때문이다.
- 더 읽을거리
- Carbon の 2x Grid の解説にある mini unit の考え方 / productive と expressive という2つの型セットの使い分け / White テーマと Gray 100 テーマで層モデルがどう反転するか
관련 항목
이 항목을 인용하기
사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.
- Link
- https://indexstyle.org/ko/styles/carbon
- Markdown
- [Carbon — IndexStyle](https://indexstyle.org/ko/styles/carbon)
- HTML
- <a href="https://indexstyle.org/ko/styles/carbon">Carbon — IndexStyle</a>