Holographic

Generated Oct 10, 2026

DESIGN.md for bolt.new

bolt.new/~/sb1-az48xb2d7 colors6 componentsSchibsted Grotesk

Remix

8 screenshots captured· bolt.new

1 / 8 · Solutions — Bolt · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Bolt
description: |
  Bolt's design system embraces a modern, tech-forward aesthetic built on bold
  primary blue and clean neutrals. The visual language prioritizes clarity and
  trustworthiness through a minimalist approach: sharp corners, generous
  whitespace, and decisive color blocking. Hero sections feature sophisticated
  gradient transitions from deep navy through bright sky blue to white, creating
  a sense of technological progress and ascent. The typography is confident and
  refined, using Schibsted Grotesk for body and display text with deliberate
  negative tracking on large headlines. Interactive elements are purposeful and
  responsive, with subtle micro-interactions (opacity shifts, small translate
  effects) that feel polished without being distracting. The system radiates
  confidence and accessibility—ideal for a platform positioning itself as a
  secure, intelligent building tool.
source:
  url: "https://bolt.new/~/sb1-az48xb2d"
  pagesAnalyzed: 4
  extractedAt: 2026-10-10
  tokensMeasured: true
colors:
  primary: "#1488FC"
  canvas: "#FFFFFF"
  on-primary: "#FFFFFF"
  ink: "#0A0A0A"
  body: "#5B5B66"
  neutral-1: "#E5E7EB"
  neutral-2: "#000000"
  neutral-3: "#525258"
typography:
  display-xl:
    fontFamily: Literata
    fontSize: 66px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  display-xl-strong:
    fontFamily: "Schibsted Grotesk"
    fontSize: 66px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0px
  display-lg:
    fontFamily: "Schibsted Grotesk"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: 0px
  display-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -1px
  display-sm:
    fontFamily: "Schibsted Grotesk"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  heading-lg:
    fontFamily: "Schibsted Grotesk"
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  heading-md:
    fontFamily: Literata
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Schibsted Grotesk"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.2px
  heading-xs:
    fontFamily: "Schibsted Grotesk"
    fontSize: 14px
    fontWeight: 500
    letterSpacing: -0.2px
  body-xl:
    fontFamily: "Schibsted Grotesk"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg:
    fontFamily: "Schibsted Grotesk"
    fontSize: 15.84px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-md-strong:
    fontFamily: "Schibsted Grotesk"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body-md-tight:
    fontFamily: "Schibsted Grotesk"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  body-sm:
    fontFamily: "Schibsted Grotesk"
    fontSize: 13px
    fontWeight: 700
    letterSpacing: 2px
    textTransform: uppercase
  nav:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    letterSpacing: 0px
  button-lg:
    fontFamily: "Schibsted Grotesk"
    fontSize: 19px
    fontWeight: 500
    letterSpacing: 0px
  button-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: 18px
    fontWeight: 500
    letterSpacing: 0px
  button-sm:
    fontFamily: "Schibsted Grotesk"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  button-sm-inter:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  caption-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: 12px
    fontWeight: 700
    letterSpacing: 2px
    textTransform: uppercase
  caption-sm:
    fontFamily: "Schibsted Grotesk"
    fontSize: 11px
    fontWeight: 700
    letterSpacing: 1.5px
    textTransform: uppercase
  caption-xs:
    fontFamily: "Schibsted Grotesk"
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 1.4px
    textTransform: uppercase
  caption-xs-strong:
    fontFamily: "Schibsted Grotesk"
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 1.6px
    textTransform: uppercase
  caption-xs-2:
    fontFamily: "Schibsted Grotesk"
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 1.5px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 2px
  sm: 4px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 40px
  section: 56px
  band: 72px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#EEEEEE"
    text: "#0A0A0A"
    textMuted: "#5B5B66"
    border: "#E2E2E2"
    accent: "#1488FC"
    accentFg: "#000000"
    focusRing: "#1488FC"
    elevation: shadow
  dark:
    bg: "#0A0F15"
    surface: "#191D23"
    surfaceRaised: "#25292F"
    text: "#F6FAFF"
    textMuted: "#9CA1A6"
    border: "#31353A"
    accent: "#1488FC"
    accentFg: "#0B0B0C"
    focusRing: "#1488FC"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: linear
    value: "linear-gradient(rgb(2, 26, 87) 0%, rgb(4, 36, 108) 14%, rgb(7, 47, 134) 26%, rgb(10, 63, 158) 38%, rgb(18, 89, 195) 50%, rgb(59, 130, 207) 60%, rgb(107, 166, 218) 68%, rgb(163, 200, 230) 76%, rgb(207, 224, 238) 83%, rgb(232, 239, 246) 89%, rgb(246, 248, 251) 95%, rgb(255, 255, 255) 100%), none"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(10, 12, 20, 0.043), rgba(10, 12, 20, 0.01) 34%, rgba(10, 12, 20, 0.01) 58%, rgba(10, 12, 20, 0.04)), none"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(5, 5, 8, 0) 45%, rgba(5, 5, 8, 0.55) 80%, rgba(5, 5, 8, 0.82))"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(10, 12, 20, 0.03), rgba(10, 12, 20, 0.004))"
  - context: section
    kind: linear
    value: "linear-gradient(rgba(10, 12, 20, 0.043), rgba(10, 12, 20, 0.01) 34%, rgba(10, 12, 20, 0) 62%), none"
  - context: section
    kind: linear
    value: "linear-gradient(rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 88%, rgb(255, 255, 255) 100%)"
components:
  button-primary:
    textColor: "{colors.on-primary}"
    height: 38px
    padding: "0px 18px 0px 18px"
    fontSize: 14px
    fontFamily: "Schibsted Grotesk"
    fontWeight: 600
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-primary-lg:
    textColor: "{colors.on-primary}"
    height: 52px
    padding: "0px 28px 0px 28px"
    fontSize: 15px
    fontFamily: "Schibsted Grotesk"
    fontWeight: 600
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  button-text:
    typography: "{typography.nav}"
    textColor: "rgba(0, 0, 0, 0.7)"
    height: 68px
    padding: "8px 14px 8px 14px"
    rounded: "{rounded.sm}"
  button-text-sm:
    typography: "{typography.nav}"
    textColor: "rgba(0, 0, 0, 0.7)"
    height: 17px
  card:
    textColor: "{colors.ink}"
    border: "1px solid rgba(10, 12, 20, 0.08)"
    fontSize: 16px
    fontFamily: "Schibsted Grotesk"
    fontWeight: 400
    rounded: "{rounded.xs}"
    backgroundColor: "rgb(250, 251, 253)"
  card-sm:
    textColor: "{colors.ink}"
    padding: "24px 24px 28px 24px"
    fontSize: 16px
    fontFamily: "Schibsted Grotesk"
    fontWeight: 400
    rounded: "{rounded.xs}"
    backgroundColor: "rgb(250, 251, 253)"
  navigation:
    textColor: "{colors.ink}"
    height: 69px
    fontSize: 16px
    fontFamily: "Schibsted Grotesk"
    fontWeight: 400
    backgroundColor: "{colors.canvas}"
  footer:
    textColor: "{colors.ink}"
    border: "1px solid rgba(10, 12, 20, 0.08)"
    padding: "92px 72px 40px 72px"
    fontSize: 16px
    fontFamily: "Schibsted Grotesk"
    fontWeight: 400
    backgroundColor: "{colors.canvas}"
  link:
    textColor: "rgba(10, 12, 20, 0.72)"
    fontSize: 16px
    fontFamily: "Schibsted Grotesk"
    fontWeight: 400
    rounded: "50%"
    backgroundColor: "rgba(10, 12, 20, 0.06)"
  link-lg:
    textColor: "rgba(10, 12, 20, 0.8)"
    border: "1px solid rgba(10, 12, 20, 0.22)"
    padding: "0px 28px 0px 28px"
    fontSize: 15px
    fontFamily: "Schibsted Grotesk"
    fontWeight: 500
    rounded: "{rounded.xs}"
  badge-filled:
    typography: "{typography.caption-md}"
    textColor: "rgb(11, 110, 87)"
    height: 32px
    padding: "8px 16px 8px 16px"
    rounded: 999px
    backgroundColor: "rgba(13, 155, 122, 0.1)"
  badge-primary:
    typography: "{typography.caption-md}"
    textColor: "rgb(10, 90, 168)"
    height: 32px
    padding: "8px 16px 8px 16px"
    rounded: 999px
    backgroundColor: "rgba(20, 136, 252, 0.1)"
  badge-filled-lg:
    textColor: "{colors.ink}"
    border: "1px solid {colors.canvas}"
    height: 42px
    padding: "11px 24px 11px 24px"
    fontSize: 16px
    boxShadow: "rgba(15, 26, 42, 0.05) 0px 4px 16px 0px"
    fontFamily: "Schibsted Grotesk"
    fontWeight: 400
    rounded: 999px
    backgroundColor: "{colors.canvas}"
states:
  nav-hover:
    target: nav
    state: hover
    opacity: 0.85
  card-hover:
    target: card
    state: hover
    borderColor: "rgba(255, 255, 255, 0.22)"
    backgroundColor: "rgba(255, 255, 255, 0.043)"
  link-hover:
    target: link
    state: hover
    textColor: "{colors.on-primary}"
  button-hover:
    target: button
    state: hover
    transform: "translateY(0px)"
  nav-focus-visible:
    target: nav
    state: focus-visible
    outline: "rgba(255, 255, 255, 0.7) solid 2px"
    outlineColor: "rgba(255, 255, 255, 0.7)"
    outlineWidth: 2px
  other-hover:
    target: other
    state: hover
    borderColor: "rgba(255, 255, 255, 0.2)"
  other-focus:
    target: other
    state: focus
    borderColor: "rgba(255, 255, 255, 0)"
  other-disabled:
    target: other
    state: disabled
    opacity: 0.4
breakpoints:
  - width: 375
    containerWidth: 360
    gridColumns: 3
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 35
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 753
    gridColumns: 3
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 46
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1009
    gridColumns: 3
    navLinksVisible: 1
    menuToggleVisible: true
    headingPx: 51
    bodyPx: 16
    sectionPaddingX: 40
  - width: 1280
    containerWidth: 1265
    gridColumns: 5
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 64
    bodyPx: 16
    sectionPaddingX: 40
  - width: 1440
    containerWidth: 1425
    gridColumns: 5
    navLinksVisible: 3
    menuToggleVisible: true
    headingPx: 66
    bodyPx: 16
    sectionPaddingX: 40
coverage:
  statesFound: 63
  gradientsFound: 13
  rolesUnassigned: 3
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Bolt

1. Visual Theme & Atmosphere

Bolt's design system embraces a modern, tech-forward aesthetic built on bold primary blue and clean neutrals. The visual language prioritizes clarity and trustworthiness through a minimalist approach: sharp corners, generous whitespace, and decisive color blocking. Hero sections feature sophisticated gradient transitions from deep navy through bright sky blue to white, creating a sense of technological progress and ascent. The typography is confident and refined, using Schibsted Grotesk for body and display text with deliberate negative tracking on large headlines. Interactive elements are purposeful and responsive, with subtle micro-interactions (opacity shifts, small translate effects) that feel polished without being distracting. The system radiates confidence and accessibility—ideal for a platform positioning itself as a secure, intelligent building tool.

Key Characteristics

Bold brand blue ({colors.primary} — #1488FC) as the primary interactive and accent color
Minimal color palette: one primary, pure whites, cool grays, and near-black text
Sharp corners (0–4px radius) across cards and buttons; pill-shaped badges
Large, bold display typography with tight tracking (-1px to -0.5px)
Gradient-rich hero sections transitioning from navy to white
No dropshadows; depth achieved through surface color changes and subtle opacity
Clean, structured grid with consistent padding and breathing room
Responsive, touch-friendly interactive targets
Accessible focus states with visible outlines

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #1488FC): Primary call-to-action buttons, active navigation states, brand accents, and hero section highlights. This blue is the system's emotional and functional anchor.

Canvas & Text

Canvas / On Primary ({colors.canvas} — #FFFFFF): Default page background, card surfaces, and primary text color when placed on brand surfaces (e.g., button labels, white headings on blue).
Ink ({colors.ink} — #0A0A0A): Primary heading and body text color; used for dark text on light backgrounds.
Body ({colors.body} — #5B5B66): Secondary body copy and reduced-emphasis text; lighter than ink for hierarchical distinction.

Neutral Scale

Neutral 1 ({colors.neutral-1} — #E5E7EB): Light border and divider lines; subtle background fills for inactive or disabled states.
Neutral 2 ({colors.neutral-2} — #000000): Pure black; used sparingly for maximum contrast or decorative accents.
Neutral 3 ({colors.neutral-3} — #525258): Mid-tone gray for secondary headings and supporting text; bridges between body and ink.

Semantic / Status

No error, success, or warning colors were declared or measured on the site. The system does not expose a semantic color ramp. This is listed under Known Gaps.

3. Typography Rules

Font Family

Primary: Schibsted Grotesk (https://fonts.googleapis.com/), fallback to system sans-serif (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)
Secondary (Navigation): Inter (https://fonts.googleapis.com/), fallback to system sans-serif
Display (Serif Accent): Literata (https://fonts.googleapis.com/), fallback to Georgia or system serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL (Hero)	Literata	66px	400	1.15	0px	Large serif headline, used sparingly for maximum impact
Display XL Strong	Schibsted Grotesk	66px	500	1.15	0px	Bold sans-serif alternative to serif display
Display LG	Schibsted Grotesk	60px	500	1.12	0px	Major section headings; tight leading for visual punch
Display MD	Schibsted Grotesk	52px	500	1.15	-1px	Section subheadings; notable negative tracking
Display SM	Schibsted Grotesk	40px	500	1.15	-0.5px	Medium-emphasis headings with subtle tracking pull
Heading LG	Schibsted Grotesk	34px	600	1.2	-0.5px	Large card or feature headings
Heading MD	Literata	30px	300	1.4	0px	Serif heading for editorial sections
Heading SM	Schibsted Grotesk	18px	600	1.35	-0.2px	Subsection headings; medium weight for clarity
Heading XS	Schibsted Grotesk	14px	500	—	-0.2px	Small section labels or card titles
Body LG	Schibsted Grotesk	15.84px	400	1.65	0px	Larger body copy; generous line height for readability
Body MD	Schibsted Grotesk	15px	400	1.6	0px	Standard body text; default reading size
Body MD Tight	Schibsted Grotesk	15px	600	1.2	0px	Semi-bold body for emphasis without becoming a heading
Body MD Strong	Schibsted Grotesk	15px	500	1.2	0px	Medium-weight body for semantic emphasis
Body XL	Schibsted Grotesk	20px	400	1.5	0px	Large body copy; often used in hero descriptions
Body SM	Schibsted Grotesk	13px	700	—	1–2px	Uppercase small copy (varied letter-spacing); captions and labels
Button LG	Schibsted Grotesk	19px	500	—	0px	Large CTA button text
Button MD	Schibsted Grotesk	18px	500	—	0px	Standard button text
Button SM	Schibsted Grotesk / Inter	14px	600	1.2	0px	Small button and icon-button labels
Caption MD	Schibsted Grotesk	12px	700	—	2px	Uppercase caption or badge text
Caption SM	Schibsted Grotesk	11px	700	—	1.5px	Smallest uppercase caption
Caption XS	Schibsted Grotesk	10px	600	1.5	1.4px	Tiny uppercase accent text
Navigation	Inter	14px	500	—	0px	Header and footer navigation links

Principles

Tracking on Display: Negative letter-spacing (-1px to -0.5px) on display sizes creates visual tightness and premium feel; not applied to body text.
Weight Hierarchy: Display uses 400–500 weight (lighter, more elegant); headings jump to 600 for authority; body stays at 400–500 for approachability.
Line Height: Generous line heights (1.35–1.65) on body text ensure readability; display and headings use tight leading (1.12–1.2) for impact.
Uppercase Accents: Small caps and labels use uppercase with increased letter-spacing (1.4–2px) to signal secondary information.
Serif Contrast: Literata is reserved for large display roles, creating a distinctive serif–sans serif texture that reinforces hierarchy.

4. Component Stylings

Buttons

Primary Button (Standard)

Background: {colors.primary} — #1488FC
Text Color: {colors.canvas} — #FFFFFF
Font: Schibsted Grotesk, {typography.button-sm} — 14px weight 600
Padding: 0px 18px
Height: 38px
Border Radius: {rounded.sm} — 4px
Border: None
Box Shadow: None

Primary Button (Large)

Background: {colors.primary} — #1488FC
Text Color: {colors.canvas} — #FFFFFF
Font: Schibsted Grotesk, {typography.button-md} — 18px weight 500
Padding: 0px 28px
Height: 52px
Border Radius: {rounded.sm} — 4px
Border: None
Box Shadow: None

Text Button

Background: transparent
Text Color: rgba(0, 0, 0, 0.7)
Font: Inter, {typography.button-sm-inter} — 14px weight 500
Padding: 8px 14px
Height: 68px
Border Radius: {rounded.sm} — 4px
Border: None
Box Shadow: None

Text Button (Small)

Background: transparent
Text Color: rgba(0, 0, 0, 0.7)
Font: Inter, {typography.nav} — 14px weight 500
Padding: 0px
Height: 17px
Border Radius: {rounded.none} — 0px
Border: None
Box Shadow: None

Hover State (Primary Button)

Transform: translateY(0px) on hover; translateY(-50%) indicates lift
Box Shadow: rgba(255, 255, 255, 0.12) 0px 0px 24px (glow effect on dark backgrounds)
Transform: translate(-50%, -50%) scale(1.12) (scale lift with centered transform origin)
Background: rgba(255, 255, 255, 0.15) (brightens on dark backgrounds)

Cards & Containers

Default Card

Background: {colors.canvas} — #FFFFFF
Text Color: {colors.ink} — #0A0A0A
Border: 1px solid rgba(10, 12, 20, 0.08)
Border Radius: {rounded.xs} — 2px
Padding: 0px (outer container)
Font: Schibsted Grotesk, {typography.body-md} — 15px weight 400
Box Shadow: None
Typical dimensions: 300px wide, 375px tall (content-dependent)

Default Card (Small)

Background: {colors.canvas} — #FFFFFF
Text Color: {colors.ink} — #0A0A0A
Border: None
Border Radius: {rounded.xs} — 2px
Padding: 24px 24px 28px 24px
Font: Schibsted Grotesk, {typography.body-md} — 15px weight 400
Box Shadow: None
Typical dimensions: 386px wide, 189px tall

Card Hover State

Border Color: rgba(255, 255, 255, 0.22) (on dark backgrounds) OR rgb(214, 213, 222) (on light backgrounds)
Background: rgba(255, 255, 255, 0.043) (subtle lift on dark) OR rgb(243, 240, 245) (light surface)
Text Color: rgb(255, 255, 255) (on dark) OR rgb(12, 12, 15) (on light)
Transform: translate(4px) (slight rightward nudge)
Opacity: 1.0 on hover (from 0.32 baseline); 0.6 on some variants

Inputs & Forms

No form input components were explicitly measured in the extraction. Refer to Known Gaps.

Navigation

Navigation Bar (Default)

Background: {colors.canvas} — #FFFFFF
Text Color: {colors.ink} — #0A0A0A
Font: Inter, {typography.nav} — 14px weight 500
Height: 69px
Border: 0px (no border declared)
Border Radius: {rounded.none} — 0px
Box Shadow: None
Padding: 0px (managed by child elements)

Navigation Link (Hover)

Opacity: 0.85 (slight fade on hover)
Background: rgba(255, 255, 255, 0.05) on dark surfaces; rgba(0, 0, 0, 0.05) on light
Color: rgb(255, 255, 255) on dark surfaces; rgb(0, 0, 0) on light
Outline (Focus Visible): rgba(255, 255, 255, 0.7) solid 2px on dark; rgb(20, 136, 252) on light
Outline Width: 2px

Badges

Badge (Filled – Green)

Background: rgba(13, 155, 122, 0.1)
Text Color: rgb(11, 110, 87)
Font: Schibsted Grotesk, {typography.caption-md} — 12px weight 700
Padding: 8px 16px
Border Radius: {rounded.full} — 9999px
Height: 32px
Border: None
Box Shadow: None

Badge (Primary – Blue)

Background: rgba(20, 136, 252, 0.1)
Text Color: rgb(10, 90, 168)
Font: Schibsted Grotesk, {typography.caption-md} — 12px weight 700
Padding: 8px 16px
Border Radius: {rounded.full} — 9999px
Height: 32px
Border: None
Box Shadow: None

Badge (Filled Large – White)

Background: {colors.canvas} — #FFFFFF
Text Color: {colors.ink} — #0A0A0A
Font: Schibsted Grotesk, {typography.body-md} — 15px weight 400
Padding: 11px 24px
Border: 1px solid {colors.canvas} — #FFFFFF
Border Radius: {rounded.full} — 9999px
Height: 42px
Box Shadow: rgba(15, 26, 42, 0.05) 0px 4px 16px 0px

Footer

Footer Container

Background: {colors.canvas} — #FFFFFF
Text Color: {colors.ink} — #0A0A0A
Font: Schibsted Grotesk, {typography.body-md} — 15px weight 400
Border: 1px solid rgba(10, 12, 20, 0.08)
Border Radius: {rounded.none} — 0px
Padding: 92px 72px 40px 72px
Height: 403px (typical on 1425px+ viewport)
Box Shadow: None

5. Layout Principles

Spacing System

Bolt uses an 8px base unit scaled in consistent increments. All spacing, padding, and margins derive from this fundamental scale:

{spacing.xxs} — 4px: Micro-spacing within components (e.g., badge icon-text gap)
{spacing.xs} — 8px: Small internal padding; tight component gaps
{spacing.sm} — 12px: Modest internal spacing; secondary section gaps
{spacing.md} — 16px: Standard padding for cards and containers; primary internal margin
{spacing.lg} — 20px: Generous internal padding; moderate vertical rhythm
{spacing.xl} — 24px: Large padding for prominent sections; strong visual hierarchy breaks
{spacing.xxl} — 28px: Extra-large spacing; feature section padding
{spacing.xxxl} — 40px: Maximum internal padding; hero and landmark section margins
{spacing.section} — 56px: Full section vertical rhythm; gap between major content blocks
{spacing.band} — 72px: Full-width band padding (horizontal); major section separation

Usage Context:

Button padding: {spacing.md} (0px 16px) for standard, {spacing.lg} (0px 28px) for large
Card padding: {spacing.lg} (24px) on small cards; 0px on full-featured cards (internal content manages its own padding)
Section top/bottom: {spacing.section} (56px) between sections; {spacing.band} (72px) for prominent breaks
Horizontal container padding: {spacing.band} (72px) on large viewports; reduced on mobile (often 0px)

Grid & Container

Max Width: Content columns range from 360px (375px viewport) to 1425px (1440px viewport)
Column Strategy: Grid is fluid and responsive. Measured viewports show 3–5 column layouts depending on viewport, but most content flows as single-column or two-column on mobile, expanding to multi-column on desktop
Container Padding: Horizontal padding (padding-x) is 0px on mobile (375–1024px) and {spacing.band} (72px) on desktop (1024px+)
Full-Width Sections: Hero sections, footers, and navigation span the full viewport width; internal content is constrained within padding or a max-width container

Whitespace Philosophy

Bolt's design philosophy prioritizes breathing room. Large headings sit with ample vertical space above and below (often {spacing.xxxl} to {spacing.band}). Cards are rarely adjacent; they are separated by meaningful margins. Body text is given generous line height (1.5–1.65) and margin between paragraphs. The system favoids cramped layouts; empty space is treated as a design element, not wasted real estate.

Border Radius Scale

{rounded.none} — 0px: Buttons, cards, text buttons (small); navigation; footer. Sharp corners create a modern, structured feel
{rounded.xs} — 2px: Cards, link containers, badge borders; subtle rounding for refinement without softness
{rounded.sm} — 4px: Button containers; lightweight rounding for touch-friendly targets
{rounded.full} — 9999px: Badges and pill-shaped link containers; used to signal secondary or accent information

Border Widths

Thin — 1px: Card borders, link borders, footer border; used for subtle visual separation without visual weight

6. Depth & Elevation

The system does not use box-shadows for depth. Instead, elevation is achieved through color-blocking—changing the background surface color and opacity to create visual hierarchy and layering. Gradients are used decoratively on hero sections to create a sense of forward motion and technological progress.

Shadow Philosophy

No dropshadows are present in the core component library. The only measured shadow is on the large white badge (rgba(15, 26, 42, 0.05) 0px 4px 16px 0px), which provides subtle lift on dark backgrounds. Depth is primarily communicated through:

Surface Color Changes: White cards on light gray sections; light gray on blue hero bands
Opacity Layers: Transparent overlays, semi-transparent text, and faded navigation states
Gradient Transitions: Hero sections transition from deep navy to white, suggesting elevation and depth

Opacity Levels

The system employs a graduated opacity scale for semantic and interactive purposes:

99% (0.99): Near-full opacity; used for subtle underlays or very slightly transparent surfaces
97% (0.97): Very high opacity; primary surface fill with minimal transparency
87% (0.87): Prominent surfaces; strong but slightly translucent backgrounds
45% (0.45): Moderate transparency; overlays and hover states
32% (0.32): Heavy transparency; baseline opacity for some card and link containers before hover
10% (0.1): Very light tint; background fills for badges and subtle accents

Z-index / Layering

The system defines a stacking context for layered elements:

Base (z-index 1–5): Standard component layers; cards, buttons, body content in reading order
Dropdown (z-index 90–99): Expanded navigation menus, popovers, select dropdowns; rise above body content but below modals
Sticky (z-index 100): Fixed/sticky navigation bars, floating action buttons; stay visible during scroll

Level	Treatment	Use
Base	Normal document flow (z-index: auto, 1–5)	Cards, buttons, standard components
Dropdown	z-index: 90–99	Navigation menus, popovers, suggestions
Sticky	z-index: 100	Fixed navigation bars, floating CTAs

7. Do's and Don'ts

Do

Use the brand blue ({colors.primary} — #1488FC) for all primary calls-to-action and interactive states; it is the system's primary affordance
Pair sharp corners ({rounded.xs} to {rounded.sm}) with generous internal padding ({spacing.md} to {spacing.lg}) for a balanced modern look
Apply negative letter-spacing (-1px to -0.5px) on display-size headings (52px+) to create visual tightness and sophistication
Use {typography.body-lg} (15.84px, 1.65 line-height) for prominent body copy; it ensures readability without becoming a heading
Leverage opacity layers (32%, 45%, 87%) instead of dropshadows to create subtle depth and hover states
Place white (canvas) surfaces on light backgrounds; use semi-transparent white overlays on blue/dark hero sections
Center large CTAs within hero sections and use {spacing.band} (72px) for horizontal padding
Include visible focus outlines (2px solid, color: brand blue or white depending on background) for keyboard accessibility

Don't

Avoid rounded corners larger than {rounded.sm} (4px) on buttons and cards; the system's aesthetic is sharp and modern, not rounded
Do not use dropshadows on standard components; the system uses color-blocking and opacity for elevation
Don't apply letter-spacing to body text; tracking is reserved for display sizes and uppercase labels
Avoid mixing fonts within a single component; use Schibsted Grotesk for body, Inter for navigation, Literata only for large serif displays
Do not reduce the brand blue or text contrast below the measured color values; the system relies on clear, high-contrast text for readability
Avoid padding less than {spacing.md} (16px) inside cards or containers; the system prioritizes breathing room
Don't use the neutral grays ({colors.neutral-1}, {colors.neutral-3}) as primary text; reserve them for secondary copy and metadata
Do not create semantic color status (error red, success green, warning yellow) beyond what is measured; the system does not declare these

8. Responsive Behavior

Breakpoints

Viewport	Content Column Width	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading Size	Body Text Size	Section Padding-X
375px (Mobile)	360px	3	1	Yes	35px	16px	0px
768px (Tablet)	753px	3	1	Yes	46px	16px	0px
1024px (Small Desktop)	1009px	3	1	Yes	51px	16px	40px
1280px (Desktop)	1265px	5	3	Yes	64px	16px	40px
1440px (Large Desktop)	1425px	5	3	Yes	66px	16px	40px

Key Breakpoint Observations:

Mobile (375–768px): Single navigation link visible; menu toggle present. Content column is constrained to device width minus minimal padding (0px horizontal padding). Headings scale from 35px to 46px. No section-level padding.
Tablet (768–1024px): Still single nav link; menu toggle remains. Grid maintains 3 columns; section padding introduced at 40px (only horizontal, starting here).
Desktop (1024px+): Multiple nav links visible (3+). Content expands to 1265px–1425px. Section padding reaches {spacing.band} (72px). Largest heading stabilizes at 66px (no further growth).

Touch Targets

Minimum interactive element size: 38px height (buttons, links, nav items)
Recommended minimum: 44px height for touch-friendly targets
Padding within buttons: {spacing.md} (16px) horizontal for standard size; {spacing.lg} (28px) for large CTAs
Link pill containers: 30px diameter minimum (seen on small social links)

Collapsing Strategy

Navigation: Collapses to a menu toggle (hamburger) below 1024px; only 1 nav link visible on mobile and tablet. At 1280px+, 3+ links become visible inline.
Grid: Flows from multi-column to single-column on mobile; maintains readable line length and card width across all sizes.
Section Padding: Removed (0px) on mobile to maximize content width; restored to {spacing.xxxl} (40px) at 1024px, reaching {spacing.band} (72px) on large desktop.
Heading Sizes: Scale proportionally: 35px → 46px → 51px → 64px → 66px. Body text remains constant at 16px (as read in the data, though rendered 15–15.84px).
Hero Images & Graphics: May shift or reposition; responsive background-size: cover likely used. Explicit responsive image data was not extracted.

9. Agent Prompt Guide

Quick Color Reference

Implement color in this priority order:

Primary CTA: Primary (#1488FC) — all buttons, active states, brand accents
Page Background: Canvas (#FFFFFF) — default surfaces, card backgrounds
Heading Text: Ink (#0A0A0A) — primary headings and strong emphasis
Body Copy: Body (#5B5B66) — secondary text, reduced emphasis
Neutral Fills: Neutral 1–3 (#E5E7EB, #000000, #525258) — borders, decorative accents, metadata (sparingly)

Iteration Guide

Buttons: Always use Primary blue (#1488FC) background with white text. Padding is 18px–28px horizontal, height 38px–52px. Border radius is 4px (sharp, not rounded). No shadows; scale or fade on hover.
Cards: 2px border-radius, 1px solid rgba(10, 12, 20, 0.08) border on white background. Padding varies: 0px (container) or 24px (small card). Hover state: 4px translate-right, slight background/border shift.
Typography: Display sizes (40px+) get -0.5px to -1px negative letter-spacing. Body uses Schibsted Grotesk, 15–15.84px, 1.6–1.65 line-height. Nav is Inter 14px. Headings are Schibsted Grotesk 600–500 weight.
Spacing: Base unit is 8px (4, 8, 12, 16, 20, 24, 28, 40, 56, 72px). Cards use 16–24px internal padding. Sections use 56px vertical rhythm between blocks; 72px horizontal padding on desktop.
Elevation: No dropshadows. Use opacity (32%–87%) and color shifts for depth. Gradients on hero sections only (navy-to-white transition). Focus states are 2px solid outlines (white on dark, brand blue on light).
Responsive: Content shrinks and reflows, not just rescales. Nav collapses to toggle at 1024px. Section padding (40px–72px) starts at 1024px; mobile has 0px. Headings scale: 35px (375px) → 66px (1440px).

10. Known Gaps

Interaction States Not Extracted: Hover, focus, active, and disabled states for form inputs, checkboxes, radio buttons, and complex components were not explicitly measured or may be incomplete. Only the states visible in the provided stylesheets were documented.
Semantic Color Ramp: The site does not declare or measure error, success, warning, or info color roles. No semantic status palette was found.
Shadows: Elevation is achieved through color-blocking, not box-shadows. The system does not apply layered shadows (only one accent shadow on a large badge was measured).
3 Unassigned Neutral Colors: Neutral 1 (#E5E7EB), Neutral 2 (#000000), and Neutral 3 (#525258) were measured but have no declared role beyond decorative use (borders, accents, metadata). They may serve purposes not visible in the extraction.
Form Components: Input fields, checkboxes, radio buttons, toggles, and complex form states were not measured or are not used consistently across the measured pages.
Animation Keyframes: Transition durations, easing curves, and animation sequences were not extracted. Only static and hover transforms are documented.
Dark Mode: The extraction captured only one theme (light). If a dark mode exists, it was not measured and is not documented here.
Behind-Authentication Surfaces: User dashboard, account settings, and authenticated features were not visited during extraction.
Partial CSS Coverage: Some stylesheets may be cross-origin or minified, resulting in incomplete property data for certain components or states.
Accessibility Features: ARIA roles, label strategies, and screen-reader text patterns were not systematically extracted.

Tokens generated from: https://bolt.new/~/sb1-az48xb2d — 4 pages analyzed; extracted December 2024

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

Design tokens

Extracted from bolt.new/~/sb1-az48xb2d

Primary

#1488FC

Primary CTA, brand accent, active state

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#0A0A0A

Headings / primary text

#5B5B66

Body copy

#E5E7EB

Neutral

#000000

Neutral

#525258

Neutral

Typography · Schibsted GroteskGoogle Fonts

body15px · 400 · 24px

h252px · 500 · 59.8px

link16px · 400

body15.84px · 400 · 26.136px

caption11px · 700

body13px · 700

body15px · 600 · 18px

h166px · 500 · 75.9px

body18px · 600

body20px · 400 · 30px

body15px · 500 · 18px

button14px · 600 · 16.8px

button18px · 500

body14px · 400 · 21.7px

heading14px · 500

caption12px · 700

caption10px · 700

body13px · 700

body18px · 400 · 27.9px

h340px · 500 · 46px

button19px · 500

body16px · 400 · 26.4px

caption10px · 700

body17px · 700

h160px · 500 · 67.2px

heading34px · 600 · 40.8px

body13px · 500 · 19.5px

body15.84px · 600 · 26.136px

body14px · 600 · 21.7px

body13px · 700 · 19.5px

body16.56px · 400 · 26.496px

body16.56px · 500 · 26.496px

h318px · 600 · 24.3px

body14px · 500

caption10px · 600 · 15px

body13px · 400

Typography · InterGoogle Fonts

nav-link14px · 500

button14px · 600 · 16.8px

Typography · LiterataGoogle Fonts

display66px · 400 · 75.9px

heading30px · 300 · 42px

Spacing

16px

12px

24px

40px

28px

20px

112px

4px

Components · 6

Remixes of bolt.new

Latest remixes

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

Remix it