styles
← 갤러리

Supabase

밝은 뉴트럴 캔버스에 시그니처 에메랄드 그린 하나를 브랜드 액션으로 얹은 오픈소스 개발자 플랫폼 스타일 — 위계는 색이 아니라 얇은 보더와 라운드 카드, Inter/Manrope 타이포로 만든다.

corporate-clean developer-platformopen-sourceemerald-accentlight-firstdark-capablebordered-cardsproduct-saasgreen-tinted-neutralsinter-manrope
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

슈파베이스(Supabase) 마케팅 사이트에서 추출한 개발자 플랫폼 미학. 기본은 거의 흰색인 밝은 캔버스(oklch 0.995)에 near-black 텍스트로, 라이트가 정본이지만 사이트는 완전한 다크 네이티브 모드도 갖추고 있어 실측 다크 세트를 함께 담았다. 뉴트럴은 순수 회색이 아니라 아주 옅은 초록기(hue ~159)가 도는 그레이 스케일이라, 브랜드 그린과 한 계열로 묶인다. 시그니처는 단 하나의 에메랄드 그린(oklch 0.762 0.154 159 / #3ecf8e) — 주요 CTA·포커스·강조에만 primary로 쓰고, 그 위 텍스트는 near-black이다. 보조 브랜드색인 퍼플(#8e4ec6)·블루(#0070f3)는 차트/도식 신호로만 등장한다. 카드는 16px 라운드에 1px 헤어라인 보더로 나뉘고 그림자는 거의 없다. 본문은 Inter, 헤딩은 Manrope, 코드는 Source Code Pro의 3-패밀리 구성이다.

타입 스케일

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

3-패밀리 구성(실측): 헤딩은 Manrope(디스플레이·H1 46px/500, 섹션 헤더 34px/600), 본문·UI는 Inter(16px/450 본문, 14px/500 버튼), 코드는 Source Code Pro. 웨이트는 측정된 450/500/600 3단만. 큰 헤딩은 tracking을 살짝 좁혀(-0.02em) 밀도를 준다. 본문 웨이트 450은 Supabase의 특징적 값(표준 400보다 살짝 두툼).

골든 예제 (exemplar)

Build in a weekend
Scale to millions

Start your project with a Postgres database. Add Authentication, Data APIs, Edge Functions, Realtime, Storage, and Vector embeddings.

Postgres Database

Every project is a full Postgres database, the world's most trusted relational database.

✓ 100% portable  ✓ Built-in Auth with RLS

Authentication

Add user sign ups and logins, securing your data with Row Level Security.

alex16019@gmail.com

Edge Functions

Easily write custom code without deploying or scaling servers.

$ supabase functions deploy

Do

  • 밝은 라이트를 기본(정본)으로 설계하고, 같은 에메랄드 브랜드로 실측 다크 세트를 함께 제공한다
  • 브랜드 에메랄드 그린은 주요 CTA·포커스·강조에만 primary로 절제해서 쓴다
  • 그린 버튼 위 텍스트는 흰색이 아니라 near-black을 쓴다(Supabase 특유)
  • 뉴트럴 그레이에 아주 옅은 초록기(hue~159)를 넣어 브랜드와 한 계열로 묶는다
  • 구획은 그림자가 아니라 1px 헤어라인 보더 + 라운드 카드로 나눈다
  • 헤딩은 Manrope, 본문·UI는 Inter, 코드는 Source Code Pro로 역할을 분리한다

Don't

  • 브랜드 그린 남용 금지 — 화면이 초록으로 뒤덮이면 CTA 신호가 죽는다
  • 퍼플·블루를 브랜드 액센트로 쓰지 말 것 — 차트/도식 신호 전용이다
  • 그린 버튼 위에 흰 글자 금지(대비·브랜드 톤이 어긋난다)
  • 두꺼운 드롭 섀도우로 카드 구분 금지 — 헤어라인 보더를 써라
  • 고채도 그라디언트 범벅·글래스모피즘 과용 금지

컴포넌트 노트

button
base: primary는 배경 var(--primary) 에메랄드 + var(--primary-foreground) near-black 텍스트, radius var(--radius-field)(6px), 14px/500 Inter, padding 8px 16px.
hover: 그린 배경을 한 단 밝게 또는 옅은 그린 글로우, 120–200ms ease-standard.
focus: 2px var(--ring) 에메랄드 링(box-shadow 0 0 0 2px ring, 오프셋 2px).
disabled: opacity 0.4, cursor not-allowed.
secondary_variant: 배경 투명/var(--secondary), 1px var(--border) 보더, 텍스트 var(--foreground). 예: 'Request a demo'.
ghost_variant: 내비 링크형: 배경 투명, 텍스트 var(--foreground)/var(--muted-foreground), hover 시 배경 var(--secondary).
card
배경 var(--card), 1px var(--border) 헤어라인, radius var(--radius)(12–16px), padding 24px. 섀도우 기본 없음 — 보더로 구분. 다크에서는 card가 background보다 한 단 밝은 톤.
input
배경 var(--input) 반투명/서피스, 1px var(--border) 보더, radius var(--radius-field)(6px), padding 8px 12px, 14px/450. 포커스 시 border→var(--ring) + 얇은 링. placeholder는 var(--muted-foreground).
nav
상단 sticky + 옅은 backdrop-blur. 좌측 워드마크(볼트 로고), 중앙 드롭다운 링크(Product/Developers/Solutions), 우측 'Sign in' 고스트 + 'Start your project' 그린 primary 버튼. 1px 하단 헤어라인.
badge
작은 상태/버전 배지 — radius 6px 또는 pill, 12px 텍스트. 상태색은 chart-*(퍼플/블루/앰버)을 낮은 alpha 배경 틴트 + 해당 색 텍스트로. 브랜드 그린은 'New'·강조에만.