styles
← 갤러리

Perplexity Peppermint

따뜻한 오프화이트(페퍼민트) 종이 위에 웜 오프블랙 텍스트, 딥 틸(#016A71) 브랜드 액센트와 부드러운 라운드로 완성한 답변 엔진의 차분한 코퍼릿 스타일.

corporate-clean ai-productanswer-enginewarm-neutralteal-accentpeppermintcleanroundedproduct-ui
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

Perplexity.ai에서 라이브 추출(Cloudflare 패시브 챌린지 통과)한 AI 답변 엔진 스타일. 라이트('페퍼민트')는 순백이 아닌 따뜻한 오프화이트(#FAF8F5/#FCFCF9) 종이에 웜 오프블랙(#27251E) 본문, 저채도 웜 헤어라인, 부드러운 라운드(카드 12px·필 버튼)로 조용한 프로덕트 톤을 만든다. 위계는 색이 아니라 웜 뉴트럴 단차와 여백으로 세우고, 유일한 유채색은 저빈도로만 등장하는 딥 틸(#016A71, true turquoise) — 마이크·포커스링·틴트 서피스 같은 브랜드 구두점에만 쓴다. 주 CTA 버튼은 틸이 아니라 오프블랙 필이라 primary=오프블랙 / accent=틸로 배정한다. 다크는 거의 검정에 살짝 보라 기운(#100E12) 배경 위에 오프화이트(#D6D5D4) 텍스트로, 같은 틸을 유지하는 네이티브 다크 테마다.

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

One humanist-neo-grotesque sans (Perplexity's proprietary 'pplxSans' -> Inter fallback). Measured weights 400 (body) / 500 (labels) / 600 (headings, incl. the 40px wordmark-scale h1). Mixed-case throughout — no uppercase labels. Body sits at a comfortable 16px with generous 1.55 line-height; hierarchy leans on weight (600) and size rather than color.

골든 예제 (exemplar)

perplexity

무엇이든 물어보세요…

검색 Computer

무엇이든 검색하세요

가장 신뢰받는 출처에서 빠르고 정확한 답변을 받아보세요.

Computer로 업무를 완료하세요

프로젝트를 맡기고 신뢰할 수 있는 결과물을 받아보세요.

Do

  • 순백 대신 따뜻한 오프화이트(#FCFCF9/#FAF8F5)를 배경으로 쓴다
  • 주 CTA 버튼은 오프블랙(#27251E) 필로 — 틸을 버튼 전면에 남발하지 않는다
  • 딥 틸(#016A71)은 브랜드 구두점(마이크·포커스링·틴트·소수 CTA)에만 저빈도로
  • 라운드를 부드럽게 — 카드 12px, 버튼은 필(9999px)
  • 구분은 그림자가 아니라 저채도 웜 헤어라인(오프블랙 14%)으로
  • 위계는 색이 아니라 폰트 웨이트(600)와 크기·여백으로

Don't

  • 틸을 넓은 배경/모든 버튼에 채우지 말 것 — 액센트로 아껴라
  • 본문을 순검정(#000)으로 쓰지 말 것 — 웜 오프블랙(#27251E)으로
  • 각진 0px 모서리·브루탈리스트 하드에지 금지
  • 고채도 다색·그라디언트·글래스모피즘으로 시끄럽게 만들지 말 것
  • 차가운 순회색 뉴트럴 대신 웜 뉴트럴을 유지

컴포넌트 노트

button
primary: 배경 primary(오프블랙 #27251E), 글자 오프화이트, radius 8px 또는 필(9999px), padding 0 16px, 폰트 500, 대문자 아님
accent: 브랜드 CTA/마이크: 딥 틸(#016A71) 배경 + 흰 글자, 라운드. 페이지당 극소수만.
ghost: 투명 배경 + 웜 헤어라인 보더(오프블랙 14%), 텍스트 muted-foreground. hover 시 옅은 틴트.
hover: 배경 틴트 또는 opacity, 150ms
focus: 2px 틸(ring) 아웃라인
card
웜 오프화이트 서피스, radius 12px, 그림자 없음(또는 아주 옅음). 프로모 카드는 다크 서피스에 흰 글자 변형도 있음.
input
라운드(12-16px) 검색창, 배경 card, 웜 헤어라인 보더, 포커스 시 틸 링. 플레이스홀더 muted.
nav
좌측 세로 사이드바. 아이콘+라벨 메뉴, 소형 믹스드케이스 텍스트, 활성 항목 옅은 틴트. 하단 로그인.
chip
필(9999px) 형태 토글/필터 칩. 웜 뉴트럴 또는 옅은 틸 틴트.