styles
← 갤러리

Raycast Dark

잉크빛 #07080a 캔버스 위에 순백 텍스트와 산호빛 코랄(#ff6363) 브랜드 액센트, 대각선 코랄·틸 광선 글로우와 유리처럼 도드라진 흰색 버튼이 시그니처인 다크 네이티브 런처 미학.

cinematic-dark dark-nativeproduct-saaslaunchercoral-accenthigh-contrastinter-neutral-trackingglossy-buttongradient-glowdeveloper-toolrefined-minimal
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

레이캐스트(Raycast) 제품 사이트에서 추출한 다크 네이티브 개발자·생산성 도구 미학. 배경은 측정된 oklch 0.134(#07080a)의 잉크빛 near-black, 본문은 순백(oklch 1.0)으로 대비가 강하고 선명하다. 브랜드 시그니처는 두 가지 — (1) 히어로 뒤 대각선으로 흐르는 코랄·레드 광선 글로우(가장자리에 틸/시안 프린지)와 (2) 주요 CTA에 쓰이는 유리처럼 도드라진 흰색 버튼(#e6e6e6 필 + 흰색 상단 인셋 하이라이트 + 은은한 발광 링). 브랜드 액센트는 단일 코랄(oklch 0.700 0.191 23.4 / #ff6363)이며 초점 링·강조·글로우에만 쓴다. ⚠️ 리니어와 다른 판단: 이 스타일의 primary는 브랜드 코랄이 아니라 near-white 흰색 버튼(어두운 텍스트)이다 — 측정된 CTA가 rgb(230,230,230) 배경/ rgb(47,48,49) 텍스트라서, 스크린샷 충실도상 코랄은 accent/ring에 배정하고 primary는 흰색으로 뒀다. 자간은 리니어의 촘촘한 음수와 정반대로 — 측정된 H1은 letter-spacing normal(0), 소제목은 +0.2px의 미세한 양수 자간이다. 라운드는 중간(카드 12px, 필드 8px), 구획은 얇은 보더와 미세 배경 단차로 나눈다. 다크가 정본(측정값)이고, 라이트는 같은 코랄 브랜드를 화이트 배경에 맞춰 합성한 카운터파트다. 그린·시안·옐로는 상태/차트 신호로만 쓴다.

타입 스케일

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

Inter 단일 패밀리(본문·헤딩·디스플레이 모두 Inter). 시그니처 자간은 리니어와 정반대 — 측정된 H1 64px/600은 letter-spacing normal(0)이고, H2/H3와 라벨·소텍스트는 +0.2px의 미세한 양수 자간이다. 촘촘한 음수 트래킹을 쓰지 말 것. 웨이트는 측정값 그대로 400 본문 / 500 헤딩·라벨·강조 / 600 디스플레이·H1. 모노(GeistMono)는 키캡·설치 명령·코드·수치 배지에만.

골든 예제 (exemplar)

Your shortcut
to everything.

A collection of powerful productivity tools all within an extendable launcher. Fast, ergonomic and reliable.

Install via homebrew or winget

Synced New

Do

  • 다크를 기본(정본)으로 설계하고 라이트는 같은 코랄 브랜드로 파생한다
  • primary는 near-white 흰색 버튼(어두운 텍스트)으로, 코랄은 accent·focus 링·글로우에만 절제해서 쓴다
  • 히어로 뒤에 대각선 코랄·레드 광선 글로우(가장자리 틸/시안 프린지)를 near-black 위에 얹는다
  • 주요 CTA에 유리 키캡 룩(inset 흰색 상단 하이라이트 + 은은한 발광 + 2px 링)을 준다
  • 위계는 밝기 단차(background→card→popover)와 순백/그레이 텍스트 대비로 만들고, 자간은 0~+0.2px 중립으로 유지한다

Don't

  • 리니어식 촘촘한 음수 자간 금지 — 레이캐스트 헤딩은 자간 0, 소제목은 +0.2px 양수다
  • 코랄을 primary 버튼 배경으로 남발 금지 — primary는 흰색, 코랄은 액센트/링/글로우 신호다
  • 코랄 위에 흰 텍스트 금지(대비 부족) — 코랄 배경엔 어두운 텍스트를 얹는다
  • 밝은 라이트 배경을 정본으로 삼지 말 것 — 본질은 잉크빛 다크 네이티브다
  • 그라디언트 범벅·파스텔·바운스 모션 금지 — 글로우는 히어로에만, 모션은 빠르고 매끄럽게

컴포넌트 노트

button
base: primary는 near-white 흰색 필(var(--primary)) + 어두운 텍스트(var(--primary-foreground)), radius var(--radius-field)(8px), 14px/500weight, padding 8px 12px, letter-spacing 0.2px. 시그니처 유리 키캡 룩: inset 흰색 top 하이라이트 + 은은한 발광 + 2px 링.
hover: 흰색 버튼은 살짝 밝게/발광 강화, 120–200ms ease-standard. 미세한 translateY(-1px). 코랄 액션 버튼은 명도 +약간.
focus: 2px var(--ring) 코랄 링(box-shadow 0 0 0 2px ring, 오프셋 2px). 키보드 포커스 명확히.
disabled: opacity 0.4, cursor not-allowed, hover 무효.
secondary_variant: 배경 var(--secondary)/반투명 흰색 5%, 1px var(--border) 보더, 텍스트 var(--foreground). 고스트는 배경 투명 + hover 시 var(--secondary).
ghost_variant: 내비 링크형: 배경 투명, 텍스트 var(--muted-foreground), hover 시 var(--foreground).
card
배경 var(--card)(background보다 한 단 밝게), 1px var(--border) 보더, radius var(--radius)(12px, 강조 카드는 16–20px), padding 24–32px. 섀도우는 기본 없음 — 단차와 보더로 구분. 강조 카드만 은은한 상단 인셋 하이라이트나 코랄 글로우 허용.
input
배경 반투명 흰색 5%(var(--input)), 1px var(--border) 보더, radius var(--radius-field)(8px), padding 8px 12px, 텍스트 14px/500. placeholder는 var(--muted-foreground). 포커스 시 border→코랄 var(--ring) + 얇은 링.
nav
상단, backdrop-blur 반투명 near-black 배경. 좌측 워드마크(코랄 로고 마크), 중앙 고스트 링크(14px, muted-foreground → hover foreground), 우측 'Log in' 텍스트 + 흰색 'Download' 유리 버튼. 미세한 1px 하단 헤어라인. 종종 pill 형태 플로팅 바.
badge
작은 상태 배지 — radius 8px 또는 9999px, 12px/500 텍스트. 상태색은 chart-*(그린/시안/옐로)을 배경 10% 틴트 + 해당 색 텍스트로. 브랜드 코랄은 'New'/강조에만.