A DesignMD user

Generated Nov 7, 2026

DESIGN.md for www.spaceship.com

www.spaceship.com16 colors6 componentsGB Proxima Nova

Remix

6 screenshots captured· www.spaceship.com

1 / 6 · Buy a .solutions domain name. Start .solutions domain registration now. · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Spaceship
description: |
  Spaceship's design system embodies a forward-thinking, tech-forward identity
  grounded in a dark, high-contrast aesthetic that conveys trust and modernity.
  The interface prioritizes clarity through deliberate use of deep charcoal
  foundations paired with vibrant, energetic accent tones—primarily a striking
  electric blue (#475BFF) that commands attention without overwhelming. The
  system employs expansive whitespace and generous padding to create breathing
  room, reinforcing a premium, unhurried experience. Decorative gradient orbs
  and layered shapes (visible in hero sections) introduce organic, flowing
  movement that contrasts with the precision of the typography and component
  system. The overall mood is confident yet approachable—aspiring to be the
  trusted registrar for a digital-native audience that values both aesthetics
  and function.
source:
  url: "https://www.spaceship.com/"
  pagesAnalyzed: 3
  extractedAt: 2026-11-07
  tokensMeasured: true
colors:
  primary: "#FFFFFF"
  accent: "#475BFF"
  canvas: "#18191B"
  surface: "#252628"
  surface-alt: "#363739"
  ink: "#FFFFFF"
  body: "#B3B3B4"
  muted: "#909091"
  faint: "#595C5B"
  accent-1: "#5D8BFF"
  accent-2: "#00493F"
  accent-3: "#394EFF"
  accent-4: "#152C29"
  accent-5: "#84B5FF"
  accent-6: "#067D76"
  neutral-1: "#808080"
  neutral-2: "#EDEEF0"
typography:
  display-xl:
    fontFamily: "GB Proxima Nova"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.21px
  display-xl-tight:
    fontFamily: "GB Proxima Nova"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.61px
  display-lg:
    fontFamily: "GB Proxima Nova"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.03
    letterSpacing: -0.4px
  display-md:
    fontFamily: "GB Proxima Nova"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  display-sm:
    fontFamily: "GB Proxima Nova"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.07
    letterSpacing: -0.21px
  display-xs:
    fontFamily: "GB Proxima Nova"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: "GB Proxima Nova"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 0px
  heading-sm:
    fontFamily: "GB Proxima Nova"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 0px
  heading-xs:
    fontFamily: "GB Proxima Nova"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.21px
  heading-xs-strong:
    fontFamily: "GB Proxima Nova"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.21px
  heading-xs-tight:
    fontFamily: "GB Proxima Nova"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: 0px
  body-xl:
    fontFamily: "GB Proxima Nova"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.23
    letterSpacing: 0px
  body-lg:
    fontFamily: "GB Proxima Nova"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.36
    letterSpacing: 0px
  body-md:
    fontFamily: "GB Proxima Nova"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  body-sm:
    fontFamily: "GB Proxima Nova"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-xs:
    fontFamily: "GB Proxima Nova"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-xs-strong:
    fontFamily: "GB Proxima Nova"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: 0.21px
  button-md:
    fontFamily: "GB Proxima Nova"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  button-sm:
    fontFamily: "GB Proxima Nova"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  label-xl:
    fontFamily: "GB Proxima Nova"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.61px
  label-lg:
    fontFamily: "GB Proxima Nova"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: 0.21px
  label-md:
    fontFamily: "GB Proxima Nova"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption-sm:
    fontFamily: "GB Proxima Nova"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.21px
  caption-xs:
    fontFamily: "GB Proxima Nova"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.21px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 8px
  sm: 16px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 48px
  band: 72px
shadows:
  sm: "rgba(249, 249, 249, 0.08) 0px 0px 0.5px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.5px 3px 0px, rgba(0, 0, 0, 0.14) 0px 3px 6px 0px"
elevationStrategy: single-tier
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F7F9FF"
    surface: "#EDEFF5"
    surfaceRaised: "#E6E8ED"
    text: "#14151D"
    textMuted: "#696B71"
    border: "#D4D6DB"
    accent: "#475BFF"
    accentFg: "#FFFFFF"
    focusRing: "#475BFF"
    elevation: shadow
  dark:
    bg: "#18191B"
    surface: "#252628"
    surfaceRaised: "#363739"
    text: "#FFFFFF"
    textMuted: "#B3B3B4"
    border: "#343536"
    accent: "#475BFF"
    accentFg: "#FFFFFF"
    focusRing: "#475BFF"
    elevation: "border+surface"
components:
  button-primary:
    typography: "{typography.button-md}"
    textColor: "{colors.ink}"
    height: 40px
    padding: "0px 14px 0px 14px"
    rounded: "{rounded.full}"
    backgroundColor: "rgba(255, 255, 255, 0.12)"
  button-filled:
    typography: "{typography.button-md}"
    textColor: "{colors.surface}"
    height: 48px
    padding: "0px 20px 0px 20px"
    rounded: "{rounded.full}"
    backgroundColor: "rgb(249, 249, 249)"
  button-filled-sm:
    typography: "{typography.button-sm}"
    textColor: "rgb(249, 249, 249)"
    height: 32px
    rounded: "{rounded.full}"
    backgroundColor: "rgba(237, 238, 240, 0.08)"
  button-icon:
    typography: "{typography.button-md}"
    textColor: "rgb(249, 249, 249)"
    height: 40px
    rounded: "{rounded.full}"
    backgroundColor: "{colors.accent}"
  button-text:
    typography: "{typography.button-md}"
    textColor: "{colors.ink}"
    height: 40px
    padding: "0px 14px 0px 14px"
    rounded: "{rounded.full}"
  button-text-sm:
    typography: "{typography.button-md}"
    textColor: "rgb(249, 249, 249)"
    height: 24px
  card:
    typography: "{typography.body-sm}"
    textColor: "{colors.body}"
    boxShadow: "rgba(249, 249, 249, 0.08) 0px 0px 0.5px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.5px 3px 0px, rgba(0, 0, 0, 0.14) 0px 3px 6px 0px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.surface}"
  card-sm:
    typography: "{typography.body-sm}"
    textColor: "{colors.body}"
    boxShadow: "rgba(249, 249, 249, 0.08) 0px 0px 0.5px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.5px 3px 0px, rgba(0, 0, 0, 0.14) 0px 3px 6px 0px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.accent-4}"
  badge-filled:
    typography: "{typography.caption-xs}"
    textColor: "{colors.accent-2}"
    height: 18px
    padding: "0px 8px 0px 8px"
    rounded: "{rounded.sm}"
    backgroundColor: "rgb(167, 240, 224)"
  navigation:
    typography: "{typography.body-sm}"
    textColor: "{colors.body}"
    height: 40px
    padding: "0px 16px 0px 16px"
  footer:
    typography: "{typography.body-sm}"
    textColor: "rgb(249, 249, 249)"
    padding: "40px 0px 40px 0px"
    backgroundColor: "{colors.canvas}"
  link:
    textColor: "rgba(255, 255, 255, 0.66)"
    fontSize: 14px
    fontFamily: "GB Proxima Nova"
    fontWeight: 400
    lineHeight: 1.14
    rounded: "{rounded.xs}"
  link-lg:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
states:
  button-focus-visible:
    target: button
    state: focus-visible
    outline: none
  button-hover:
    target: button
    state: hover
    textDecoration: none
  button-active:
    target: button
    state: active
    textDecoration: none
  button-disabled:
    target: button
    state: disabled
    opacity: 0.4
  badge-focus-visible:
    target: badge
    state: focus-visible
    outline: none
  badge-hover:
    target: badge
    state: hover
    textDecoration: none
  other-focus-visible:
    target: other
    state: focus-visible
    outline: none
  other-hover:
    target: other
    state: hover
    opacity: 0.8
  other-focus:
    target: other
    state: focus
    outline: none
  button-focus:
    target: button
    state: focus
    textDecoration: none
breakpoints:
  - width: 375
    containerWidth: 354
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 38
    bodyPx: 16
    sectionPaddingX: 19
  - width: 768
    containerWidth: 707
    gridColumns: 0
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 38
  - width: 1024
    containerWidth: 954
    gridColumns: 2
    navLinksVisible: 48
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 16
    sectionPaddingX: 51
  - width: 1280
    containerWidth: 1184
    gridColumns: 3
    navLinksVisible: 48
    menuToggleVisible: true
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 64
  - width: 1440
    containerWidth: 1328
    gridColumns: 3
    navLinksVisible: 48
    menuToggleVisible: true
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 72
coverage:
  statesFound: 20
  gradientsFound: 0
  rolesUnassigned: 8
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Spaceship

1. Visual Theme & Atmosphere

Spaceship's design system embodies a forward-thinking, tech-forward identity grounded in a dark, high-contrast aesthetic that conveys trust and modernity. The interface prioritizes clarity through deliberate use of deep charcoal foundations paired with vibrant, energetic accent tones—primarily a striking electric blue ({colors.accent} — #475BFF) that commands attention without overwhelming. The system employs expansive whitespace and generous padding to create breathing room, reinforcing a premium, unhurried experience. Decorative gradient orbs and layered shapes (visible in hero sections) introduce organic, flowing movement that contrasts with the precision of the typography and component system. The overall mood is confident yet approachable—aspiring to be the trusted registrar for a digital-native audience that values both aesthetics and function.

Key Characteristics

Deep dark canvas ({colors.canvas} — #18191B) with rich surface layers for depth
Electric blue brand accent ({colors.accent} — #475BFF) as the dominant interactive and call-to-action hue
Crisp, modern sans-serif typography with generous display sizes and tight negative tracking on large headings
Pill-shaped buttons and inputs for a friendly, approachable feel
Subtle, single-tier elevation through card shadows; depth primarily achieved through color blocking
Expansive spacing scale supporting both dense and airy layouts
Accent decorative colors (teal, lime green, blue gradients) used strategically in hero imagery and abstract shapes
Focus states and interactive feedback emphasize keyboard accessibility and clarity

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #FFFFFF): Primary text, headings, and active states; also the fill for high-emphasis CTAs and the brand mark.
Brand Accent ({colors.accent} — #475BFF): Electric blue used for primary interactive elements (buttons, icon buttons, links), CTAs, and brand-defining UI moments.

Accent Colors (Decorative)

Accent Gradient 1 ({colors.accent-1} — #5D8BFF): Decorative; used in hero gradient meshes and background orbs.
Accent Gradient 2 ({colors.accent-2} — #00493F): Decorative; deep teal used in layered background elements and hero shapes.
Accent Gradient 3 ({colors.accent-3} — #394EFF): Decorative; saturated blue tone in hero gradients.
Accent Gradient 4 ({colors.accent-4} — #152C29): Decorative; very dark teal in background layers.
Accent Gradient 5 ({colors.accent-5} — #84B5FF): Decorative; pale blue used in lighter gradient overlays.
Accent Gradient 6 ({colors.accent-6} — #067D76): Decorative; rich teal in accent orbs and hero imagery.

Neutral Scale

Canvas ({colors.canvas} — #18191B): Default page background; the foundational dark surface.
Surface ({colors.surface} — #252628): Card and panel backgrounds; primary elevated surface layer.
Surface Alt ({colors.surface-alt} — #363739): Alternating section bands and secondary elevated surfaces.
Body ({colors.body} — #B3B3B4): Body copy and standard text content.
Muted ({colors.muted} — #909091): Captions, secondary text, and de-emphasized labels.
Faint ({colors.faint} — #595C5B): Tertiary text, placeholder text, and very subtle labels.
Neutral 1 ({colors.neutral-1} — #808080): Additional neutral tone; role context varies by component.
Neutral 2 ({colors.neutral-2} — #EDEEF0): Light neutral; used in specific badge and small component fills.

3. Typography Rules

Font Family

Primary: GB Proxima Nova, sans-serif
Fallback Stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

GB Proxima Nova is the sole declared font family across all measured text roles.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	GB Proxima Nova	88px	700	1.00	-0.21px	Largest display; ultra-tight tracking
Display XL Tight	GB Proxima Nova	88px	700	1.05	-0.61px	Alternative with even tighter line; for high-impact hero text
Display LG	GB Proxima Nova	72px	700	1.03	-0.4px	Large display headings; prominent negative tracking
Display MD	GB Proxima Nova	64px	700	1.00	0px	Medium display; no letter spacing adjustment
Display SM	GB Proxima Nova	56px	700	1.07	-0.21px	Smaller display; moderate negative tracking
Display XS	GB Proxima Nova	40px	700	1.20	0px	Extra-small display for section headings
Heading MD	GB Proxima Nova	38px	700	1.11	0px	Medium heading for subsections
Heading SM	GB Proxima Nova	36px	700	1.11	0px	Smaller heading variant
Heading XS	GB Proxima Nova	32px	400	1.25	0.21px	Extra-small heading; regular weight
Heading XS Strong	GB Proxima Nova	32px	500	1.25	0.21px	Extra-small heading; semi-bold variant
Heading XS Tight	GB Proxima Nova	32px	700	1.19	0px	Extra-small heading; bold with reduced line height
Body XL	GB Proxima Nova	26px	700	1.23	0px	Large body text; bold emphasis
Body LG	GB Proxima Nova	22px	400	1.36	0px / 0.21px	Large body; standard and spaced variants
Body MD	GB Proxima Nova	20px	700	1.30	0px	Medium body; bold for emphasis
Body SM	GB Proxima Nova	16px	400	1.50	0px	Standard body copy and list items
Body XS	GB Proxima Nova	14px	400	1.43	0px	Small body and link text
Body XS Strong	GB Proxima Nova	14px	500	1.14	0.21px	Small text; semi-bold with tracking
Label XL	GB Proxima Nova	88px	700	1.00	-0.61px	Jumbo label (form input support)
Label LG	GB Proxima Nova	28px	400	1.29	0.21px	Large form label
Label MD	GB Proxima Nova	16px	500	1.50	0px	Standard form label; semi-bold
Button MD	GB Proxima Nova	16px	700	1.50	0px	Standard button text
Button SM	GB Proxima Nova	14px	700	1.43	0px	Small button text
Caption SM	GB Proxima Nova	12px	400	1.33	0.21px	Small caption text
Caption XS	GB Proxima Nova	10px	700	1.00	0.21px	Smallest caption; uppercase transform

Principles

Display sizes carry deliberate negative letter-spacing to create visual punch and density; this is a defining characteristic and must be preserved exactly as measured.
Body text uses positive or zero letter-spacing to maintain legibility at smaller sizes.
Semi-bold (weight 500) appears only in specific label and accent contexts; the system prefers 400 (regular) and 700 (bold) for clarity.
Line heights relax as size increases, creating visual rhythm: smaller text (12–16px) sits at 1.33–1.50, mid-range text (20–26px) at 1.20–1.36, and display (56–88px) at 1.00–1.07 for density.
All font rendering uses GB Proxima Nova exclusively; no system fallbacks are visible in the production design.

4. Component Stylings

Buttons

Primary (Icon Button)

Background: {colors.accent} (#475BFF)
Text Color: {colors.primary} (#FFFFFF)
Padding: 0px (icon-only; 40px × 40px)
Font Size: {typography.button-md} (16px, weight 700)
Border Radius: {rounded.full} (9999px)
Border: None
Box Shadow: None
Line Height: 24px

Filled (Primary CTA)

Background: {colors.neutral-2} (#EDEEF0)
Text Color: {colors.surface} (#252628)
Padding: 0px 20px
Height: 48px
Font Size: {typography.button-md} (16px, weight 700)
Border Radius: {rounded.full} (9999px)
Border: None
Box Shadow: None
Line Height: 24px

Filled Small

Background: rgba(237, 238, 240, 0.08)
Text Color: {colors.neutral-2} (#EDEEF0)
Padding: 0px (icon-only; 32px × 32px)
Font Size: {typography.button-sm} (14px, weight 700)
Border Radius: {rounded.full} (9999px)
Border: None
Box Shadow: None
Line Height: 20px

Text (Secondary)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.primary} (#FFFFFF)
Padding: 0px 14px
Height: 40px
Font Size: {typography.button-md} (16px, weight 700)
Border Radius: {rounded.full} (9999px)
Border: None
Box Shadow: None
Line Height: 24px

Text Small

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.neutral-2} (#EDEEF0)
Padding: 0px
Height: 24px
Font Size: {typography.button-md} (16px, weight 700)
Border Radius: {rounded.none} (0px)
Border: None
Box Shadow: None
Line Height: 24px

Primary (Secondary CTA)

Background: rgba(255, 255, 255, 0.12)
Text Color: {colors.primary} (#FFFFFF)
Padding: 0px 14px
Height: 40px
Font Size: {typography.button-md} (16px, weight 700)
Border Radius: {rounded.full} (9999px)
Border: None
Box Shadow: None
Line Height: 24px

Disabled State

Opacity: 0.4

Cards & Containers

Card Default

Background: {colors.surface} (#252628)
Text Color: {colors.body} (#B3B3B4)
Padding: 0px (layout-dependent)
Border Radius: {rounded.xs} (8px)
Border: None
Box Shadow: rgba(249, 249, 249, 0.08) 0px 0px 0.5px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.5px 3px 0px, rgba(0, 0, 0, 0.14) 0px 3px 6px 0px
Font Size: {typography.body-sm} (16px, weight 400)
Line Height: 24px

Card Small

Background: #152C29 (decorative accent-4 repurposed; rich teal)
Text Color: {colors.body} (#B3B3B4)
Padding: 0px
Border Radius: {rounded.sm} (16px)
Border: None
Box Shadow: rgba(249, 249, 249, 0.08) 0px 0px 0.5px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.5px 3px 0px, rgba(0, 0, 0, 0.14) 0px 3px 6px 0px
Font Size: {typography.body-sm} (16px, weight 400)
Line Height: 24px

Inputs & Forms

Input Default

Background: {colors.surface} (#252628) or rgba(237, 238, 240, 0.08) on hover
Border Color: Inferred from component styling; hover state applies subtle background overlay
Text Color: {colors.body} (#B3B3B4)
Padding: 0px (layout-dependent; form layout drives specifics)
Border Radius: {rounded.xs} (8px)
Border: 0px none
Font Size: {typography.body-sm} (16px, weight 400)
Line Height: 24px
Label Font: {typography.label-md} (16px, weight 500)
Hover State Box Shadow: 0 0 0 1000px var(--sds-color-background-brand-subtle) inset (subtle overlay effect)

Navigation

Navigation Bar (Header)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.body} (#B3B3B4)
Padding: 0px 16px
Height: 40px
Border Radius: {rounded.none} (0px)
Border: None
Font Size: {typography.body-sm} (16px, weight 400)
Line Height: 24px
Navigation links appear inline at breakpoints ≥ 768px; menu toggle appears at < 768px

Badge

Badge Filled

Background: #A7F0E0 (calculated from measured accent-6 tone; used in summary/tag contexts)
Text Color: {colors.accent-2} (#00493F)
Padding: 0px 8px
Height: 18px
Font Size: {typography.caption-xs} (10px, weight 700, uppercase)
Border Radius: 16px
Border: None
Box Shadow: None
Line Height: 10px

Footer

Footer Container

Background: {colors.canvas} (#18191B)
Text Color: {colors.neutral-2} (#EDEEF0)
Padding: 40px 0px
Font Size: {typography.body-sm} (16px, weight 400)
Line Height: 24px
Border Radius: {rounded.none} (0px)
Border: None

5. Layout Principles

Spacing System

The system uses a 4px base unit with an 8-step scale reaching up to 72px for large section bands. Each step is designed for specific layout contexts:

{spacing.xxs} (4px): Micro-adjustments, icon padding, inline spacing
{spacing.xs} (8px): Tight component spacing, small gaps between elements
{spacing.sm} (12px): Form field spacing, small card padding
{spacing.md} (16px): Standard component padding, default form gaps
{spacing.lg} (20px): Card content padding, section spacing
{spacing.xl} (24px): Moderate section spacing, generous component margins
{spacing.xxl} (32px): Large content blocks, heading-to-body spacing
{spacing.xxxl} (40px): Major layout separation, featured section padding
{spacing.section} (48px): Full-width section spacing; primary rhythm on desktop
{spacing.band} (72px): Hero section and large feature band spacing; maximum breathing room

Grid & Container

Max Content Width: 1328px (measured at 1440px viewport)
Typical Column Count: 3 columns at 1024px and wider; single column layout collapses gracefully below 768px
Section Horizontal Padding: Responsive—{spacing.xxxl} (40px) on mobile (375px), increasing to {spacing.band} (72px) on desktop (1440px)
Container Pattern: Full-bleed sections alternate between canvas and surface backgrounds, with padding adjusting per breakpoint
Sidebar/Hero Layout: Two-column layout observed on desktop (content left, decorative orb right); collapses to single column on mobile

Whitespace Philosophy

Spaceship employs generous whitespace throughout, treating it as a premium design element. Large headings sit with ample bottom spacing; form fields and buttons receive breathing room; and full-width sections use band-scale padding to create rhythm and prevent cognitive overload. The dark background renders whitespace as silence, not absence—making every grouped element feel intentional and considered.

Border Radius Scale

{rounded.none} (0px): Links, text buttons, footer, any element requiring sharp edges or maximum width efficiency
{rounded.xs} (8px): Standard input fields and default cards; the workhorse radius
{rounded.sm} (16px): Large cards, feature sections, and prominent containers; adds softness without excess
{rounded.full} (9999px): All interactive buttons and icon buttons; defines the system's approachable, friendly gesture

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; solid `{colors.canvas}`	Page background, text, typography
Raised	`rgba(249, 249, 249, 0.08) 0px 0px 0.5px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.5px 3px 0px, rgba(0, 0, 0, 0.14) 0px 3px 6px 0px`	Cards, panels, elevated content surfaces

The system employs a single-tier elevation strategy based primarily on color blocking rather than shadow depth. The only shadow present is applied to cards, providing subtle lift through an inset highlight layer (simulating rim light) and two layers of black shadow (near and far). This creates visual hierarchy without introducing an expensive or complex shadow ladder. The inset highlight (rgba(249, 249, 249, 0.08) at 1px inset) suggests an internal light source, reinforcing the premium, tech-forward feel.

Opacity Levels

0.20 (20%): Very subtle overlays, minimal presence; used for background tints
0.40 (40%): Disabled state standard; readable but de-emphasized
0.70 (70%): Hover state for semi-transparent elements; maintains interaction feedback without harsh change

Z-index / Layering

base: 1 – Standard layout flow; most page content
base: 2 – Slightly elevated content (floating labels, tooltips)
base: 3 – Secondary elevated surfaces (additional cards, side panels)
base: 5 – Higher prominence (sticky headers, pseudo-fixed elements)
dropdown: 10 – Dropdown menus, select lists, popovers
modal: 1002 – Primary modal dialogs, overlays
modal: 4003 – High-priority modals, notifications, or alerts above other modals

7. Do's and Don'ts

Do

Use pill-shaped buttons ({rounded.full}) for all interactive CTAs and icon buttons; this is the system's signature gesture.
Respect negative letter-spacing on display sizes (32px and above); this creates visual impact and is a core design trait.
Layer surfaces using color blocks rather than shadows; dark surfaces on darker backgrounds with subtle shadow accents.
Maintain ample whitespace around headings and call-to-action blocks; use {spacing.section} (48px) or {spacing.band} (72px) for major divisions.
Use the accent blue ({colors.accent} — #475BFF) for all primary interactive moments—buttons, hover states, links in prominence.
Apply the single-tier shadow only to cards and raised surfaces; do not introduce additional shadow variants.
Employ the full typography hierarchy; each size role serves a specific purpose and should not be substituted arbitrarily.
Test focus states via keyboard navigation; the system includes explicit focus-visible styling for accessibility.

Don't

Do not round button corners to anything other than {rounded.full}; sharp edges and partial rounding break the system cohesion.
Do not invent new colors outside the defined palette; the system provides accents for decorative use.
Do not apply shadows to elements other than cards; depth is primarily achieved through color, not blur or displacement.
Do not collapse typography sizes or weights in the hierarchy; each role carries semantic meaning.
Do not remove letter-spacing adjustments on display sizes; this is not a stylistic choice but a design requirement.
Do not use the text-only button variant ({rounded.none}) for primary CTAs; reserve it for secondary or tertiary actions.
Do not apply opacity to disabled states below 0.4; legibility must be maintained.
Do not override focus states; the system enforces keyboard accessibility through explicit :focus-visible styling.

8. Responsive Behavior

Breakpoints

Breakpoint	Width	Content Width	Columns	Nav Visibility	Heading Size	Body Size	Section Padding-X
Mobile	375px	354px	1	Hidden (menu toggle shown)	`{typography.display-xs}` (40px)	`{typography.body-sm}` (16px)	`{spacing.xxxl}` (40px)
Tablet	768px	707px	1–2	1 link visible	`{typography.display-sm}` (56px)	`{typography.body-sm}` (16px)	`{spacing.xxxl}` (40px)
Desktop MD	1024px	954px	2–3	48px width for links	`{typography.display-sm}` (56px)	`{typography.body-sm}` (16px)	`{spacing.xxxl}` (40px) to `{spacing.band}` (72px)
Desktop LG	1280px	1184px	3	48px width for links	`{typography.display-lg}` (72px)	`{typography.body-sm}` (16px)	`{spacing.band}` (72px)
Desktop XL	1440px	1328px	3	48px width for links	`{typography.display-lg}` (72px)	`{typography.body-sm}` (16px)	`{spacing.band}` (72px)

Key Transitions:

At 375px–768px, the layout is single-column; the navigation menu collapses into a toggle.
At 768px, a second column becomes available for two-column layouts (e.g., content + sidebar).
At 1024px and above, full three-column layouts are available; section padding increases to {spacing.band} (72px).
Heading sizes scale from {typography.display-xs} (40px) at mobile to {typography.display-lg} (72px) at large desktop.
Body text remains {typography.body-sm} (16px) across all breakpoints; no resizing needed for legibility.

Touch Targets

Minimum Interactive Element Height: 40px (buttons, form inputs, links)
Minimum Interactive Element Width: 40px (icon buttons)
Minimum Padding Around Touch Targets: {spacing.sm} (12px) horizontal spacing between adjacent buttons or links
Form Input Height: 48px (filled variant); 40px (secondary variant)
Button Height: 40px (standard); 48px (primary CTA); 32px (small/icon)

Collapsing Strategy

Mobile (< 768px): Stack all content vertically; hide navigation links and show menu toggle; use full viewport width minus {spacing.xxxl} (40px) padding; reduce heading sizes to {typography.display-xs} (40px); hero sections show decorative elements below fold or off-canvas.
Tablet (768px–1024px): Enable two-column layouts for content + sidebar; show first navigation link inline; increase section padding to match mobile still (40px); heading sizes transition to {typography.display-sm} (56px).
Desktop (≥ 1024px): Enable full three-column grids; show all navigation links inline (48px reserved width per link); expand section padding to {spacing.band} (72px); scale headings to {typography.display-lg} (72px).
Adaptive Images: Decorative orbs and gradients scale with viewport; hero imagery reflows to accommodate smaller viewports without distortion.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA & Brand Accent: Accent (#475BFF) for interactive moments; Primary (#FFFFFF) for text and high-contrast fills
Page Background: Canvas (#18191B)
Card & Panel Surfaces: Surface (#252628) or Surface Alt (#363739)
Body Text: Body (#B3B3B4)
Secondary/Muted Text: Muted (#909091) or Faint (#595C5B)
Decorative Accents: Use Accent 1–6 (#5D8BFF, #00493F, #394EFF, #152C29, #84B5FF, #067D76) for hero gradients, orbs, and background layers
Badge Fill: A7F0E0 (calculated teal) on #00493F text

Iteration Guide

All buttons are pill-shaped (border-radius: 9999px); no exceptions. Icon buttons remain square in layout but use full radius.
Display headings (32px+) require negative letter-spacing: subtract 0.21px to 0.61px per the hierarchy table. Body text uses 0px or +0.21px tracking.
Card elevation is shadows only: use the prescribed inset + two-layer shadow stack; do not add borders or additional depth treatments.
Spacing rhythm uses {spacing.section} (48px) and {spacing.band} (72px) to separate major sections; nest smaller {spacing.md} (16px) and {spacing.lg} (20px) within components.
Form inputs use {rounded.xs} (8px) and transition background on hover to rgba(237, 238, 240, 0.08) with inset box-shadow for tactile feedback.
Navigation collapses at 768px: show menu toggle, hide inline links. Restore links at ≥ 768px with 48px reserved space per link.
Disabled state is universal opacity: 0.4; apply to buttons, badges, and form elements uniformly.
Focus states must include: box-shadow: 0 0 0 1px var(--sds-color-border-inverted-inner-focused), 0 0 0 3px var(--sds-color-border-focused) for keyboard users.
Decorative colors are gradient materials: blend Accent 1–6 in hero backgrounds, orbs, and mesh overlays; never use them as primary surface colors.
Typography is GB Proxima Nova exclusively; use system font fallbacks only if webfont load fails. No serif or monospace substitutions.

10. Known Gaps

Semantic Status Colors (Error / Success / Warning): The site does not declare error, success, or warning color tokens. No form validation or alert palette exists in the extracted data.
Interaction States on All Components: Focus, hover, and active states were partially extracted for buttons and forms but are not comprehensively documented for all interactive roles (e.g., card hover, navigation link states). Designers should infer micro-interactions from the button patterns provided.
Gradients and Mesh Overlays: Decorative gradient orbs and hero background meshes are visually present but CSS gradient definitions were not fully extracted. Implementation will require pixel-perfect recreation or asset-based approach.
Dark Mode: No explicit dark mode toggle or alternate palette was measured. The extraction represents a single applied theme; no light mode or high-contrast variant exists in the data.
Animation / Transition Timings: No CSS animation or transition duration values were extracted. Hover and state changes are instantaneous in the data provided.
Print Styles: No print media queries or print-specific styling was captured.
Surfaces Behind Authentication: The design system covers publicly accessible pages only. Logged-in user interfaces, account dashboards, or admin panels were not visited.
Unassigned Accent Colors (6 of 8 decorative accents): Six accent colors ({colors.accent-1} through {colors.accent-6}) have no measured semantic role and are described as decorative only. Use them for hero gradients and background orbs; do not repurpose them as status indicators or semantic fills without explicit brand guidance.
Border Widths: No explicit border-width scale was extracted beyond the implicit 0px (no border) and 1px (inset shadow) treatments. Additional border styles should defer to Figma specs or design documentation.
Opacity Threshold for Hover States: General hover reduces opacity to 0.70 for semi-transparent elements and 0.80 for opaque elements; the exact opacity curve for other component families is not fully specified.

Document Version: 1.0
Last Updated: Based on 3-page site analysis of spaceship.com (Domains, SellerHub, Hosting sections)
Coverage: Typography, Color, Spacing, Elevation, Components, Responsive Breakpoints, Accessibility (Focus States)
Reliability: High confidence on measured tokens; low confidence on unmeasured decorative intent (gradients, advanced animations)

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from www.spaceship.com

Primary

#FFFFFF

Primary CTA, brand accent, active state; Headings / primary text

#475BFF

Brand hue used alongside the achromatic primary

#5D8BFF

Accent / decorative

#00493F

Accent / decorative

#394EFF

Accent / decorative

#152C29

Accent / decorative

#84B5FF

Accent / decorative

#067D76

Accent / decorative

Neutral

#18191B

Default page background

#252628

Card / panel background

#363739

Alternating section band

#B3B3B4

Body copy

#909091

Captions, secondary text

#595C5B

Tertiary / placeholder text

#808080

Neutral

#EDEEF0

Neutral

Typography · GB Proxima Nova

link14px · 400 · 20px

button16px · 700 · 24px

list-item16px · 400 · 24px

heading32px · 500 · 40px

body20px · 700 · 26px

caption12px · 400 · 16px

button14px · 700 · 20px

body22px · 400 · 30px

heading32px · 400 · 40px

input16px · 500 · 24px

h172px · 700 · 74px

body26px · 700 · 32px

label28px · 400 · 36px

input88px · 700 · 88px

display56px · 700 · 60px

display40px · 700 · 48px

heading38px · 700 · 42px

caption10px · 700 · 10px

body14px · 500 · 16px

body14px · 400 · 16px

h188px · 700 · 88px

h288px · 700 · 92px

body18px · 700 · 28px

display64px · 700 · 64px

body26px · 400 · 32px

heading36px · 700 · 40px

body18px · 800 · 28px

h1120px · 700 · 128px

h272px · 700 · 74px

h348px · 700 · 50px

h432px · 700 · 38px

body22px · 400 · 30px

button20px · 700 · 26px

heading28px · 400 · 36px

heading26px · 700 · 32px

Spacing

4px

24px

16px

8px

20px

32px

72px

12px

Elevation

rgba(249, 249, 249, 0.08) 0px 0px 0.5px 1px inset, rgba(0, 0, 0, 0.18) 0px 1.5px 3px 0px, rgba(0, 0, 0, 0.14) 0px 3px 6px 0px

Components · 6

Remixes of www.spaceship.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it