styles
← 갤러리

Linear Dark

거의 검정에 가까운 캔버스 위에 Inter의 촘촘한 음수 자간과 인디고 브랜드 액센트를 얹은 다크 네이티브 프로덕트 스타일 — 절제된 엘리베이션과 선명한 대비가 미학이다.

cinematic-dark dark-nativeproduct-saashigh-contrastinter-tight-trackingindigo-accentsubtle-elevationdeveloper-toolrefined-minimal
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

리니어(Linear)의 제품 웹사이트에서 추출한 다크 우선 SaaS 미학. 배경은 오크LCH 0.139의 거의 검정, 본문은 0.978의 near-white로 대비가 크고 선명하다. 위계는 색이 아니라 밝기 단차와 Inter의 촘촘한 음수 자간(H1 64px에서 -1.408px ≈ -0.022em)으로 만든다. 브랜드는 단일 인디고(oklch 0.567 0.159 275.2, #5e6ad2) 하나뿐이고, 라임·레드·그린은 상태/차트 신호로만 쓴다. 라운드는 작고(카드 8px, 필드 6px), 구획은 두꺼운 섀도우가 아니라 얇은 1px 보더와 미세한 배경 단차로 나눈다. 히어로 뒤에는 아주 낮은 불투명도의 인디고 오로라 글로우가 은은하게 깔린다. 라이트 모드는 리니어에 실재하지 않으므로, 같은 인디고 브랜드를 유지한 깔끔한 화이트 카운터파트를 합성했다.

타입 스케일

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/510weight/-1.408px는 약 -0.022em로, 디스플레이·H1·H2에 동일하게 적용한다. 웨이트는 Inter Variable의 측정값 그대로 400 본문 / 510 디스플레이·헤딩 / 590 소제목·강조 라벨. 본문에도 -0.011em의 미세 음수 자간을 유지해 밀도감을 준다. 모노(Berkeley Mono)는 코드·키캡·수치 배지에만.

골든 예제 (exemplar)

New · Coding Sessions

The product development system for teams and agents

Purpose-built for planning and building products. Designed for the AI era.

Faster app launch ENG-2703
Render UI before vehicle_state sync In Progress
Triage Intelligence labelled Performance Done
iOS startup blocking on full refresh High

"You'll probably build a better product, just because of the craft that using Linear infuses in your brain."

Gabriel Rose · Product

"Our speed is intense and Linear helps us be action biased."

Bill Robbins · Engineering

Do

  • 다크를 기본(정본)으로 설계하고 라이트는 같은 인디고 브랜드로 파생한다
  • 위계는 색이 아니라 밝기 단차(background→card→popover)와 near-white/gray 텍스트 대비로 만든다
  • 브랜드 인디고는 주요 액션·초점·강조에만 절제해서 쓰고, 라임·그린·레드·시안은 상태/데이터 신호로만 쓴다
  • 큰 타이틀은 Inter로 촘촘한 음수 자간(-0.022em)을 적용해 밀도 있고 선명하게
  • 구획은 얇은 1px 보더와 미세 배경 단차로 나누고, 섀도우는 진짜 플로팅 요소에만

Don't

  • 큰 border-radius(둥근 버블)·두꺼운 드롭 섀도우 금지 — 라운드는 6–8px, 엘리베이션은 담백하게
  • 브랜드 인디고 남용 금지 — 화면이 인디고로 뒤덮이면 강조 신호가 죽는다
  • 그라디언트 범벅·글래스모피즘 과용·파스텔 팔레트 금지(히어로 글로우는 아주 낮은 불투명도만)
  • 바운스·스프링 오버슈트·과한 패럴랙스 모션 금지 — 빠르고 매끄럽게
  • 밝은 라이트 배경을 정본으로 삼지 말 것 — 이 스타일의 본질은 다크 네이티브다

컴포넌트 노트

button
base: primary는 배경 var(--primary) 인디고 + var(--primary-foreground) 텍스트, radius var(--radius)(≈8px)이나 히어로 CTA는 화이트 pill도 흔함. 폰트 13–14px/510weight, padding 8–14px 좌우 16–20px. 텍스트 자간 살짝 음수.
hover: 배경을 한 단 밝게(인디고는 명도 +약간), 120–200ms ease-standard. 미세한 translateY(-1px) 또는 그대로. 글로우 없이 담백하게.
focus: outline none 대신 2px var(--ring) 인디고 링(box-shadow 0 0 0 2px ring, 오프셋 2px). 키보드 포커스 명확히.
disabled: opacity 0.4, cursor not-allowed, hover 무효.
secondary_variant: 배경 var(--secondary)/투명, 1px var(--border) 보더, 텍스트 var(--foreground). 고스트는 배경 투명 + hover 시 var(--secondary).
ghost_variant: 내비 링크형: 배경 투명, 텍스트 var(--muted-foreground), hover 시 텍스트 var(--foreground). 내비 버튼은 pill(radius 9999px).
card
배경 var(--card)(background보다 한 단 밝게), 1px var(--border) 보더, radius var(--radius)(8px), padding 24–32px. 섀도우는 기본 없음 — 단차와 보더로 구분. 강조 카드만 브랜드 라임/인디고 배경 채움 허용(예: 인용/스탯 카드).
input
배경 var(--input) 또는 반투명 흰색 2%, 1px var(--border) 보더, radius var(--radius-field)(6px), padding 12px 14px, 텍스트 13–14px. placeholder는 var(--muted-foreground). 포커스 시 border→var(--ring) 인디고 + 얇은 링.
nav
상단 sticky, backdrop-blur 반투명 배경. 좌측 워드마크, 중앙/우측 pill 고스트 링크(13px, muted-foreground → hover foreground), 우측 끝에 'Log in' 텍스트 + 화이트 'Sign up' pill. 1px 하단 헤어라인.
badge
작은 상태 배지 — radius 9999px 또는 6px, 12px 텍스트. 상태색은 chart-*(라임/그린/레드/시안)을 배경 10% 틴트 + 해당 색 텍스트로. 브랜드 인디고는 'New' 류 강조에만.