Daytona Design System

Overview

Daytona's recently-rebranded marketing site does what most dev-environment platforms hesitate to commit to. Live-IDE-as-evidence. Every section card is anchored by a small isolated screenshot of the Daytona terminal — emerald {colors.emerald} (#2ecc71) blinking cursors, Berkeley Mono code samples on near-black panels, and IBM Plex Mono Python snippets in the hero. Where Vercel paints its hero matte black with a single Geist sans wordmark and where Codespaces leans on Microsoft-blue gradients, Daytona runs true ink-black with Inter display, Berkeley Mono uppercase labels, and emerald-cursor terminal screenshots that anchor every section as if the marketing page itself were a documentation site for the live product.

The chromatic system has two distinct voltages and the discipline to keep them separate. Cobalt-blue {colors.primary} (#0000ee) carries every link and the primary CTA pill (240 occurrences in the captured page, almost all on anchors), reading as a deliberate throwback to the default browser link color. Emerald {colors.emerald} (#2ecc71) is the single brand-layer color in the extraction — reserved exclusively for live terminal cursors inside IDE screenshots, the network-topology diagram nodes, and a single inline success-state badge. The remaining accents ({colors.syntax-cobalt}, {colors.syntax-sky}, {colors.syntax-amber}, {colors.syntax-violet}) are terminal-syntax tones borrowed from the IDE screenshots, not brand chrome. The discipline is the inverse of Cloudflare's voltage-as-canvas: Daytona holds two voltages tight in reserve and lets the IDE evidence carry the page.

The typographic split is the structural device. Inter runs every spoken surface — display, heading, body, button, nav — at modest weights (400-500 across the system). Berkeley Mono Regular runs every uppercase label, every section divider, every code sample, and every meta caption — appearing 66 times in the captured page as the dominant labeling voice. A secondary IBM Plex Mono tier carries the Python code snippets inside the hero panel. The pairing is closer to a documentation site (Stripe Docs, MDN) than to a typical SaaS marketing page, and it does the heavy lifting that holding the chromatic palette to two voltages would otherwise leave open.

Key Characteristics:

• True ink-black canvas ({colors.canvas} — #000000), with secondary surfaces stepping through {colors.surface-1} (#0a0a0a) and {colors.surface-2} (#161616) at 6% and 14% lightness — no matte softening anywhere.
• Two chromatic voltages held tight: cobalt-blue {colors.primary} for every link and the primary CTA pill; emerald {colors.emerald} reserved for live terminal cursors and topology-diagram nodes.
• Inter display at weight 400 (not 700) at 48px for the hero, paired with Berkeley Mono Regular at 12-14px for every uppercase label and section divider.
• Live IDE screenshots anchor every section card — Berkeley Mono code on near-black panels with emerald cursors, treated as evidence rather than decoration.
• 57px pseudo-pill button radius — the system's signature corner, neither the conventional 9999px full pill nor a standard 4-8px rounded rectangle.
• Hairline-on-near-black cards: {colors.surface-3} (#252525) carries 1px borders against {colors.surface-1} (#0a0a0a) fills, lifting feature cards off the canvas through tonal contrast alone.
• Customer logo wall renders in muted gray ({colors.ink-muted}) at uniform size — Sembrance, Mintlify, Browser Use, Turing, Elementor, Maestra, Prosus, Tessl, Orchids, Martian, Snorkel, CoreWeave, parabola, Lovable.
• 80×0px section padding on major editorial bands; the hero sits at 128×48px for extra breathing room.

Colors

Brand

• Emerald ({colors.emerald} — #2ecc71): frequency 3 (1 text, 1 border, 1 gradient). The single brand-layer color in the extraction — reserved for live terminal cursors inside IDE screenshots, the network-topology diagram nodes in the "Massive Parallelization" section, and a single inline success-state badge. The restraint is the brand's typographic signature: one terminal-green, reserved for evidence rather than decoration.
• Primary ({colors.primary} — #0000ee): frequency 240 (120 text, 120 border). The CTA and link color — fills the "Start for free" pill, carries every anchor link on the page, and outlines the primary button on hover. The saturated value reads as a deliberate throwback to default browser-link blue, not a designed brand tone.

Surface

• Canvas ({colors.canvas} — #000000): frequency 2579 (1285 text, 4 background, 1285 border, 5 shadow). The page floor — true ink-black, no near-black softening. Wired implicitly through Framer's defaults — the page does not expose explicit CSS custom properties for these tones.
• Surface-1 ({colors.surface-1} — #0a0a0a): frequency 63 (50 background, 13 gradient). The first elevation step — feature-card fills and the "Fast, Scalable, Stateful Infrastructure" section background.
• Surface-2 ({colors.surface-2} — #161616): frequency 20 (6 text, 8 background, 6 border). The second elevation step — code-panel fills inside the hero and the "Programmatic Control" section's process-execution panel.
• Surface-3 ({colors.surface-3} — #252525): frequency 14 (1 background, 13 shadow). The hairline border tone — carries 1px outlines on feature cards and code panels against the darker surface tiers.

Text

• Ink ({colors.ink} — #ffffff): frequency 367 (180 text, 7 background, 180 border). The dominant text color — hero headlines, section h2s, feature-card titles, body paragraphs.
• Ink Muted ({colors.ink-muted} — #a2a2a2): frequency 300 (150 text, 150 border). Secondary running-text — caption rows, "Learn more" links, nav-link inactive state, customer logo tone. Merges two near-equivalent mid-gray tones in the extraction.
• Ink Soft ({colors.ink-soft} — #bbbbbb): frequency 72 (36 text, 36 border). A lighter secondary tier for emphasis within muted copy.
• Ink Faint ({colors.ink-faint} — #666666): frequency 136 (68 text, 68 border). Tertiary captions and meta text inside the IDE screenshots.
• Ink Deep ({colors.ink-deep} — #585858): frequency 13 (6 text, 6 border, 1 shadow). The darkest gray text tone, used for footnote and small-meta rows.

Hairline

• Hairline ({colors.hairline} — #eeeeee): frequency 38 (19 text, 19 border). The light-gray accent on inverted surfaces — appears inside dark-on-light callouts within IDE screenshots, never on the main marketing chrome.

Terminal Syntax

• Syntax Cobalt ({colors.syntax-cobalt} — #0080ff): frequency 13 (5 text, 3 background, 5 border). The cobalt syntax accent inside code samples — distinct from the link-blue {colors.primary}. Merges two near-equivalent cobalt tones in the extraction.
• Syntax Sky ({colors.syntax-sky} — #00bbff): frequency 4 (2 text, 2 border). The light-blue terminal accent inside the network-topology diagrams.
• Syntax Amber ({colors.syntax-amber} — #ffaa00): frequency 12 (6 text, 6 border). The terminal-warning yellow inside IDE screenshots — used for in-progress states.
• Syntax Violet ({colors.syntax-violet} — #8855ff): frequency 12 (6 text, 6 border). The terminal-purple accent inside IDE screenshots.
• Syntax Teal ({colors.syntax-teal} — #33cccc): frequency 28 (14 text, 14 border). The Daytona logo color inside the wordmark and the topology-diagram node-type indicator.
• Syntax Coral ({colors.syntax-coral} — #ff8866): frequency 6 (3 text, 3 border). The terminal-error coral accent inside IDE screenshots.

Typography

Font Families

The system runs three voices: Inter (and Inter Variable) for every spoken surface, Berkeley Mono Regular for every uppercase label and section divider, and IBM Plex Mono for the Python code snippets inside the hero panel and inside larger code-sample tiles. Fallbacks walk sans-serif and monospace respectively, with the Inter Placeholder family declared as a webfont-loading fallback.

The pairing of Inter + Berkeley Mono is the typographic signature. Berkeley Mono is licensed (Berkeley Graphics) and uncommon in marketing pages outside design-conscious developer brands like Linear's docs and Vercel's terminal — its presence here signals craft awareness. The secondary IBM Plex Mono inside hero code snippets is open-source and serves a different role: code-as-content rather than label-as-system-voice.

Hierarchy

Principles

The hero h1 at 48px / 400 carries no letter-spacing adjustment — Inter at its default tracking does the work, and the modesty of the weight 400 treatment is the move to preserve. Bumping to 700 would turn the editorial dek into a generic SaaS shout and pull focus from the cobalt-pill CTA underneath. Body lead copy sits at weight 500 (slightly heavier than the display) to compensate for its smaller 20px size — an inverted weight relationship that reads as quietly confident.

Berkeley Mono carries the work that an uppercase tracked-wide sans label tier would normally do. The 12px / -0.12px tracking on {typography.mono-label} reads as small-caps without ever being uppercase-set in sans — the mono itself does the small-caps work. Section dividers ("AI-FIRST INFRASTRUCTURE", "MORE THAN A SANDBOX") render at 14px Berkeley Mono uppercase with -0.56px tracking, anchoring each editorial band as if the page were structured like terminal output.

Note on Font Substitutes

Inter is open-source (SIL OFL); no substitute needed. Berkeley Mono is licensed — for an open-source alternative, JetBrains Mono or IBM Plex Mono transfer cleanly at the same sizes (and Daytona ships IBM Plex Mono as the secondary mono inside hero code panels). The slightly-narrower glyph proportions of Berkeley Mono are the distinctive feature; if you need to match them more precisely, iA Writer Mono is the closest open-source proxy.

Layout

Spacing System

• Base unit: 4px (with 8px and 10px as the dominant modules in the extraction — 8px appears 101 times, 10px appears 98 times).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 10px · {spacing.base} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 40px · {spacing.4xl} 48px · {spacing.5xl} 64px · {spacing.6xl} 80px.
• Section padding (vertical): ~80px between major editorial bands (11 occurrences of 80×0px); the hero sits at 128×48px for extra breathing.
• Card internal padding: {spacing.2xl} (32px) for {component.card-feature} and 32×32×36px on the irregular extruded feature panels.
• Top-nav padding: {spacing.base} (12px) vertical, {spacing.2xl} (32px) horizontal.

Grid & Container

• Max content width: ~1280px on the section h2 and the 3-up feature grid; the hero band sits inside a narrower ~1080px text + code-panel split.
• Hero: 2-column split — flush-left text block ("Run AI Code on Daytona") paired with a Python code-snippet panel on the right (pip install daytona + import + sandbox creation).
• Customer logo wall: 5-column grid of monochrome customer marks (Sembrance, Mintlify, Browser Use, Turing, Elementor — repeats below with Maestra, Prosus, Tessl, Orchids, Martian, Snorkel, CoreWeave, parabola, Lovable).
• Feature grid: 3-column row of near-black feature cards each anchored by a small isolated IDE screenshot ("Lightning-Fast Infrastructure" / "Separated & Isolated Runtime Protection" / "Massive Parallelization for Concurrent AI Workflows").
• Programmatic Control band: 2-column layout pairing a left-rail of mono-labeled sections (PROCESS EXECUTION / FILE SYSTEM OPERATIONS / GIT INTEGRATION / BUILT-IN LSP SUPPORT) with a single large IDE screenshot on the right.
• AI-First Infrastructure row: 4-column horizontal-scroll carousel of IDE-screenshot tiles ("AI Evaluations / Code Interpreter / Coding Agents / Data Analysis").

Rhythm

The page alternates between wide editorial bands (the hero, the feature trios) and dense documentation-style sections (the Programmatic Control left-rail, the AI-First Infrastructure carousel). Every band terminates on the same ink-black canvas — there are no atmospheric gradients between bands, and depth comes from {colors.surface-1} cards lifted off the canvas through tonal contrast rather than through any background-color shifts.

Elevation

The system has essentially no shadow tier. The captured page has 5 occurrences of #000000 shadow ink and 13 occurrences of #252525 shadow ink — both confined to the soft resting elevation under feature cards and code panels. The canvas is too dark for traditional drop shadows to read; instead, hierarchy comes from {colors.surface-1} and {colors.surface-2} tiles lifted off the {colors.canvas} floor through tonal contrast.

• Flat (no shadow): hero, body bands, feature cells, logo wall, footer — 99% of surfaces.
• Tonal lift: {colors.surface-1} (#0a0a0a) cards on {colors.canvas} (#000000); {colors.surface-2} (#161616) panels nested inside {colors.surface-1} cards — the 6 and 14% lightness gaps read as elevation without any shadow being drawn.
• Hairline outlines: {colors.surface-3} (#252525) marks card and code-panel borders against the darker surface tiers. The 14-point lightness gap from surface-2 to surface-3 makes the hairline read on near-black canvases where a pure white-with-alpha border would punch too hard.

Shapes

The radius scale is dual-track — a standard small-step tier plus a signature 57px pseudo-pill:

• {rounded.none} 0px — only on the dark footer band and full-bleed sections.
• {rounded.xs} 1.8px — micro-rounding on chart and gauge tick marks inside IDE screenshots.
• {rounded.sm} 4px — small UI surfaces inside IDE screenshots and category chips.
• {rounded.md} 8px — icon buttons and dropdown items.
• {rounded.lg} 10px — the dominant card radius for code panels.
• {rounded.xl} 12px — feature-card outer radius.
• {rounded.pill} 57px — the signature button radius, appearing 33 times in the captured page. At the 32-40px button height the 57px radius reads as a fully-rounded pill, but on wider surfaces it carries a slightly-different curve than a true 9999px pill.
• {rounded.full} 9999px — circular icon buttons and the avatar chips inside customer testimonials (rendered as 100% in the captured CSS, appearing 18 times).

The 57px choice is the system's signature. It isn't on a 4/8px scale and it isn't the conventional full-pill 9999px — it's a hand-picked value that reads as a pill at button height but carries a distinct curve at larger surfaces.

Components

button-primary — The signature CTA. Cobalt {colors.primary} fill, white text, {typography.body-sm} (14px / 400), {rounded.pill} 57px pseudo-pill, 8x16px padding, 32px height. "Start for free" is the canonical instance.

button-secondary — Transparent fill with white text and a 1px {colors.surface-3} border. {rounded.pill} 57px pseudo-pill, 8x16px padding, 32px height. "View Docs" is the canonical instance, paired directly beside the primary CTA in the hero.

top-nav — Ink-black {colors.canvas} surface, 64px height, 12x32px padding. Daytona wordmark flush left, product nav links (Docs / Customers / Pricing / Startups / Blog) center, "Sign in / Try It" cluster flush right with the cobalt-pill CTA.

nav-link — Transparent background, muted {colors.ink-muted} text in {typography.nav-link} (12px / 500), 0x8px padding. No hover background visible in the captured surface.

hero-heading — White text on the transparent canvas, {typography.display-xl} (48px / 400). The single weight-400 display moment at this size — modesty by tracking and color contrast, not by weight.

section-heading — White text, {typography.display-md} (32px / 400). Used for "Fast, Scalable, Stateful Infrastructure for AI Agents," "Programmatic Control. File, Git, LSP, and Execute API," "AI-First Infrastructure. Optimized for LLMs, Agents, and Evals."

body-paragraph — Default white text at {typography.body-lg} (20px / 500). The hero sub-paragraph and section leads — slightly heavier than the display to balance the smaller size.

body-paragraph-muted — {colors.ink-muted} (#a2a2a2) text at {typography.body-md} for caption rows and secondary explanations under feature cards.

mono-caption — Berkeley Mono at {typography.mono-label} (12px / 400 / -0.12px tracking), uppercase. Carries section dividers ("PROCESS EXECUTION", "AI-FIRST INFRASTRUCTURE") and meta strips inside IDE screenshots.

card-feature — {colors.surface-1} (#0a0a0a) fill, white text, 1px {colors.surface-3} border, {rounded.xl} 12px radius, 32px internal padding. The default content card on the marketing surface — anchors every feature row.

code-panel — {colors.surface-2} (#161616) fill, white text, 1px {colors.surface-3} border, {rounded.lg} 10px radius, 24px padding. The IBM Plex Mono Python code panel in the hero and the IDE-screenshot anchors inside feature cards.

logo-chip — Transparent fill, muted {colors.ink-muted} logo at uniform 40px height. The customer logo wall renders all marks in monochrome gray regardless of source color — Sembrance, Mintlify, Browser Use, Turing, Elementor, Maestra, Prosus, Tessl, Orchids, Martian, Snorkel, CoreWeave, parabola, Lovable.

text-input — {colors.surface-2} fill, white text, 1px {colors.surface-3} border, {rounded.lg} 10px radius, 12x16px padding, 40px height.

footer — Ink-black {colors.canvas} fill, muted {colors.ink-muted} text at {typography.body-sm}, 48x32px padding. No surface contrast against the page floor — the footer continues the canvas with link columns and a subtle Berkeley Mono copyright row.

Do's and Don'ts

Do keep emerald {colors.emerald} (#2ecc71) reserved for live terminal cursors and topology-diagram nodes only. The system has 3 total occurrences of the brand-layer green; multiplying it into success badges, chart accents, or hover states dilutes the only brand-color signal on the page.

Do use Berkeley Mono Regular for every uppercase label and every section divider. The system has no uppercase tracked-wide sans label tier; if you reach for one, you've broken the typographic split that distinguishes Daytona from a generic dark-canvas dev-tools marketing page.

Do anchor every section card with a small IDE screenshot showing the live Daytona terminal. The live-IDE-as-evidence convention is the page's structural device; replacing screenshots with stock illustrations turns the page into a generic dev-tools claim.

Do keep the canvas at pure ink-black {colors.canvas} (#000000), with elevation stepping through {colors.surface-1} and {colors.surface-2} rather than through drop shadows. The IDE screenshots need maximum contrast to read as windows into the live product.

Don't swap the 57px pseudo-pill button radius for a true 9999px full pill. The 57px value is the system's signature — neither standard rounded-rectangle nor perfectly circular — and substituting either reads as a different brand entirely.

Don't use the cobalt-link {colors.primary} (#0000ee) as a card-fill or background color. The cobalt is exclusively a link and CTA color (240 captured occurrences, almost all on anchors); painting it on a surface tile would compete with the emerald terminal accents and erase the link affordance everywhere else.

Don't introduce an intermediate near-black matte tone between the canvas and {colors.surface-1}. The system steps directly from ink-black (0% lightness) to {colors.surface-1} (6% lightness) — inserting a softer matte tier muddies the tonal hierarchy that the cards rely on for elevation.

Don't render the customer logo wall in each company's native brand color. The wall sits in monochrome muted gray ({colors.ink-muted}) at uniform size; full-color logos would create competing chromatic voices on a system that holds voltage to two specific brand voltages.

Known Gaps

• Light mode: the captured marketing surface is dark-only. The Daytona dashboard product carries a light-mode variant but it is not represented in this DESIGN.md.
• Hover and focus states: the captured page does not surface hover states for the primary cobalt CTA or the secondary transparent button; the full state matrix (focus rings, disabled tints) lives inside the product dashboard.
• Form input error states: {component.text-input} carries the resting state only; error and validation styling are not exposed on the captured marketing surface.
• Motion: the network-topology diagram and the live cursor terminals continuously animate on scroll-into-view, but the spec captures end-state values only. Easing curves, cursor blink rates, and stagger timing live in the live Daytona runtime.
• Product surfaces: this DESIGN.md captures the marketing site only. The Daytona dashboard (app.daytona.io) carries a richer token system — workspace cards, runtime state badges, gauge panels, terminal-output streams — that is not represented here.
• 57px radius origin: the unusual 57px pseudo-pill radius is not tied to a declared CSS custom property in the extraction — it's hard-coded on the button components. The choice presumably traces to the Framer design source but is not documented in the captured page.
• Berkeley Mono fonts: the page declares both "Berkeley Mono Regular" and "Berkeley Mono" stacks separately, suggesting a weight-system split that the extraction does not fully resolve. Likely the regular family carries 400 weight and the broader family is a variable-weight fallback.