# Cohere에서 영감받은 디자인 시스템

> Category: AI & LLM
> 엔터프라이즈 AI 플랫폼. 선명한 그라디언트, 데이터 중심의 대시보드 미학.

## 1. 비주얼 테마 & 분위기

Cohere의 인터페이스는 세련된 엔터프라이즈 지휘 데크입니다 — 자신감 있고, 깔끔하며, AI를 소비자용 장난감이 아닌 진지한 인프라처럼 느끼게 설계되었습니다. 경험은 밝고 하얀 캔버스 위에 펼쳐지며, 콘텐츠는 22px 반경의 너그럽게 둥근 카드에 정리되어 구름 같은 유기적 포함 언어를 형성합니다. 이 사이트는 CTO와 엔터프라이즈 아키텍트에게 말을 건넵니다: 차갑지 않게 전문적이며, 위압적이지 않게 세련되어 있습니다.

이 디자인 언어는 이중 서체 시스템으로 두 세계를 잇습니다: 촘촘한 자간을 가진 커스텀 디스플레이 세리프인 CohereText는 헤드라인에 기술 선언문 같은 무게감을 부여하고, Unica77 Cohere Web은 본문과 UI 텍스트 전반을 기하학적인 스위스 정밀함으로 처리합니다. 이 세리프/산세리프 조합은 엔터프라이즈 AI 플랫폼을 완벽히 반영하는 "자신 있는 권위와 엔지니어링 명료함의 만남"이라는 개성을 만들어냅니다.

색상은 극도의 절제 속에 사용됩니다 — 인터페이스는 차가운 회색 테두리(`#d9d9dd`, `#e5e7eb`)와 함께 거의 전부 흑백입니다. 보라-바이올렛은 사진 히어로 밴드, 그라디언트 섹션, 그리고 호버와 포커스 상태를 나타내는 인터랙티브 블루(`#1863dc`)에만 등장합니다. 이러한 색채 절제는 색상이 실제로 등장할 때 — 제품 스크린샷, 엔터프라이즈 사진, 짙은 보라 섹션에서 — 최대한의 시각적 무게를 갖게 합니다.

**주요 특성:**
- 차가운 회색 포함 테두리를 가진 밝은 흰색 캔버스
- 22px 시그니처 border-radius — 독보적인 "Cohere 카드" 둥글기
- 이중 커스텀 서체: CohereText (디스플레이 세리프) + Unica77 (본문 산세리프)
- 엔터프라이즈급 색채 절제: 검정, 흰색, 차가운 회색, 최소한의 보라-파랑 포인트
- 극적인 대비를 제공하는 짙은 보라/바이올렛 히어로 섹션
- 호버 시 파랑으로 전환되는 고스트/투명 버튼
- 다양한 실세계 응용을 보여주는 엔터프라이즈 사진
- 대문자 변환을 적용한 코드와 기술 레이블용 CohereMono

## 2. 색상 팔레트 & 역할

### 기본색
- **Cohere Black** (`#000000`): 기본 헤드라인 텍스트와 최대 강조 요소.
- **Near Black** (`#212121`): 표준 본문 링크 색상 — 순수한 검정보다 약간 부드러움.
- **Deep Dark** (`#17171c`): 내비게이션과 다크 섹션 텍스트를 위한 파랑 빛이 도는 짙은 검정.

### 보조색 & 포인트
- **Interaction Blue** (`#1863dc`): 기본 인터랙티브 포인트 — 버튼 호버, 포커스 상태, 활성 링크에 등장. 유일한 색채 액션 컬러.
- **Ring Blue** (`#4c6ee6` at 50%): 키보드 포커스 인디케이터를 위한 Tailwind ring 색상.
- **Focus Purple** (`#9b60aa`): 입력 포커스 테두리 색상 — 차분한 바이올렛.

### 서피스 & 배경
- **Pure White** (`#ffffff`): 기본 페이지 배경 및 카드 서피스.
- **Snow** (`#fafafa`): 미묘하게 올려진 서피스와 밝은 섹션 배경.
- **Lightest Gray** (`#f2f2f2`): 카드 테두리와 가장 부드러운 포함선.

### 중성색 & 텍스트
- **Muted Slate** (`#93939f`): 강조가 줄어든 푸터 링크와 3차 텍스트 — 약간의 파랑-바이올렛 빛이 도는 차가운 회색.
- **Border Cool** (`#d9d9dd`): 표준 섹션 및 목록 항목 테두리 — 차갑고 약간 보라 빛이 도는 회색.
- **Border Light** (`#e5e7eb`): 더 연한 테두리 변형 — Tailwind 표준 gray-200.

### 그라디언트 시스템
- **보라-바이올렛 히어로 밴드**: 흰색 캔버스에 극적인 대비를 만드는 짙은 보라 그라디언트 섹션. 제품 스크린샷과 핵심 메시지를 담는 전체 너비 밴드로 등장합니다.
- **다크 푸터 그라디언트**: 페이지가 짙은 보라/차콜에서 검정 푸터로 전환되며 "황혼" 효과를 만듭니다.

## 3. 타이포그래피 규칙

### 폰트 패밀리
- **디스플레이**: `CohereText`, 폴백: `Space Grotesk, Inter, ui-sans-serif, system-ui`
- **본문 / UI**: `Unica77 Cohere Web`, 폴백: `Inter, Arial, ui-sans-serif, system-ui`
- **코드**: `CohereMono`, 폴백: `Arial, ui-sans-serif, system-ui`
- **아이콘**: `CohereIconDefault` (커스텀 아이콘 폰트)

### 위계

| 역할 | 폰트 | 크기 | 굵기 | 줄 높이 | 자간 | 비고 |
|------|------|------|--------|-------------|----------------|-------|
| 디스플레이 / 히어로 | CohereText | 72px (4.5rem) | 400 | 1.00 (좁음) | -1.44px | 최대 임팩트, 세리프 권위감 |
| 디스플레이 보조 | CohereText | 60px (3.75rem) | 400 | 1.00 (좁음) | -1.2px | 대형 섹션 헤딩 |
| 섹션 헤딩 | Unica77 | 48px (3rem) | 400 | 1.20 (좁음) | -0.48px | 피처 섹션 제목 |
| 서브 헤딩 | Unica77 | 32px (2rem) | 400 | 1.20 (좁음) | -0.32px | 카드 헤딩, 피처명 |
| 피처 제목 | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | 소형 섹션 제목 |
| 본문 대 | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | 인트로 단락 |
| 본문 / 버튼 | Unica77 | 16px (1rem) | 400 | 1.50 | normal | 표준 본문, 버튼 텍스트 |
| 버튼 중 | Unica77 | 14px (0.88rem) | 500 | 1.71 (여유) | normal | 소형 버튼, 강조 레이블 |
| 캡션 | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | 메타데이터, 설명 |
| 대문자 레이블 | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | 대문자 섹션 레이블 |
| 소형 | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | 최소 텍스트, 푸터 링크 |
| 코드 마이크로 | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | 작은 대문자 코드 레이블 |

### 원칙
- **선언은 세리프, 기능은 산세리프**: CohereText는 디스플레이 규모에서 브랜드 목소리를 담습니다 — 세리프 말단이 헤드라인에 발표된 연구물 같은 권위를 부여합니다. Unica77은 스위스 기하학적 중립성으로 기능적인 모든 것을 처리합니다.
- **스케일에서의 네거티브 자간**: CohereText는 60–72px에서 -1.2px ~ -1.44px 자간을 사용해 밀도 있고 임팩트 있는 텍스트 블록을 만듭니다.
- **단일 본문 굵기**: 거의 모든 Unica77 사용은 굵기 400입니다. 굵기 500은 소형 버튼 강조에만 등장합니다. 시스템은 굵기 대비 대신 크기와 여백에 의존합니다.
- **대문자 코드 레이블**: CohereMono는 기술 태그와 섹션 마커에 양수 자간(0.16–0.28px)과 함께 대문자를 사용합니다.

## 4. 컴포넌트 스타일링

### 버튼

**고스트 / 투명**
- 배경: transparent (`rgba(255, 255, 255, 0)`)
- 텍스트: Cohere Black (`#000000`)
- 테두리 없음
- 호버: 텍스트가 Interaction Blue (`#1863dc`)로 변하며 opacity 0.8
- 포커스: Interaction Blue로 solid 2px outline
- 기본 버튼 스타일 — 상호작용 전까지 보이지 않음

**다크 솔리드**
- 배경: 다크/검정
- 텍스트: Pure White
- 밝은 서피스의 CTA용
- 필 모양 또는 표준 반경

**아웃라인**
- 테두리 기반 포함
- 보조 액션에 사용

### 카드 & 컨테이너
- 배경: Pure White (`#ffffff`)
- 테두리: 미묘한 카드에는 얇은 솔리드 Lightest Gray (`1px solid #f2f2f2`); 강조된 카드에는 Cool Border (`#d9d9dd`)
- 반경: **22px** — 기본 카드, 이미지, 다이얼로그 컨테이너를 위한 시그니처 Cohere 반경. 소형 요소에는 4px, 8px, 16px, 20px도 사용
- 그림자: 최소 — Cohere는 그림자 대신 배경색과 테두리에 의존
- 특수: 섹션 컨테이너를 위한 `0px 0px 22px 22px` 반경 (하단만 둥글게)
- 다이얼로그: 모달/다이얼로그 박스에 8px 반경

### 입력 & 폼
- 텍스트: 다크 입력에는 흰색, 밝은 입력에는 검정
- 포커스 테두리: Focus Purple (`#9b60aa`)과 `1px solid`
- 포커스 그림자: 빨간 ring (`rgb(179, 0, 0) 0px 0px 0px 2px`) — 오류 상태 표시용으로 추정
- 포커스 아웃라인: Interaction Blue solid 2px

### 내비게이션
- 흰색 또는 다크 배경 위의 깔끔한 수평 내비
- 로고: Cohere 워드마크 (커스텀 SVG)
- 링크: 16px Unica77의 다크 텍스트
- CTA: 다크 솔리드 버튼
- 모바일: 햄버거 메뉴로 축소

### 이미지 처리
- 다양한 피사체와 환경의 엔터프라이즈 사진
- 드라마틱한 섹션을 위한 보라 빛이 도는 히어로 사진
- 다크 서피스 위의 제품 UI 스크린샷
- 카드 시스템과 맞추는 22px 반경의 이미지
- 전체 너비 보라 그라디언트 섹션

### 독특한 컴포넌트

**22px 카드 시스템**
- 22px border-radius는 Cohere의 시각적 시그니처
- 모든 기본 카드, 이미지, 컨테이너에 이 반경 사용
- 일반적인 8–12px와 구별되는 구름 같은 유기적 부드러움 형성

**엔터프라이즈 신뢰 바**
- 회사 로고가 수평 띠로 표시됨
- 엔터프라이즈 채택을 입증
- 깔끔하고 단색 로고 처리

**보라 히어로 밴드**
- 제품 쇼케이스를 담은 전체 너비 짙은 보라 섹션
- 흰색 페이지 흐름에서 극적인 시각적 분절 형성
- 제품 스크린샷이 보라 환경 안에 떠 있는 구성

**대문자 코드 태그**
- 자간을 적용한 대문자 CohereMono
- 섹션 마커 및 분류 레이블로 사용
- 기술적이고 구조적인 정보 위계 형성

## 5. 레이아웃 원칙

### 여백 시스템
- 기본 단위: 8px
- 스케일: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
- 버튼 패딩은 변형에 따라 다름
- 카드 내부 패딩: 약 24–32px
- 섹션 수직 여백: 넉넉함 (섹션 간 56–60px)

### 그리드 & 컨테이너
- 최대 컨테이너 너비: 반응형 스케일링과 함께 최대 2560px (매우 넓음)
- 히어로: 드라마틱한 타이포그래피와 함께 중앙 정렬
- 피처 섹션: 다열 카드 그리드
- 엔터프라이즈 섹션: 전체 너비 보라 밴드
- 26개 브레이크포인트 감지 — 극도로 세분화된 반응형 시스템

### 여백 철학
- **엔터프라이즈 명료함**: 각 섹션은 섹션 사이에 숨쉴 공간과 함께 하나의 명확한 제안을 제시합니다.
- **사진을 히어로로**: 대형 사진 섹션이 장식적 디자인 요소 없이 시각적 흥미를 제공합니다.
- **카드 그룹화**: 관련 콘텐츠는 22px 둥근 카드에 그룹화되어 자연스러운 정보 클러스터를 형성합니다.

### Border Radius 스케일
- 날카로움 (4px): 내비게이션 요소, 소형 태그, 페이지네이션
- 편안함 (8px): 다이얼로그 박스, 보조 컨테이너, 소형 카드
- 너그러움 (16px): 피처 컨테이너, 중형 카드
- 대형 (20px): 대형 피처 카드
- 시그니처 (22px): 기본 카드, 히어로 이미지, 메인 컨테이너 — THE Cohere 반경
- 필 (9999px): 버튼, 태그, 상태 인디케이터

## 6. 깊이 & 고도

| 레벨 | 처리 | 용도 |
|-------|-----------|-----|
| 평면 (레벨 0) | 그림자 없음, 테두리 없음 | 페이지 배경, 텍스트 블록 |
| 테두리 (레벨 1) | `1px solid #f2f2f2` 또는 `#d9d9dd` | 표준 카드, 목록 구분선 |
| 보라 밴드 (레벨 2) | 전체 너비 짙은 보라 배경 | 히어로 섹션, 피처 쇼케이스 |

**그림자 철학**: Cohere는 거의 그림자가 없습니다. 깊이는 **배경색 대비**(보라 밴드 위 흰색 카드, Snow 위 흰색 서피스), **테두리 포함**(차가운 회색 테두리), 그리고 극적인 **밝음-어두움 섹션 교체**를 통해 전달됩니다. 요소에 고도가 필요할 때, 그림자 투영 대신 어두운 배경 위의 흰색으로 고도를 표현합니다.

## 7. 해야 할 것과 하지 말아야 할 것

### 해야 할 것
- 모든 기본 카드와 컨테이너에 22px border-radius 사용 — 시각적 시그니처입니다
- 네거티브 자간을 적용한 CohereText를 디스플레이 헤딩(72px, 60px)에 사용
- 모든 본문과 UI 텍스트에 굵기 400의 Unica77 사용
- 팔레트를 차가운 회색 테두리의 흑백으로 유지
- Interaction Blue (#1863dc)는 호버/포커스 인터랙티브 상태에만 사용
- 극적인 시각적 분절과 제품 쇼케이스에 짙은 보라 섹션 사용
- 섹션 레이블에 CohereMono 대문자 + 자간 적용
- 다양한 피사체의 엔터프라이즈 적합 사진 유지

### 하지 말아야 할 것
- 기본 카드에 22px 이외의 border-radius 사용 금지 — 시그니처 반경이 중요합니다
- 따뜻한 색상 도입 금지 — 팔레트는 엄격하게 차가운 톤입니다
- 무거운 그림자 사용 금지 — 깊이는 색상 대비와 테두리에서 옵니다
- 본문 텍스트에 굵은(700+) 굵기 사용 금지 — 400–500이 범위입니다
- 세리프/산세리프 위계 생략 금지 — 헤드라인은 CohereText, 본문은 Unica77
- 카드 서피스 색으로 보라 사용 금지 — 보라는 전체 너비 섹션에만 예약됩니다
- 섹션 여백을 40px 이하로 줄이지 말 것 — 엔터프라이즈 레이아웃에는 숨쉴 공간이 필요합니다
- 기본 버튼에 장식 추가 금지 — 고스트/투명이 기본 상태입니다

## 8. 반응형 동작

### 브레이크포인트
| 이름 | 너비 | 주요 변경사항 |
|------|-------|-------------|
| 소형 모바일 | <425px | 컴팩트 레이아웃, 최소 여백 |
| 모바일 | 425–640px | 단일 열, 적층 카드 |
| 대형 모바일 | 640–768px | 소폭 여백 조정 |
| 태블릿 | 768–1024px | 2열 그리드 시작 |
| 데스크톱 | 1024–1440px | 전체 다열 레이아웃 |
| 대형 데스크톱 | 1440–2560px | 최대 컨테이너 너비 |

*26개 브레이크포인트 감지 — 데이터셋에서 가장 세분화된 반응형 사이트 중 하나.*

### 터치 타겟
- 터치 인터랙션에 충분한 크기의 버튼
- 편안한 간격의 내비게이션 링크
- 터치 타겟으로서의 카드 서피스

### 축소 전략
- **내비게이션**: 전체 내비가 햄버거로 축소
- **피처 그리드**: 다열 → 2열 → 단일 열
- **히어로 텍스트**: 72px → 48px → 32px 점진적 스케일링
- **보라 섹션**: 전체 너비 유지, 콘텐츠 적층
- **카드 그리드**: 3 → 2 → 1열

### 이미지 동작
- 22px 반경 컨테이너 안에서 비례적으로 확장되는 사진
- 가로세로 비율을 유지하는 제품 스크린샷
- 배경을 비례적으로 확장하는 보라 섹션

## 9. 에이전트 프롬프트 가이드

### 빠른 색상 참조
- 기본 텍스트: "Cohere Black (#000000)"
- 페이지 배경: "Pure White (#ffffff)"
- 보조 텍스트: "Near Black (#212121)"
- 호버 포인트: "Interaction Blue (#1863dc)"
- 흐릿한 텍스트: "Muted Slate (#93939f)"
- 카드 테두리: "Lightest Gray (#f2f2f2)"
- 섹션 테두리: "Border Cool (#d9d9dd)"

### 컴포넌트 프롬프트 예시
- "Pure White (#ffffff) 위에 CohereText 72px 굵기 400, line-height 1.0, letter-spacing -1.44px로 히어로 섹션을 만드세요. Cohere Black 텍스트. 서브타이틀은 Unica77 18px 굵기 400, line-height 1.4."
- "22px border-radius, Pure White 위에 1px solid Lightest Gray (#f2f2f2) 테두리로 피처 카드를 디자인하세요. 제목은 Unica77 32px, letter-spacing -0.32px. 본문은 Unica77 16px, Muted Slate (#93939f)."
- "고스트 버튼을 만드세요: 투명 배경, Unica77 16px의 Cohere Black 텍스트. 호버 시 텍스트가 opacity 0.8의 Interaction Blue (#1863dc)로 바뀝니다. 포커스: 2px solid Interaction Blue 아웃라인."
- "흰색 텍스트의 짙은 보라 전체 너비 섹션을 만드세요. 헤딩에는 CohereText 60px. 제품 스크린샷이 22px border-radius를 사용해 안에 떠 있습니다."
- "CohereMono 14px, 대문자, letter-spacing 0.28px로 섹션 레이블을 디자인하세요. Muted Slate (#93939f) 텍스트."

### 반복 가이드
1. 한 번에 하나의 컴포넌트에 집중하세요
2. 기본 카드에는 항상 22px 반경을 사용하세요 — "Cohere 카드 둥글기"입니다
3. 서체를 명시하세요 — 헤드라인은 CohereText, 본문은 Unica77, 레이블은 CohereMono
4. 인터랙티브 요소는 호버 시에만 Interaction Blue (#1863dc) 사용
5. 서피스는 차가운 회색 테두리의 흰색으로 유지 — 따뜻한 톤 없음
6. 보라는 전체 너비 섹션용, 카드 배경에는 절대 사용하지 않음