yaclty/awesome-design-md
1
0
Fork 0
mirror of https://github.com/VoltAgent/awesome-design-md.git synced 2026-05-14 13:06:57 +08:00
Code Issues Packages Projects Releases Wiki Activity
awesome-design-md/design-md/supabase/DESIGN.md
necatiozmen beec066d6a update DESIGN.md to v2
2026-05-08 14:47:37 +03:00

21 KiB
Raw Blame History

version: alpha name: Supabaze Inspired description: An inspired interpretation of Supabaze's design language — an open-source database platform built on a clean white-and-near-black system with a single signature emerald-green CTA, a custom humanist sans display tier, and dense product UI mockups composited above the hero. The brand reads as quietly technical: minimal chrome, a near-monochrome palette, and the green primary acting as the only chromatic event on the page. colors: primary: "#3ecf8e" primary-deep: "#24b47e" primary-soft: "#4ade80" ink: "#171717" ink-secondary: "#212121" ink-mute: "#707070" ink-mute-2: "#9a9a9a" ink-faint: "#b2b2b2" on-primary: "#171717" on-dark: "#ffffff" canvas: "#ffffff" canvas-soft: "#fafafa" canvas-night: "#1c1c1c" canvas-night-soft: "#202020" hairline: "#dfdfdf" hairline-strong: "#c7c7c7" hairline-cool: "#ededed" hairline-cool-2: "#efefef" hairline-cool-3: "#d4d4d4" accent-purple: "#6b01c2" accent-violet: "#644fc1" accent-purple-soft: "#eddbf9" accent-yellow: "#ffdb13" accent-tomato: "#ff2201" accent-pink: "#c7007e" accent-indigo: "#054cff" accent-crimson: "#e2005a" typography: display-xxl: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 64px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1.92px display-xl: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1.44px display-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.72px display-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.42px heading-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 heading-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 caption: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0 micro: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0 code: fontFamily: "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px huge: 64px components: button-primary-green: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-primary-green-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-secondary-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-on-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-link: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: 0px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px card-feature-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing-featured: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-feature-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px code-block: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.code}" rounded: "{rounded.sm}" padding: 16px pill-tag-green: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.micro}" rounded: "{rounded.full}" padding: 2px 8px pill-tag-soft: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.micro}" rounded: "{rounded.full}" padding: 2px 8px nav-bar-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px link-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-mute}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px

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.