OpenAI에서 영감을 받은 디자인 시스템

Category: AI & LLM 깊은 청록빛 블랙을 기반으로 넉넉한 여백과 에디토리얼 타이포그래피를 갖춘 차분하고 거의 무채색에 가까운 시스템.

1. 비주얼 테마 & 분위기

OpenAI의 제품 표면은 대중을 위해 차려입은 연구소처럼 읽힌다 — 임상적이고, 절제되어 있으며, 의도적으로 조용하다. 페이지 배경은 순백(#ffffff)이며, 미묘한 청록 기조를 띤 거의 검정에 가까운 잉크색(#0d0d0d)과 겹쳐져, 텍스트조차 공격적으로 어둡기보다는 약간 차갑게 느껴진다. 그 결과, 그 주변 크롬이 아닌 모델 출력물, 코드, 산문이 전면에 드러나는 색채적 중립성이 만들어진다.

이 시스템의 시그니처는 절제된 웨이트의 Söhne(또는 시스템 대체폰트 inter) 사용이다 — 본문에는 400, 내비게이션과 레이블에는 500, 강조에는 600 — 이것이 에디토리얼 디스플레이용 현대적 세리프 서체인 Signifier와 짝을 이룬다. 대부분의 AI 브랜드가 미래지향적 느낌에 기댈 때, OpenAI의 세리프 헤드라인은 제품에 조용하고 문학적인 톤을 부여한다. 마치 모든 발표가 하나의 에세이인 것처럼.

형태 시스템은 균일하게 부드럽다: 8px–12px 라디우스, 태그와 칩에는 9999px 필 형태, 날카로운 모서리는 어디에도 없다. 섹션 간 전환은 구분선 대신 여백으로 표현되며, 테두리가 등장할 때는 색의 존재라기보다 색의 부재처럼 읽히는 #e5e5e5 헤어라인 형태다.

주요 특성:

• 순백 캔버스(#ffffff)와 깊은 청록빛 블랙 잉크색(#0d0d0d)
• Söhne / Inter, 절제된 웨이트(400, 500, 600) — 주장보다는 절제
• 에디토리얼 디스플레이 헤드라인에는 Signifier 세리프
• 전체에 걸쳐 부드러운 8–12px 라디우스; 칩에는 9999px 필
• 헤어라인 테두리(#e5e5e5)는 최소한으로; 여백이 주된 구분선
• 깊은 청록색의 단색 일러스트레이션 — 마크에는 그라디언트 없음
• 넉넉한 행간(1.55–1.65)과 거의 0에 가까운 자간

2. 색상 팔레트 & 역할

주요 색상

• 순백(Pure White) (#ffffff): 주요 배경, 카드 표면, 버튼 배경.
• 잉크 블랙(Ink Black) (#0d0d0d): 주요 텍스트, 브랜드 마크, 주요 CTA.
• 소프트 블랙(Soft Black) (#1a1a1a): 보조 제목, 중요도가 낮은 텍스트용 대체 잉크색.

표면 & 배경

• 미스트(Mist) (#fafafa): 섹션 구분 배경, 푸터 표면.
• 펄(Pearl) (#f5f5f5): 카드 표면, 올라온 패널.
• 클라우드(Cloud) (#ececec): 비활성 배경, 구분선 틴트.

브랜드 강조색

• OpenAI 청록(OpenAI Teal) (#10a37f): 브랜드 주색, 링크, 하이라이트 배지 — 그 외 중립적인 시스템에서 유일한 색상.
• 딥 청록(Teal Deep) (#0a7a5e): 브랜드 색상의 호버 및 누름 상태.
• 소프트 청록(Teal Soft) (#e8f5f0): 성공 배지, 하이라이트 콜아웃을 위한 표면 틴트.

중립색 & 텍스트

• 그래파이트(Graphite) (#3c3c3c): 본문 텍스트, 기본 읽기 색상.
• 슬레이트(Slate) (#6e6e6e): 보조 텍스트, 캡션, 메타데이터.
• 애시(Ash) (#9b9b9b): 3차 텍스트, 플레이스홀더, 비활성 레이블.
• 스톤(Stone) (#c4c4c4): 장식용 구분선, 희미한 아이콘.

의미적 색상 & 테두리

• 테두리 헤어라인(Border Hairline) (#e5e5e5): 표준 헤어라인 구분선.
• 테두리 소프트(Border Soft) (#ededed): 흰색 표면 위 카드 외곽선.
• 오류(Error) (#ef4146): 유효성 검사, 파괴적 동작.
• 경고(Warning) (#f5a623): 안내 상태를 위한 소프트 앰버색.
• 정보(Info) (#2563eb): 정보성 링크 톤(최소한으로 사용; 청록이 여전히 우선).

3. 타이포그래피 규칙

폰트 패밀리

• 디스플레이 / 에디토리얼: Signifier, 폴백: 'Source Serif Pro', Georgia, serif
• 본문 / UI: Söhne, 폴백: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif
• 코드 / 모노: Söhne Mono, 폴백: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace

계층 구조

원칙

• 정체성으로서의 절제: 굵기는 최대 600; 700 이상은 브랜드에 맞지 않는 느낌을 준다. 계층은 굵기가 아닌 크기와 색상으로 만들어진다.
• 세리프는 영혼을 위해, 산세리프는 시스템을 위해: Signifier는 에디토리얼 디스플레이 순간에만 등장한다. 제품 UI는 산세리프 전용이다.
• 디스플레이에는 음수 자간: 디스플레이 크기에서 -0.02em; 자간은 16px에서 0으로 돌아온다.

4. 컴포넌트 스타일링

버튼

주요(Primary)

• 배경: #0d0d0d
• 텍스트: #ffffff
• 패딩: 10px 18px
• 라디우스: 칩에는 9999px(완전 필), 직사각형 CTA에는 12px
• 호버: #1a1a1a 배경
• 사용처: 주요 CTA, “Try ChatGPT”, “Sign in”

보조(Secondary)

• 배경: #ffffff
• 텍스트: #0d0d0d
• 테두리: 1px solid #e5e5e5
• 패딩: 10px 18px
• 라디우스: 12px
• 호버: 배경 #fafafa, 테두리 #d4d4d4

브랜드 강조(Brand Accent)

• 배경: #10a37f
• 텍스트: #ffffff
• 패딩: 10px 18px
• 라디우스: 12px
• 호버: #0a7a5e
• 사용처: 강조된 업그레이드 CTA, 성공 경로

카드

• 배경: #ffffff
• 테두리: 1px solid #ededed
• 라디우스: 16px
• 패딩: 24px–32px
• 그림자: 기본적으로 없음; 호버 시 0 4px 16px rgba(13,13,13,0.06)

인풋

• 배경: #ffffff
• 테두리: 1px solid #e5e5e5
• 라디우스: 12px
• 패딩: 12px 14px
• 포커스: 테두리 #10a37f, 링 0 0 0 3px rgba(16,163,127,0.12)

필 & 태그

• 배경: #f5f5f5
• 텍스트: #3c3c3c
• 패딩: 4px 10px
• 라디우스: 9999px
• 폰트: 12px / 500

5. 간격 & 레이아웃

• 기본 단위: 4px. 스케일: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• 컨테이너: 최대 너비 1200px, 모바일 24px 거터, 데스크탑 48px.
• 섹션 리듬: 주요 섹션 사이 세로 96–128px; 모바일에서는 64px.
• 그리드: 데스크탑 12열, 모바일 4열, 24px 간격.

6. 모션

• 지속 시간: 호버에 150–220ms; 레이아웃 전환에 280–360ms.
• 이징: 진입 시 cubic-bezier(0.16, 1, 0.3, 1) (부드러운 감속).
• 절제: 패럴랙스 없음, 스크롤 재킹 없음. 미묘한 페이드와 트랜슬레이트만 사용.

7. 사용 가이드라인

• 중립적인 에디토리얼 절제감, 부드러운 라디우스, 희소한 강조색 사용을 함께 유지할 것; 녹색 강조색만으로는 OpenAI다운 표면이 만들어지지 않는다.
• Signifier 스타일의 디스플레이 순간은 에디토리얼 또는 발표 계층에만 사용하고, 제품 컨트롤은 산세리프 시스템을 유지할 것.
• 장식적인 모션, 무거운 그림자, 지나치게 큰 장식용 카드를 피할 것; 시스템은 차분하고, 읽기 쉬우며, 의도적으로 느껴져야 한다.