Cohere
세 단계로 팽창하는 보로노이 셀과 코니퍼 그린·코럴·쿼츠의 ‘New Nature’
Brand DNA
브랜드 DNA
- 브랜드명: Cohere
- 한 줄 정체성: 기업이 데이터와 인프라의 통제권을 유지한 채 생성·검색·리랭킹 모델을 배포하도록 돕는 보안 중심 엔터프라이즈 AI 플랫폼.
- 공식 디자인 철학: New Nature — 자연의 유동성과 불완전함을 컴퓨팅의 합리성·효율성과 결합한다. 현재의 “Own your AI” 메시지는 이 시각 언어를 데이터 주권과 독립성이라는 제품 가치로 연결한다.
- 시그니처 요소 1개: 서로 다른 팽창 단계의 유기적 셀 3개가 추상적인 C를 만드는 보로노이 심벌. 코니퍼 그린의 자연 톤과 코럴·쿼츠·블루의 합성 톤이 한 덩어리로 결합한다.
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 유기적, 정밀, 신뢰
- 무드 설명: 넓고 밝은 편집형 캔버스와 정밀한 기업용 UI를 기본으로 삼고, 불규칙한 셀·보로노이 절개·합성 컬러가 생명력을 더한다. 전형적인 푸른색·네온·우주형 AI 비주얼 대신 자연과 계산의 긴장을 활용해 친근하면서도 보안 중심의 인상을 만든다.
- 비주얼 스타일: 모던 미니멀 + 휴머니즘
- 밀도(Density): Comfortable — 넉넉한 여백 속에 기술 라벨·모델명·설정값을 정돈해 엔터프라이즈 정보를 빠르게 훑게 한다.
- 모서리 성향: Round (12~20px) — 카드와 미디어 프레임은 크게 둥글고, 셀은 의도적으로 비대칭이다.
- 평면성: Layered — 흰 캔버스, 미네랄 표면, 짙은 제품 밴드, 컬러 셀을 겹쳐 깊이를 만든다.
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary — Conifer Green */
--color-primary-50: #F0F4F2;
--color-primary-100: #DCE7E2;
--color-primary-200: #B9D0C6;
--color-primary-300: #8EAF9F;
--color-primary-400: #668E7B;
--color-primary-500: #39594D; /* 심벌·핵심 브랜드 면 */
--color-primary-600: #2F4B41;
--color-primary-700: #263D35;
--color-primary-800: #1A2E27;
--color-primary-900: #0E1E19;
/* Synthetic accents — 셀·그래픽·상태 강조 */
--color-coral: #FF7759;
--color-coral-soft: #FFD8CF;
--color-quartz: #D6A7E8;
--color-quartz-soft: #F1DFF7;
--color-acrylic: #D6E5F7;
--color-acrylic-soft:#F1F5FF;
/* Neutral — Mushroom / Volcanic */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FAFAF8;
--color-neutral-100: #F4F2EE;
--color-neutral-200: #EEECE7;
--color-neutral-300: #D9D9DD;
--color-neutral-500: #8A898D;
--color-neutral-700: #4E4D52;
--color-neutral-900: #212121;
--color-neutral-1000: #000000;
/* Semantic */
--color-success-bg: #EDF7F1;
--color-success-fg: #275E46;
--color-warning-bg: #FFF3DD;
--color-warning-fg: #865514;
--color-error-bg: #FFF0ED;
--color-error-fg: #B5422B;
--color-info-bg: #F1F5FF;
--color-info-fg: #315D89;
/* Surface */
--bg-base: #FFFFFF; /* 페이지 기본 */
--bg-subtle: #F4F2EE; /* 미네랄 섹션 */
--bg-elevated: #FAFAF8; /* 카드·컨트롤 */
--bg-brand: #39594D; /* 제품 밴드·브랜드 히어로 */
--bg-overlay: rgba(14, 30, 25, 0.64);
/* Text */
--text-primary: #17171C;
--text-secondary: #4E4D52;
--text-tertiary: #747378;
--text-on-primary: #FFFFFF;
--text-disabled: #AAA9AD;
/* Border */
--border-default: #D9D9DD;
--border-subtle: #E9E8E4;
--border-strong: #8A898D;
--border-focus: #39594D;
}Typography
타이포그래피
- 폰트 페어링:
- 영문 헤드라인: Cohere Headline — 보로노이 셀 절개가 글자 내부에 분산되는 가변 디스플레이 서체
- 영문 UI·본문: Cohere Text — Bold / Regular / Light + Italic
- 코드·데이터: Cohere Mono
- 한글: Pretendard 또는 Noto Sans KR 폴백
- 위계:
- Display: 72px / 600 / 0.94 / -0.055em
- H1: 52px / 600 / 1.00 / -0.045em
- H2: 36px / 600 / 1.08 / -0.035em
- H3: 24px / 600 / 1.20 / -0.025em
- Body Large: 19px / 400 / 1.50 / -0.01em
- Body: 16px / 400 / 1.55 / -0.005em
- Body Small: 14px / 400 / 1.50 / 0
- Caption: 12px / 600 / 1.35 / 0.07em
- Code: 13px / 400 / 1.55 / 0
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;`` - Container: max-width 1440px, 데스크톱 좌우 패딩 48px, 모바일 20px. 텍스트 열은 720px 안팎으로 제한해 큰 디스플레이 타이포와 대비한다.
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 6px; /* 작은 입력·코드 */
--radius-md: 10px; /* 버튼·컨트롤 */
--radius-lg: 16px; /* 기본 카드 */
--radius-xl: 24px; /* 히어로·미디어 프레임 */
--radius-cell-a: 42% 58% 54% 46% / 48% 42% 58% 52%;
--radius-cell-b: 58% 42% 47% 53% / 43% 57% 43% 57%;
--radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(14, 30, 25, 0.06); /* 입력·작은 카드 */
--shadow-md: 0 8px 24px rgba(14, 30, 25, 0.08); /* 카드 hover */
--shadow-lg: 0 20px 56px rgba(14, 30, 25, 0.12); /* 팝오버·모달 */
--shadow-xl: 0 32px 80px rgba(14, 30, 25, 0.16); /* 풀스크린 dialog */색면·보더·셀의 중첩이 기본 위계를 만들므로 상시 그림자는 최소화한다. 큰 그림자는 일시적 오버레이에만 사용한다.
Iconography
Iconography
- 스타일: Outline
- Stroke 굵기: 1.5px
- 모서리 처리: Round
- 추천 라이브러리: Lucide를 기능 아이콘의 베이스로 사용하되, 브랜드·엔드포인트 아이콘은 24px 보로노이 셀 구조의 전용 모노라인 픽토그램으로 제작한다.
Component Guide
컴포넌트 가이드 (상태별 CSS)
Button
.co-btn {
min-height: 42px;
padding: 0 18px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-elevated);
color: var(--text-primary);
font: 600 14px/1 'Cohere Text', Arial, sans-serif;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.co-btn:hover { background: var(--color-neutral-100); border-color: var(--border-strong); }
.co-btn:active { transform: translateY(1px); }
.co-btn:disabled,
.co-btn[aria-disabled="true"] { opacity: .42; pointer-events: none; }
.co-btn[aria-busy="true"] { color: transparent; position: relative; }
.co-btn[aria-busy="true"]::after {
content: ""; position: absolute; inset: 50% auto auto 50%; width: 14px; height: 14px;
margin: -8px 0 0 -8px; border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%; color: var(--text-primary); animation: co-spin .7s linear infinite;
}
.co-btn--primary { background: var(--color-primary-500); border-color: var(--color-primary-500); color: var(--text-on-primary); }
.co-btn--primary:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); }
.co-btn--primary:active { background: var(--color-primary-700); }
.co-btn--secondary { background: transparent; border-color: var(--color-primary-500); color: var(--color-primary-700); }
.co-btn--secondary:hover { background: var(--color-primary-50); }
.co-btn--ghost { background: transparent; border-color: transparent; color: var(--color-primary-700); }
.co-btn--ghost:hover { background: var(--color-primary-50); }
.co-btn--danger { background: var(--color-error-fg); border-color: var(--color-error-fg); color: #fff; }
.co-btn--danger:hover { background: #96351F; border-color: #96351F; }
@keyframes co-spin { to { transform: rotate(360deg); } }Input
.co-field {
min-height: 44px;
width: 100%;
padding: 10px 13px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-base);
color: var(--text-primary);
font: 400 14px/1.5 'Cohere Text', Arial, sans-serif;
}
.co-field:hover { border-color: var(--border-strong); }
.co-field:focus { outline: 3px solid var(--color-primary-100); border-color: var(--border-focus); }
.co-field[aria-invalid="true"] { border-color: var(--color-error-fg); outline-color: var(--color-error-bg); }
.co-field:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }
.co-field::placeholder { color: var(--text-tertiary); }Card
.co-card { background: var(--bg-base); border-radius: var(--radius-lg); padding: 24px; }
.co-card--emphasis { background: var(--bg-brand); color: var(--text-on-primary); border-radius: var(--radius-xl); }
.co-card--outlined { border: 1px solid var(--border-default); }
.co-card--interactive { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.co-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }Badge / Tag
.co-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--radius-full); font: 600 11px/1 'Cohere Mono', monospace; }
.co-tag--solid { background: var(--color-primary-500); color: #fff; }
.co-tag--subtle { background: var(--color-quartz-soft); color: var(--color-primary-800); }
.co-tag--outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }Navigation
.co-nav { min-height: 72px; display: flex; align-items: center; gap: 28px; padding: 0 48px; border-bottom: 1px solid var(--border-subtle); background: rgba(255,255,255,.94); }
.co-nav__brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 'Cohere Text', sans-serif; letter-spacing: -.04em; }
.co-nav__links { display: flex; gap: 24px; margin-left: auto; color: var(--text-secondary); font-size: 14px; }
.co-nav__link:hover,
.co-nav__link[aria-current="page"] { color: var(--text-primary); }Motion
Motion
--duration-fast: 140ms;
--duration-base: 240ms;
--duration-slow: 520ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-organic: cubic-bezier(0.22, 0.8, 0.28, 1);셀의 모핑·팽창은 520ms 이상으로 부드럽게 연결하고, 버튼·입력은 140~240ms의 짧고 정밀한 반응을 유지한다. 장식 모션은 prefers-reduced-motion에서 제거한다.
Anti-patterns
Anti-patterns
1. 코럴을 단독 Primary로 사용하거나 모든 CTA·말풍선을 코럴로 채우지 않는다. 코니퍼 그린이 브랜드의 중심이고 코럴은 합성 액센트다. 2. Cohere 심벌을 둥근 사각형 안의 문자 C로 대체하지 않는다. 서로 다른 팽창 단계의 3개 셀 구조를 유지한다. 3. 셀을 완벽한 동심원·균일한 원형으로 만들지 않는다. 불규칙한 보로노이 기하가 “New Nature”의 핵심이다. 4. 네온 블루·사이버 그리드·우주 배경 같은 전형적인 AI 클리셰를 사용하지 않는다. 5. 모든 표면에 강한 유리 효과·그림자·그라데이션을 겹치지 않는다. 넓은 흰 여백과 미네랄 중성색이 컬러 셀을 받쳐야 한다.