Style identity
Harbor Data
An unofficial original system for a data model becoming a useful product surface.
Light-first developer platform with emerald product signals and precise technica themeDesign system Pro AI Kit11 components
Supabase-inspired Harbor Data Product System
An unofficial, original Supabase-inspired design system for a data model becoming a useful product surface. Eleven focused elements for a concrete product workflow.
Desktop · 1440 × 7691
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Manrope
Display and editorial headings
Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif- Weights
- 400–800 variable
- Sizes
- 36–72px desktop; 30–44px mobile
- Line height
- 0.98–1.08
- Tracking
- −0.06em to −0.02em
Fallback: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif
Inter
Navigation, controls, and body copy
Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif- Weights
- 400–700 variable
- Sizes
- 14–18px
- Line height
- 1.45–1.65
- Tracking
- −0.01em to 0
Fallback: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif
Source Code Pro
Code, labels, metrics, and technical metadata
"Source Code Pro", "Source Code Pro Fallback", ui-monospace, Menlo, monospace- Weights
- 200–900 variable
- Sizes
- 11–14px
- Line height
- 1.45–1.6
- Tracking
- 0 to 0.02em
Fallback: ui-monospace, Menlo, monospace
Palette
Core colors
Light canvas
#ffffffPrimary homepage background
Light surface
#f8faf9Quiet product and template surfaces
Light border
#e5ebe8Grid and card boundaries
Dark canvas
#171717Dark-mode page background
Dark surface
#202221Dark-mode product panels
Ink
#1c1c1cPrimary text on light surfaces
Muted ink
#6b7280Supporting copy and metadata
Emerald
#3ecf8ePrimary action and healthy state
Deep emerald
#24b47eAction hover and emphasis
Blue signal
#3b82f6Code or secondary data accent
Amber
#d9902fAttention and pending state
Red
#d94f5cFailure and destructive state
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | clamp(2.5rem, 7vw, 5.5rem) | 600 | 0.98 | -0.06em |
| Section heading | clamp(2rem, 4.5vw, 4rem) | 600 | 1.02 | -0.05em |
| Product heading | 24px | 600 | 1.2 | -0.03em |
| Body large | 18px | 400 | 1.6 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface | 14px | 500 | 1.4 | -0.01em |
| Technical | 12px | 500 | 1.45 | 0.02em |
Spacing & shape
Layout rhythm
- Density
- Open marketing rhythm with compact product groupings
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 72–128px
- Card padding
- 20–32px
- Element gap
- 8–16px
Iconography
Crisp outlined interface icons with rounded joins
1.5–2px stroke · 16px / 20px / 24px
Use currentColor, pair unfamiliar symbols with labels, and reserve filled marks for status dots or an original product mark.
System metrics
Radius
sm 6pxmd 8pxlg 12pxxl 16pxpill 999px
Spacing
Base unit 4pxInline gap 8–16pxCard padding 20–32pxSection gap 72–128pxContent rail 1200px
Motion
Fast control 150msStandard transition 220msReveal 420msReduced motion Remove transforms and nonessential animation
Elevation
Boundary
1px neutral border with one-step surface shiftDefault cards and product frames
Floating
0 12px 36px rgba(0, 0, 0, .18)Menus and command surfaces
Modal
0 24px 80px rgba(0, 0, 0, .32)Dialogs and blocking confirmation
Surfaces & shape
Canvas
#ffffff / #171717Page background in light / dark mode
Surface
#f8faf9 / #202221Cards, controls, and product frames
Raised
#eef5f1 / #2b302dSelected rows, nested panels, and focus context
Guidelines
Do
- Keep schema, policy state, and the next project action in one readable frame.
- Use emerald for action and healthy state; let quiet neutral surfaces carry most of the hierarchy.
- Treat product modules as a navigable family, not a dashboard wall.
- Keep status understandable in grayscale with text, shape, or icon.
Don't
- ×Do not copy logos, screenshots, protected marketing passages, or proprietary artwork.
- ×Do not add taxonomy filler, decorative-only patterns, or dashboard-sized specimens.
- ×Do not use color as the sole carrier of meaning.
- ×Do not make the compact element frame depend on a full-page shell.
Imagery
Prefer sharp product UI, code snippets, table/editor frames, templates, and restrained data diagrams. Do not reuse Supabase imagery, wordmarks, customer logos, or screenshot crops in original work.
Layout
Use a centered 1200px content rail. Lead with a strong statement and two actions, then move through modular product proof, editor/code evidence, templates, trust, community, and a compact footer. Collapse grids to one column below 720px.
Concept
A complete visual language, ready to inspect.
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
Supabase-inspired Harbor Data Interface Elements
11 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
Observable-inspired Signal Notebook
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
Replit-inspired Build Canvas
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.