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는 디스플레이 규모에서 브랜드 목소리를 담습니다 — 세리프 말단이 헤드라인에 발표된 연구물 같은 권위를 부여합니다. 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. 깊이 & 고도

그림자 철학: 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. 반응형 동작

브레이크포인트

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. 보라는 전체 너비 섹션용, 카드 배경에는 절대 사용하지 않음