# DeployOnce design system

> DeployOnce design system measured from app.deployonce.app: Space Grotesk font, #0A313D primary, 14 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/app.deployonce.app/

DeployOnce’s website (app.deployonce.app) uses the Space Grotesk font and #0A313D as its main color on a #0A0D14 background. Measured by Sitepeel on November 5, 2026.

## What font does DeployOnce use?

DeployOnce uses Space Grotesk (weights 600 and 700) and Inter (weights 400 and 500) on app.deployonce.app. Page titles are 153.5px at weight 700 (46px on phones) and body text is 14px. Measured on November 5, 2026.

- Space Grotesk (weights 600, 700)
- Inter (weights 400, 500)
- ui-monospace (weights 600)

## DeployOnce colors: palette and hex codes

DeployOnce’s main colors are #0A0D14 (cool charcoal) for the background, #F8FAFC (snow) for text and #0A313D (deep cyan) as the main accent, with #00E1FF (vivid cyan) as another accent. Measured on November 5, 2026.

- #0A0D14: cool charcoal
- #F8FAFC: snow
- #E1E3E5: mist
- #BCBFC2: cool silver
- #909EB2: blue
- #0E141B: cool charcoal
- #1F293D: deep blue
- #0A313D: deep cyan

## What is DeployOnce built with?

DeployOnce’s website (app.deployonce.app) is built with Next.js, React, Tailwind CSS, Cloudflare and Lucide. Measured on November 5, 2026.

- JavaScript framework: Next.js 16.4.3, React 19.3.0-canary-278794d7-2
- Hosting & CDN: Cloudflare
- Analytics: Cloudflare Web Analytics
- UI & CSS: Tailwind CSS 3.x
- Fonts & icons: Lucide

## Questions and answers

### What font does DeployOnce use?

DeployOnce’s website uses Space Grotesk (weights 600 and 700) and Inter (weights 400 and 500). Page titles are 153.5px at weight 700 (46px on phones) and body text is 14px. Measured on November 5, 2026.

### What are the DeployOnce colors and hex codes?

On app.deployonce.app: #0A0D14 (cool charcoal) for the background, #F8FAFC (snow) for text and #0A313D (deep cyan) as the main accent, with #00E1FF (vivid cyan) as another accent. The color palette above lists all 14 colors with their hex codes and where each one is used.

### What is the DeployOnce design system?

The design system on this page is app.deployonce.app’s, as measured on November 5, 2026: Space Grotesk type, #0A313D as the main color and pill-shaped corners, written down as a DESIGN.md. It is not DeployOnce’s own documentation.

### What is DeployOnce built with?

DeployOnce’s website (app.deployonce.app) is built with Next.js, React, Tailwind CSS, Cloudflare and Lucide. The full tech stack Sitepeel found: Next.js, React, Cloudflare, Cloudflare Web Analytics, Tailwind CSS and Lucide. Measured on November 5, 2026.

### What is the DeployOnce DESIGN.md?

A plain-text file with DeployOnce’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this DeployOnce’s official design system?

No. Sitepeel measured it from app.deployonce.app’s public page on November 5, 2026. It is an independent analysis, not made or approved by DeployOnce.

### Can I use DeployOnce’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy DeployOnce’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/app.deployonce.app/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with DeployOnce.

## The DESIGN.md file

```markdown
---
version: alpha
name: DeployOnce
description: "Dark interface measured from app.deployonce.app: Space Grotesk type with Inter, deep cyan accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#0A0D14"
  surface: "#0A0D14"
  on-surface: "#F8FAFC"
  on-background: "#F8FAFC"
  on-surface-variant: "#E1E3E5"
  on-surface-muted: "#BCBFC2"
  on-surface-subtle: "#909EB2"
  surface-container-low: "#0E141B"
  overlay: "#14192499"
  overlay-strong: "#14192466"
  outline: "#1F293D"
  outline-variant: "#F8FAFC21"
  primary: "#0A313D"
  on-primary: "#FFFFFF"
  secondary: "#00E1FF"
  success: "#10B77F"
typography:
  headline-display:
    fontFamily: Space Grotesk
    fontSize: 153.5px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 95px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.06em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 57.5px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: Space Grotesk
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.03em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  code:
    fontFamily: ui-monospace
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.19em
  headline-display-mobile:
    fontFamily: Space Grotesk
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.03em
  headline-md-mobile:
    fontFamily: Space Grotesk
    fontSize: 33.5px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.03em
rounded:
  sm: 10px
  md: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 64px
  gutter: 12px
  section: 112px
components:
  button-primary:
    textColor: "#080D16"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    height: 40px
  button-outline:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 46px
  button-outline-hover:
    backgroundColor: "#00E1FF12"
  button-ghost:
    textColor: "#080D16"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  card:
    backgroundColor: "{colors.overlay-strong}"
    textColor: "#F8FAFCE6"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 6px 14px
  link:
    textColor: "{colors.on-surface}"
---

# DeployOnce Design System

## Overview

DeployOnce describes itself as: “DeployOnce builds and deploys applications from GitHub repositories. Detect your stack, review build settings, and manage Docker-based deployments, logs, and database options in one place.” The interface is dark, built on **Cool Charcoal (#0A0D14)** with **Snow (#F8FAFC)** text, and **Deep Cyan (#0A313D)** as the main accent.

Type is set in **Space Grotesk** and **Inter**, with **ui-monospace** for code. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [app.deployonce.app](https://app.deployonce.app/) on November 5, 2026 at 1440×900 and 390×844 from 328 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 14 roles, plus gradient stops #00E1FF, #41DCFB.

- **Cool Charcoal (#0A0D14):** Page background, seen 4 times. Token `background`.
- **Snow (#F8FAFC):** Primary text and headings, seen 63 times. Token `on-surface`.
- **Mist (#E1E3E5):** Secondary text, seen 8 times. Token `on-surface-variant`.
- **Cool Silver (#BCBFC2):** Muted text and metadata, seen 6 times. Token `on-surface-muted`.
- **Blue (#909EB2):** Subtle text and placeholders, seen 41 times. Token `on-surface-subtle`.
- **Cool Charcoal (#0E141B):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Cool Charcoal 60% (#14192499):** Translucent fill for cards and controls, seen 30 times. Token `overlay`.
- **Cool Charcoal 40% (#14192466):** Stronger translucent fill, seen 8 times. Token `overlay-strong`.
- **Deep Blue (#1F293D):** Borders and dividers, seen 53 times. Token `outline`.
- **Snow 13% (#F8FAFC21):** Secondary dividers, seen 5 times. Token `outline-variant`.
- **Deep Cyan (#0A313D):** Brand color in logos and imagery. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Cyan (#00E1FF):** Accent in text, fills and borders, seen 51 times. Token `secondary`.
- **Teal (#10B77F):** Success and positive states, seen 4 times. Token `success`.

## Typography

**Space Grotesk**, **Inter** and **ui-monospace** (monospace) share the interface. Fallback stack: `Space Grotesk, Space Grotesk Fallback, Space Grotesk, ui-sans-serif`.

- **headline-display:** Space Grotesk 153.5px at weight 700, line height 1.08, tracking -0.03em (46px on mobile). Page title (h1).
- **headline-lg:** Space Grotesk 95px at weight 700, line height 1.08, tracking -0.06em. Section headings (h2).
- **headline-md:** Space Grotesk 57.5px at weight 700, line height 1.05, tracking -0.03em (33.5px on mobile). Sub-section headings.
- **headline-sm:** Space Grotesk 20px at weight 600, line height 1.4, tracking -0.03em. Card and feature titles.
- **body-md:** Inter 14px at weight 400, line height 1.43. Body text.
- **body-lg:** Inter 16px at weight 400, line height 1.5. Lead paragraphs.
- **label-md:** Inter 14px at weight 500, line height 1.43. Buttons, navigation and labels.
- **code:** ui-monospace 11px at weight 600, line height 1.5, tracking 0.19em, uppercase. Code and technical values.

## Layout

Spacing is mostly on a 4px grid (76% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 12px, lg 20px, xl 64px.
- **Sections:** 112px vertical padding between major sections.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Breakpoints:** 600px, 639px, 640px, 767px, 768px, 1023px, 1024px, 1400px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(1, 2, 4, 0.8) 0px 6px 16px -12px`
- `rgba(0, 225, 255, 0.5) 0px 0px 0px 1px, rgba(0, 225, 255, 0.7) 0px 10px 34px -12px`
- `rgba(0, 225, 255, 0.3) 0px 0px 0px 1px, rgba(0, 225, 255, 0.5) 0px 30px 70px -40px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 228 elements.
- **sm (10px):** 32 elements.
- **md (16px):** 12 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Start deploying”):** transparent fill, #080D16 text, 14px/600, 10px radius, padding 10px 20px, shadow `rgba(0, 225, 255, 0.5) 0px 0px 0px 1px, rgba(0, 225, 255, 0.7) 0px 10px 34px -12px`.
- **button-outline (“Explore the platform”):** transparent fill, #F8FAFC text, 14px/600, 10px radius, padding 12px 24px, border 1px solid #1F293D.
- **button-outline-hover:** background #00E1FF12, text #F8FAFC on hover.
- **button-ghost (“Start deploying”):** transparent fill, #080D16 text, 14px/600, 10px radius, padding 10px 20px, shadow `rgba(0, 225, 255, 0.5) 0px 0px 0px 1px, rgba(0, 225, 255, 0.7) 0px 10px 34px -12px`.
- **card:** #14192466 fill, #F8FAFCE6 text, 14px/400, 9999px radius, padding 6px 14px, border 1px solid #1F293D.
- **link:** transparent fill, #F8FAFC text, padding 0px.

## Do's and Don'ts

- Do use #0A0D14 for the page and lift surfaces in small steps: #0E141B.
- Do keep text in 4 levels: #F8FAFC, #E1E3E5, #BCBFC2, #909EB2.
- Do use #0A313D as the brand accent: header, logo and key highlights.
- Do set headlines in Space Grotesk with tight tracking (-0.03em).
- Do reuse the measured spacing steps (8px, 12px, 20px).
- Do make buttons and chips fully rounded (9999px); most other elements use 10px corners.
- Don't introduce new font families beyond Space Grotesk, Inter and ui-monospace.
- Don't use #0A313D for large backgrounds or body text.
- Don't make interface transitions slower than 0.36s.

## Motion

Interface transitions are quick: 0.15s, 0.22s, 0.36s, 0.24s.

- **Easing:** `ease`, `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0.2, 0.75, 0.25, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/app.deployonce.app/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```