Supabase

Overview

Supabaze's design language is engineered for clarity above all else. The marketing surfaces sit on `{colors.canvas}` (pure white), with text rendered in `{colors.ink}` (`#171717` — near-black, never pure black). Across the entire system the only consistent chromatic event is the **emerald green primary** (`{colors.primary}` — `#3ecf8e`) — used as the filled CTA, occasional accent dot, and the signature highlight color in the wordmark. Everything else is a calibrated grey ladder from `#ededed` hairline-cool to `#171717` ink, with thin black-on-white typography doing most of the visual work.

Typography runs **Circular** at weight 500 for display and 400 for body. The display tier uses tight negative letter-spacing (-1.92px at 64px) to pull the rounded humanist letterforms into editorial density. There's no atmospheric gradient, no full-bleed photography, no dark-canvas marketing track — the brand commits to white.

The product itself appears as composited UI screenshots on every page: dashboard tables, SQL editors, query builders, log streams. These screenshots are the brand's argument. They sit inside `{rounded.lg}` 12px containers with subtle 1px hairlines, often arranged 2-up or in a floating "stacked panes" composition above the hero band.

**Key Characteristics:**

• Single emerald primary (`{colors.primary}` `#3ecf8e`) as the only chromatic event; everything else is monochrome.
• White canvas marketing track with greyscale hierarchy from `{colors.hairline-cool}` to `{colors.ink}`.
• Custom humanist sans display tier at weight 500 with negative letter-spacing of -1.92px to -0.42px.
• Composited product UI screenshots (dashboard, SQL editor, log stream) are the dominant decorative element — never photography, never illustrations.
• Tight 6px / 8px button radii — square-ish, technical, never pill-shaped.
• Code blocks rendered in deep `{colors.canvas-night}` (`#1c1c1c`) with monospace inline code; the brand's developer DNA is visible in every snippet.
• Pricing tiers use a dark inverted `{colors.canvas-night}` featured tier, not a green one — the green is reserved for buttons and dot accents.

Colors

> **Source pages:** home (`/`), `/database`, `/partners/integrations`, `/partners/integrations/powersync`, `/solutions/ai-builders`, `/pricing`.

Brand & Accent

• **Emerald** (`{colors.primary}` — `#3ecf8e`): The signature CTA color. Filled-button background, brand wordmark accent, dot indicator.
• **Emerald Deep** (`{colors.primary-deep}` — `#24b47e`): Pressed-state lift of the primary.
• **Emerald Soft** (`{colors.primary-soft}` — `#4ade80`): Lighter emerald used in chart accents and product UI.
• **Accent Purple** (`{colors.accent-purple}` — `#6b01c2`): Rare accent used in integration logos and chart points; never a button.
• **Accent Violet** (`{colors.accent-violet}` — `#644fc1`): Secondary accent in the same role as accent purple.
• **Accent Yellow** (`{colors.accent-yellow}` — `#ffdb13`): Chart accent / status indicator only.
• **Accent Pink / Crimson / Indigo / Tomato**: Reserved for integration logos and rare chart highlights, never as system colors.

Surface

• **Canvas** (`{colors.canvas}` — `#ffffff`): Default page background.
• **Canvas Soft** (`{colors.canvas-soft}` — `#fafafa`): Barely-tinted off-white for alternating section bands.
• **Canvas Night** (`{colors.canvas-night}` — `#1c1c1c`): Deep near-black used in code blocks, dashboard mockups, featured pricing tier.
• **Canvas Night Soft** (`{colors.canvas-night-soft}` — `#202020`): Slightly lifted dark for nested chrome.
• **Hairline** (`{colors.hairline}` — `#dfdfdf`): 1px borders on cards and tables.
• **Hairline Strong** (`{colors.hairline-strong}` — `#c7c7c7`): Slightly darker border for emphasis.
• **Hairline Cool** (`{colors.hairline-cool}` — `#ededed`) / **Hairline Cool 2** (`#efefef`) / **Hairline Cool 3** (`#d4d4d4`): The brand's grey ladder for fine chrome work.

Text

• **Ink** (`{colors.ink}` — `#171717`): Default body text. Near-black, never pure.
• **Ink Secondary** (`{colors.ink-secondary}` — `#212121`): Slightly cooler near-black for body emphasis.
• **Ink Mute** (`{colors.ink-mute}` — `#707070`): Secondary text and helper copy.
• **Ink Mute 2** (`{colors.ink-mute-2}` — `#9a9a9a`): Tertiary text.
• **Ink Faint** (`{colors.ink-faint}` — `#b2b2b2`): Disabled / placeholder text.
• **On Primary** (`{colors.on-primary}` — `#171717`): Text on the emerald primary fill — near-black, not white. The button reads as a "lit" surface with dark type, not a colored chip.
• **On Dark** (`{colors.on-dark}` — `#ffffff`): Text on canvas-night surfaces.

Typography

Font Family

The display and UI tier is **Circular** — a proprietary geometric humanist sans by Lineto. Fallback chain: `'Helvetica Neue', Helvetica, Arial`.

For maximum brand fidelity when Circular isn't licensed, use **Inter** (open-source via Google Fonts) at weight 500 for display with `letter-spacing: -1.92px` at 64px. Inter is the closest open-source analogue to Circular's geometric humanist character.

Code blocks use **system mono** (`ui-monospace`, with Menlo / Monaco / Consolas fallbacks).

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 64px | 500 | 1.1 | -1.92px | Hero headline |

| `{typography.display-xl}` | 48px | 500 | 1.1 | -1.44px | Section opener |

| `{typography.display-lg}` | 36px | 500 | 1.15 | -0.72px | Sub-section / pricing tier |

| `{typography.display-md}` | 28px | 500 | 1.2 | -0.42px | Card title |

| `{typography.heading-lg}` | 22px | 500 | 1.2 | 0 | Compact heading |

| `{typography.heading-md}` | 18px | 500 | 1.4 | 0 | Section sub-heading |

| `{typography.body-lg}` | 18px | 400 | 1.55 | 0 | Marketing body lead |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default UI body |

| `{typography.button-md}` | 14px | 500 | 1.0 | 0 | Button label |

| `{typography.caption}` | 13px | 400 | 1.45 | 0 | Helper, footnote |

| `{typography.micro}` | 12px | 400 | 1.45 | 0 | Pill label, fine print |

| `{typography.code}` | 14px | 400 | 1.5 | 0 | Code block content |

Principles

• **Weight 500 across display.** Mid-weight reads as engineered, not decorative.
• **Negative tracking on display.** -1.92px at 64px scaling proportionally down — tightens the rounded humanist letterforms into editorial density.
• **Mono for code.** System mono families (Menlo / Monaco) — no proprietary mono webfont.

Note on Font Substitutes

Circular is proprietary. Use **Inter** at weight 500 with `letter-spacing: -1.92px` for display tiers. **Geist Sans** (open-source from Vercel) is another close alternative for both display and body. Avoid Helvetica defaults — they're heavier and lack the geometric warmth.

Layout

Spacing System

• **Base unit**: 8px (with 2 / 4 / 12 sub-tokens for fine work).
• **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px.
• **Section padding**: 64–96px on marketing surfaces.
• **Card internal padding**: 32px on feature/pricing cards.

Grid & Container

• Marketing pages center in a ~1280px container with no edge-bleed; the brand keeps content inside the box.
• Pricing collapses 4-up → 2-up → 1-up at 1024 / 768 breakpoints.
• Product UI mockups stack 2-up or render as overlapping panes inside the same container.

Whitespace Philosophy

The brand uses generous 64–96px section padding without atmospheric gradients filling the space — the white canvas is the design. The composited product UI mockups break up sections without requiring decoration.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| 0 | Flat, 1px hairline | Default cards |

| 1 | `box-shadow: 0 1px 3px rgba(0,0,0,0.06)` | Subtle card lift |

| 2 | `box-shadow: 0 8px 24px rgba(0,0,0,0.08)` | Floating composited UI mockups |

| 3 | `box-shadow: 0 16px 48px rgba(0,0,0,0.12)` | Modal overlays, deep elevation |

Decorative Depth

The brand's depth is **product UI mockups** rather than gradients. Stacked dashboard / SQL editor / log panes composite together with subtle Level 2 shadows to suggest spatial hierarchy.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Form inputs, hairline tags |

| `{rounded.sm}` | 6px | Buttons (the brand's signature button radius), code blocks |

| `{rounded.md}` | 8px | Compact cards, alerts |

| `{rounded.lg}` | 12px | Pricing cards, feature cards, product mockups |

| `{rounded.xl}` | 16px | Modal dialogs, large container chrome |

| `{rounded.full}` | 9999px | Pill tags, avatars |

Photography Geometry

The brand uses minimal photography. Customer logo strips display wordmarks at uniform height (~24–32px) in greyscale; case-study cards (rare) use 4:3 photos inset in `{rounded.lg}` containers.

Components

Buttons

**`button-primary-green`** — the signature CTA.

• Background `{colors.primary}`, text `{colors.on-primary}` (near-black, NOT white), type `{typography.button-md}`, padding `{spacing.sm} {spacing.lg}` (8px 16px), rounded `{rounded.sm}` 6px.
• Pressed state `button-primary-green-pressed` shifts to `{colors.primary-deep}`.

**`button-secondary-outline`** — outline alternative on white.

• Background `{colors.canvas}`, text `{colors.ink}`, 1px solid `{colors.hairline-strong}` border, same shape.

**`button-on-dark`** — used on dark surfaces / code-block CTAs.

• Background `{colors.canvas-night}`, text `{colors.on-dark}`, same shape.

**`button-link`** — text-only inline button.

• Transparent background, text `{colors.ink}` rendered in `{typography.button-md}`, no padding, with a subtle underline on hover.

Cards & Containers

**`card-feature-light`** — feature card on white.

• Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}` 12px, 1px `{colors.hairline}` border.

**`card-pricing`** — standard pricing tier.

• Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border. Title in `{typography.heading-lg}`, price in `{typography.display-md}`, body in `{typography.body-md}`, CTA `button-primary-green` pinned bottom.

**`card-pricing-featured`** — inverted dark featured tier.

• Background `{colors.canvas-night}`, text `{colors.on-dark}`, otherwise identical structure.

**`card-feature-dark`** — feature card with deep dark fill.

• Background `{colors.canvas-night}`, text `{colors.on-dark}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`. Used for code-heavy feature explanations.

**`code-block`** — code snippet container.

• Background `{colors.canvas-night}`, text `{colors.on-dark}` rendered in `{typography.code}`. Padding `{spacing.lg}` 16px, rounded `{rounded.sm}` 6px.

Inputs & Forms

**`text-input`** — standard form input.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm} {spacing.md}` (8px 12px), rounded `{rounded.sm}` 6px, 1px `{colors.hairline}` border.

Navigation

**`nav-bar-light`** — top nav across the site.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg} {spacing.xl}`. Logo on the left, primary nav center, "Sign In" link + filled `button-primary-green` on the right.

Pills, Tags, and Chips

**`pill-tag-green`** — small green pill used for "new" or featured indicators.

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.micro}`, padding `{spacing.xxs} {spacing.sm}`, rounded `{rounded.full}`.

**`pill-tag-soft`** — neutral pill on light surfaces.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, otherwise same shape.

Signature Components

**Composited Product UI Mockups** — multi-layer dashboard / SQL editor / log pane composites with subtle Level 2 shadows. The product is the brand's argument; mockups always sit on white canvas with no surrounding decoration.

**`link-on-light`** — inline links in body copy.

• Text `{colors.ink}` rendered in `{typography.body-md}` with a persistent underline.

**`footer-light`** — site-wide footer.

• Background `{colors.canvas}`, text `{colors.ink-mute}`, type `{typography.caption}`, padding `{spacing.huge} {spacing.xl}` (64px 24px). Holds 4–5 columns of link groups, social icons, and a small legal row.

Do's and Don'ts

Do

• Reserve `{colors.primary}` emerald for filled CTAs and the wordmark accent — it should appear sparingly.
• Render display tiers at weight 500 with negative letter-spacing — the engineered tightness is part of the brand.
• Use `{rounded.sm}` 6px for buttons — square-ish radii, never pill-shaped.
• Composite product UI mockups inside `{rounded.lg}` containers with subtle Level 2 shadows.
• Use near-black `{colors.ink}` on the emerald button (not white) — the green reads as "lit" with dark type, which is the brand's idiosyncratic choice.
• Apply system mono for every code block.

Don't

• Don't introduce additional accent colors as system colors — purples, yellows, and pinks belong inside chart points and integration logos only.
• Don't bump display weight above 500 — the brand's calibrated mid-weight breaks at 600+.
• Don't use pill-shaped buttons; the brand's button radius is square-ish 6px.
• Don't use white text on the emerald button — the brand specifically uses near-black on green.
• Don't add atmospheric gradients to hero bands — the white canvas is the design.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Wide | ≥ 1440px | Full container width; product mockups at full scale |

| Desktop | 1024–1440px | Default content max-width; pricing 4-up |

| Tablet | 768–1023px | Pricing 2-up; mockups simplify to single panel |

| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 64 → 36px |

Touch Targets

• Buttons hit ≥ 36×36px on mobile; vertical padding scales up to maintain WCAG AA minimum.
• Form fields stay at 36px minimum height.

Collapsing Strategy

• Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
• Product UI mockups simplify to a single primary panel on mobile.
• Pricing tiers stair-step 4-up → 2-up → 1-up; dark featured tier always distinguished.

Image Behavior

Product UI mockups use `srcset` with desktop / mobile crops; mobile crops focus on the most actionable inner panel.

Iteration Guide

1. Focus on ONE component at a time.

2. Reference component names and tokens directly.

3. Run `npx @google/design.md lint DESIGN.md` after edits.

4. Default body to `{typography.body-md}`; use `{typography.code}` for any developer-facing snippet.

5. Keep emerald scarce; one filled green button per viewport.

6. The white-canvas commitment is non-negotiable — adding atmospheric backdrops breaks the brand.

개요

Supabaze의 디자인 언어는 무엇보다 명확성을 위해 설계되었습니다. 마케팅 표면은 `{colors.canvas}`(순백색)에 위치하며 텍스트는 `{colors.ink}`(`#171717` - 검정색에 가까우며 절대 검정색이 아님)로 렌더링됩니다. 전체 시스템에서 유일하게 일관된 색채 이벤트는 **에메랄드 녹색 원색**(`{colors.primary}` - `#3ecf8e`)입니다. 이는 채워진 CTA, 가끔 강조점 및 워드마크의 시그니처 강조 색상으로 사용됩니다. 그 밖의 모든 것은 `#ededed` hairline-cool에서 `#171717` 잉크까지 보정된 회색 사다리이며, 흰색 바탕에 얇은 흑백 타이포그래피가 대부분의 시각적 작업을 수행합니다.

타이포그래피는 디스플레이의 경우 무게 500, 본문의 경우 400으로 **원형**으로 실행됩니다. 디스플레이 계층은 둥근 인문주의 문자 형식을 편집 밀도로 끌어오기 위해 엄격한 음수 문자 간격(64px에서 -1.92px)을 사용합니다. 분위기 있는 그라데이션도 없고, 풀 블리드 사진도 없고, 어두운 캔버스 마케팅 트랙도 없습니다. 브랜드는 흰색을 약속합니다.

제품 자체는 대시보드 테이블, SQL 편집기, 쿼리 빌더, 로그 스트림 등 모든 페이지에 합성 UI 스크린샷으로 표시됩니다. 이 스크린샷은 브랜드의 주장입니다. 그들은 미묘한 1px 헤어라인이 있는 `{rounded.lg}` 12px 컨테이너 안에 있으며, 종종 2-up으로 배열되거나 히어로 밴드 위에 떠 있는 "스택 창" 구성으로 배열됩니다.

**주요 특징:**

• 유일한 색채 이벤트로서 단일 에메랄드 원색(`{colors.primary}` `#3ecf8e`); 다른 모든 것은 단색입니다.
• `{colors.hairline-cool}`에서 `{colors.ink}`까지 그레이스케일 계층 구조를 갖춘 흰색 캔버스 마케팅 트랙입니다.
• -1.92px ~ -0.42px의 음수 문자 간격을 사용하여 가중치 500의 사용자 정의 휴머니스트 산세 디스플레이 계층입니다.
• 합성된 제품 UI 스크린샷(대시보드, SQL 편집기, 로그 스트림)은 지배적인 장식 요소입니다. 절대 사진이나 일러스트레이션이 아닙니다.
• 6px / 8px의 좁은 버튼 반경 — 정사각형 모양이고 기술적이며 절대 알약 모양이 아닙니다.
• 고정 폭 인라인 코드를 사용하여 깊은 `{colors.canvas-night}`(`#1c1c1c`)에서 렌더링된 코드 블록; 브랜드의 개발자 DNA는 모든 스니펫에서 볼 수 있습니다.
• 가격 책정 계층은 녹색이 아닌 어둡게 반전된 '{colors.canvas-night}' 기능 계층을 사용합니다. 녹색은 버튼과 점 강조용으로 예약되어 있습니다.

색상

> **소스 페이지:** 홈(`/`), `/database`, `/partners/integrations`, `/partners/integrations/powersync`, `/solutions/ai-builders`, `/pricing`.

브랜드 및 액센트

• **에메랄드** (`{colors.primary}` — `#3ecf8e`): 시그니처 CTA 색상입니다. 채워진 버튼 배경, 브랜드 워드마크 액센트, 도트 표시기.
• **Emerald Deep** (`{colors.primary-deep}` — `#24b47e`): 1차의 프레스 상태 리프트.
• **Emerald Soft** (`{colors.primary-soft}` — `#4ade80`): 차트 액센트 및 제품 UI에 사용되는 밝은 에메랄드입니다.
• **Accent Purple** (`{colors.accent-purple}` — `#6b01c2`): 통합 로고 및 차트 포인트에 사용되는 드문 악센트입니다. 결코 버튼이 아닙니다.
• **Accent Violet** (`{colors.accent-violet}` — `#644fc1`): 악센트 보라색과 동일한 역할을 하는 보조 악센트입니다.
• **악센트 노란색** (`{colors.accent-yellow}` — `#ffdb13`): 차트 악센트/상태 표시기 전용입니다.
• **액센트 핑크/크림슨/인디고/토마토**: 통합 로고 및 희귀 차트 하이라이트용으로 예약되어 있으며 시스템 색상으로는 절대 사용되지 않습니다.

표면

• **캔버스** (`{colors.canvas}` — `#ffffff`): 기본 페이지 배경.
• **캔버스 소프트**(`{colors.canvas-soft}` — `#fafafa`): 교차 섹션 밴드를 위한 거의 색조가 없는 황백색입니다.
• **캔버스 나이트**(`{colors.canvas-night}` — `#1c1c1c`): 코드 블록, 대시보드 모형, 주요 가격 책정 계층에 사용되는 짙은 검정색입니다.
• **Canvas Night Soft** (`{colors.canvas-night-soft}` — `#202020`): 중첩된 크롬을 위해 약간 어두워졌습니다.
• **헤어라인** (`{colors.hairline}` — `#dfdfdf`): 카드와 테이블에 1px 테두리.
• **헤어라인 강함** (`{colors.hairline-strong}` — `#c7c7c7`): 강조를 위해 약간 더 어두운 테두리.
• **Hairline Cool** (`{colors.hairline-cool}` — `#ededed`) / **Hairline Cool 2** (`#efefef`) / **Hairline Cool 3** (`#d4d4d4`): 섬세한 크롬 작업을 위한 브랜드의 회색 사다리.

텍스트

• **잉크**(`{colors.ink}` — `#171717`): 기본 본문 텍스트입니다. 거의 검은색이고 결코 순수하지 않습니다.
• **잉크 보조**(`{colors.ink-secondary}` — `#212121`): 본문 강조를 위해 약간 더 시원한 검정색에 가깝습니다.
• **잉크 음소거**(`{colors.ink-mute}` — `#707070`): 보조 텍스트 및 도우미 사본.
• **잉크 음소거 2**(`{colors.ink-mute-2}` — `#9a9a9a`): 3차 텍스트.
• **잉크 희미함**(`{colors.ink-faint}` — `#b2b2b2`): 비활성화됨/자리 표시자 텍스트.
• **On Primary** (`{colors.on-primary}` — `#171717`): 에메랄드색 기본 채우기의 텍스트 — 흰색이 아닌 검정색에 가깝습니다. 버튼은 컬러 칩이 아닌 어두운 유형의 "조명" 표면으로 읽혀집니다.
• **On Dark** (`{colors.on-dark}` — `#ffffff`): 밤 캔버스 표면의 텍스트입니다.

타이포그래피

글꼴 계열

디스플레이 및 UI 계층은 Lineto의 독점 기하학적 인본주의적 기술인 **원형**입니다. 폴백 체인: ``Helvetica Neue', Helvetica, Arial`.

Circular의 라이선스가 없을 때 브랜드 충실도를 극대화하려면 **Inter**(Google을 통한 오픈 소스)를 사용하세요.

概要

Supabaze のデザイン言語は、何よりも分かりやすさを重視して設計されています。マーケティング面は `{colors.canvas}` (純白) 上にあり、テキストは `{colors.ink}` (`#171717` — 黒に近く、決して純黒ではありません) でレンダリングされます。システム全体で唯一の一貫した色彩イベントは **エメラルド グリーンの原色** (`{colors.primary}` — `#3ecf8e`) です。塗りつぶし CTA、時折のアクセント ドット、およびワードマークの署名のハイライト カラーとして使用されます。他のものはすべて、「#ededed」ヘアラインクールから「#171717」インクまで調整されたグレーのはしごで、白地に黒の薄いタイポグラフィーが視覚的な作業のほとんどを行っています。

タイポグラフィは、表示のウェイト 500、本文のウェイト 400 で **Circular** を実行します。表示層では、狭い負の文字間隔 (64 ピクセルで -1.92 ピクセル) を使用して、丸みを帯びたヒューマニストの文字フォームを編集上の密度に引き込みます。大気のグラデーション、フルブリード写真、ダークキャンバスのマーケティングトラックはなく、ブランドは白にこだわっています。

製品自体は、ダッシュボード テーブル、SQL エディター、クエリ ビルダー、ログ ストリームなどのすべてのページに、合成された UI スクリーンショットとして表示されます。これらのスクリーンショットはブランドの主張です。これらは、微妙な 1 ピクセルのヘアラインを備えた `{rounded.lg}` 12 ピクセルのコンテナ内に配置され、多くの場合、ヒーロー バンドの上に 2 アップまたはフローティング「スタック ペイン」構成で配置されます。

**主な特徴:**

• 唯一の色彩イベントとしての単一のエメラルド原色 (`{colors.primary}` `#3ecf8e`)。それ以外はすべてモノクロです。
• `{colors.hairline-cool}` から `{colors.ink}` までのグレースケール階層を持つ白いキャンバスのマーケティング トラック。
• カスタム ヒューマニスト サンズ表示層、ウェイト 500、負の文字間隔 -1.92px ～ -0.42px。
• 複合製品の UI スクリーンショット (ダッシュボード、SQL エディター、ログ ストリーム) が主要な装飾要素であり、決して写真やイラストではありません。
• タイトな 6 ピクセル / 8 ピクセルのボタン半径 — 正方形っぽく、技術的で、決して丸薬の形ではありません。
• 等幅インライン コードを使用してディープ `{colors.canvas-night}` (`#1c1c1c`) でレンダリングされたコード ブロック。ブランドの開発者の DNA がすべてのスニペットに表れています。
• 価格帯は、緑の層ではなく、暗い反転「{colors.canvas-night}」の注目層を使用します。緑はボタンとドットのアクセント用に予約されています。

色

> **ソース ページ:** ホーム (`/`)、`/database`、`/partners/integrations`、`/partners/integrations/powersync`、`/solutions/ai-builders`、`/pricing`。

ブランドとアクセント

• **エメラルド** (`{colors.primary}` — `#3ecf8e`): CTA の特徴的な色。塗りつぶされたボタンの背景、ブランドのワードマークのアクセント、ドット インジケーター。
• **エメラルドディープ** (`{colors.primary-deep}` — `#24b47e`): プライマリの押された状態のリフト。
• **エメラルド ソフト** (`{colors.primary-soft}` — `#4ade80`): グラフのアクセントと製品 UI で使用される明るいエメラルド。
• **アクセント パープル** (`{colors.accent-purple}` — `#6b01c2`): 統合ロゴとチャート ポイントで使用される珍しいアクセント。決してボタンではありません。
• **アクセント バイオレット** (`{colors.accent-violet}` — `#644fc1`): アクセント パープルと同じ役割を持つ二次アクセント。
• **アクセントイエロー** (`{colors.accent- yellow}` — `#ffdb13`): チャートのアクセント/ステータスインジケーターのみ。
• **アクセント ピンク / クリムゾン / インディゴ / トマト**: 統合ロゴおよびレア チャートのハイライト用に予約されており、システム カラーとしては使用されません。

表面

• **キャンバス** (`{colors.canvas}` — `#ffffff`): デフォルトのページの背景。
• **キャンバス ソフト** (`{colors.canvas-soft}` — `#fafafa`): 交互セクション バンド用の、かろうじて着色されたオフホワイト。
• **キャンバス ナイト** (`{colors.canvas-night}` — `#1c1c1c`): コード ブロック、ダッシュボード モックアップ、注目の価格帯で使用される濃い黒に近い色。
• **Canvas Night Soft** (`{colors.canvas-night-soft}` — `#202020`): ネストされたクロムの暗さをわずかに引き上げました。
• **ヘアライン** (`{colors.hairline}` — `#dfdfdf`): カードとテーブルの 1 ピクセルの境界線。
• **ヘアライン ストロング** (`{colors.hairline-strong}` — `#c7c7c7`): 強調のためのわずかに暗い境界線。
• **ヘアライン クール** (`{colors.hairline-cool}` — `#ededed`) / **ヘアライン クール 2** (`#efefef`) / **ヘアライン クール 3** (`#d4d4d4`): 細かいクローム加工用のブランドのグレーのはしごです。

テキスト

• **インク** (`{colors.ink}` — `#171717`): デフォルトの本文テキスト。黒に近い、決して純粋ではない。
• **インク セカンダリ** (`{colors.ink-secondary}` — `#212121`): ボディを強調するための、わずかにクールな黒に近い色です。
• **インク ミュート** (`{colors.ink-mute}` — `#707070`): 二次テキストとヘルパー コピー。
• **インク ミュート 2** (`{colors.ink-mute-2}` — `#9a9a9a`): 三次テキスト。
• **インクかすれ** (`{colors.ink-faint}` — `#b2b2b2`): 無効/プレースホルダー テキスト。
• **プライマリ上** (`{colors.on-primary}` — `#171717`): エメラルドのプライマリ塗りつぶし上のテキスト — 白ではなく黒に近い。ボタンは、色付きのチップではなく、暗いタイプの「点灯した」表面として読み取られます。
• **オン ダーク** (`{colors.on-dark}` — `#ffffff`): キャンバスの夜面上のテキスト。

タイポグラフィー

フォントファミリー

ディスプレイと UI 層は **Circular** で、Lineto による独自の幾何学的ヒューマニストです。フォールバック チェーン: `'Helvetica Neue'、Helvetica、Arial`。

Circular がライセンスされていない場合にブランドの忠実性を最大限に高めるには、**Inter** (Google 経由のオープンソース) を使用してください。