Shipyard
Complete design token and component reference covering both the marketing website and the dashboard application. Extreme minimalism, black-and-white aesthetic, Geist typography.
Source: · Extracted 2026-03-23
Marketing Website
Bold hero typography, dramatic black backgrounds, high-contrast CTAs
Colors
Pure black and white with a comprehensive gray scale. Blue (#0070F3) is the single accent.
Core Brushwork
Gray Scale
Typography
Geist Sans for all text. Tight letter-spacing on headings creates the signature look.
Spacing & Borders
4px base unit. Shipyard favors borders over shadows.
Spacing Scale
Border Radius
Inputs
Dark background, subtle border, white focus border.
Cards & Badges
Subtle borders, dark backgrounds. Pill-shaped badges with translucent tints.
Badges
Code Blocks
Geist Mono, dark background, syntax highlighting, borders not shadows.
Hero & Bento Grid
Centered hero with massive heading. Feature bento grid with spanning cells.
Develop.
Preview.
Ship.
Shipyard's Frontend Cloud gives developers frameworks, workflows, and infrastructure to build a faster, more personalized web.
Instant Rollbacks
Deploy with confidence. Roll back to any previous deployment in seconds.
Edge Functions
Run serverless at the edge.
Web Analytics
Privacy-friendly, real-time.
AI SDK
TypeScript toolkit for building AI applications with React Server Components.
Application / Portal
Dark-mode-first, deployment management, build logs, analytics
Colors & Status
Deeper grays than the marketing site. Deployment status colors are the primary semantic system.
Backgrounds
Deployment Status
Typography
More compact than marketing. Body defaults to 14px. Geist Mono for hashes, timestamps, logs.
Form Controls
Black background inputs. Includes toggles and checkboxes.
Toggle
Tables
Uppercase headers, subtle row borders, hover highlighting.
| Deployment | Status | Branch | Commit | Age |
|---|---|---|---|---|
| my-app-abc123.Shipyard.app | Ready | main | a1b2c3d | 2m ago |
| my-app-def456.Shipyard.app | Building | feat/auth | e4f5g6h | 15m ago |
| my-app-ghi789.Shipyard.app | Error | fix/build | i7j8k9l | 1h ago |
Badges & Progress
Translucent tinted badges with status dots. Progress bars match status colors.
Progress Bars
Modals & Menus
Dark modals with 12px radius. Dropdown menus with shadow. Toasts for notifications.
Modal
Dropdown
Toasts
Deployments
Status dot, URL, branch, commit hash, and timing in each card.
Build Logs
Geist Mono on near-black. Timestamps gray, success teal, errors red.
Analytics
Blue accent bar charts. Large bold metric numbers.
Loading States
Shimmer skeleton animation and dashed-border empty states.
Skeleton
Empty State
Token Reference
Quick lookup table for all design tokens.
Color Tokens
| Token | Value | Usage |
|---|---|---|
| --bg | #000000 | Page background |
| --bg-secondary | #111111 | Cards, code blocks |
| --bg-panel | #0A0A0A | Sidebar, build logs (app) |
| --text | #FFFFFF / #EDEDED | Primary text (site / app) |
| --text-secondary | #888888 | Descriptions, captions |
| --accent | #0070F3 | Links, deploy btn, charts |
| --border | #333333 | Card borders, dividers |
| --ready | #50E3C2 | Ready / success status |
| --building | #F5A623 | Building / warning |
| --error | #EE0000 | Error / destructive |
Typography Tokens
| Token | Value | Context |
|---|---|---|
| --font-sans | Geist, Inter, system | All text |
| --font-mono | Geist Mono, SF Mono | Code, hashes, logs |
| Hero (site) | 64px / 700 / -0.04em | Marketing hero |
| H1 (site) | 48px / 700 / -0.03em | Page headings |
| Metric (app) | 32px / 700 / -0.02em | Dashboard numbers |
| Page Title (app) | 24px / 600 | Settings, project pages |
| Body (site) | 16px / 400 | Marketing body |
| Body (app) | 14px / 400 | Dashboard body |
Component Dimensions
| Component | Website | Dashboard |
|---|---|---|
| Button height | 40px | 36px |
| Input height | 40px | 36px |
| Nav height | 64px | 64px |
| Card radius | 8px | 8px |
| Button radius | 6px | 6px |
| Modal radius | -- | 12px |
| Sidebar width | -- | 240px |
Tailwind Mapping
The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.
// tailwind.config.js
import designSystem from './design-system.json';
export default {
theme: {
extend: designSystem.tailwind.website.theme.extend,
},
};
// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.
| Scope | Primary | Body Font | Radius | Shadow | Breakpoint |
|---|---|---|---|---|---|
| Website | — | — | — | — | — |
| App / Portal | — | — | — | — | — |
| Scope | Recipe | Class Pattern | Notes |
|---|---|---|---|
| Website | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| Website | surfaceCard | rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6 | Default surface/card treatment for high-visibility content areas. |
| Website | inputField | rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |
| App / Portal | buttonPrimary | inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colors | Primary action button using exported brand, radius, and shadow tokens. |
| App / Portal | surfaceCard | rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6 | Default surface/card treatment for high-visibility content areas. |
| App / Portal | inputField | rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-focus-ring | Base text input treatment aligned to the exported radius, border, and focus tokens. |