What is Daytona's primary brand color?

Daytona runs two distinct chromatic moments. The brand-layer voltage is emerald-green terminal-cursor color, reserved for live cursors inside IDE screenshots, the network-topology diagram nodes, and a single inline success-state badge. The CTA chrome runs cobalt-blue, a saturated web-link blue that reads as a deliberate throwback to the default browser anchor color — it appears 240 times in the captured page, exclusively on links and the primary pill CTA. The remaining accents (sky, amber, violet, coral) are terminal-syntax colors borrowed from the live IDE screenshots, not brand chrome.

What typeface does Daytona use, and what should I use as a substitute?

Daytona splits the system between Inter (and Inter Variable) for every spoken surface — display, heading, body, button, nav — and Berkeley Mono Regular for every uppercase label, every small-caps section divider, every code sample, and every meta caption. A secondary monospace tier uses IBM Plex Mono inside the hero code-snippet panel. Display headlines sit at 48px in Inter weight 400; body at 16-20px; Berkeley Mono labels at 12-14px / 400 / -0.12px tracking, uppercase. Inter is open-source; for Berkeley Mono, JetBrains Mono or IBM Plex Mono are the closest open-source alternatives.

Why does Daytona use a true black canvas instead of a softer matte?

The canvas is pure ink-black, with secondary surfaces stepping up through near-black tones at 6% and 14% lightness. The choice is deliberate: every section is anchored by a small IDE screenshot showing the Daytona terminal with emerald cursors and Berkeley Mono code, and the maximum-contrast canvas makes those screenshots read as windows into the live product rather than as flat illustrations on a matte background. The trade is harshness — pure black on most monitors carries crushed-shadow depth — but the IDE-screenshot anchor is the page's structural device and it needs the contrast.

Why does Daytona use a 57px pseudo-pill button radius?

The system's signature button shape is a 57px rounded rectangle rather than the conventional 9999px full pill. At the button's 32-40px height the 57px radius reads as a fully-rounded pill — but on wider surfaces like category chips it carries a slightly-different curve than a true 9999px pill would. The extraction captures 57px appearing 33 times in the captured page versus 100% (full circle) appearing 18 times for circular icon buttons. The 57px value is also unusual because it isn't on a standard 4/8px scale — it's a hand-picked radius that reads as the system's signature warm-but-not-soft button corner.

Can I use this DESIGN.md to build my own React dev-environment marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Daytona's specific moves: true-black canvas instead of a near-black matte, Inter display at weight 400 with a Berkeley Mono uppercase-label tier, emerald-cursor-on-black terminal accents as the only brand voltage, and the 57px pseudo-pill button radius. The tokens resolve cleanly without invention. The live-IDE-screenshot anchor is the move worth borrowing only if your product surface is itself visually-rich enough to carry a marketing page; otherwise it reads as a generic dev-tools claim.

Daytona Design System

Daytona's rebranded marketing system runs Inter display on a near-black canvas with Berkeley Mono uppercase labels and emerald terminal accents.

About Daytona DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source daytona.io

Developer Tools & IDEs

Daytona's recently-rebranded marketing site does what most dev-environment brands hesitate to commit to: a true all-black canvas with white Inter display headlines and Berkeley Mono uppercase labels everywhere. The hero pairs a 48px Inter weight 400 headline "Run AI Code." with a Python code-snippet panel rendered in Berkeley Mono, plus a cobalt-pill "Start for free" CTA and a transparent "View Docs" secondary. Where Vercel keeps its hero matte black with a Geist sans wordmark and Codespaces leans on a Microsoft-blue gradient, Daytona runs ink-black with a licensed monospace doing every label and section divider, plus emerald-green terminal cursors inside the IDE screenshots that anchor every section.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 16 color tokens — ink-black canvas, near-black surface tiers (#0a0a0a, #161616), four gray text tiers, a cobalt CTA fill (#0000ee), the single brand-layer emerald (#2ecc71), and a constellation of terminal-syntax accents (cobalt, sky, amber, violet, coral) borrowed from the live IDE screenshots. 13 typography tokens span Inter at display, heading, body, and label tiers, Berkeley Mono for every uppercase label and code sample, plus IBM Plex Mono for the secondary code-snippet tier inside the hero. 8 radius tokens centered on the unusual 57px pseudo-pill that distinguishes Daytona's buttons from generic full-pill CTAs.

Feed this file to Claude or Cursor and it reproduces Daytona's specific moves: true-black canvas instead of a near-black matte, Inter display weight 400 (not 700), Berkeley Mono for every uppercase label and divider, emerald-on-black terminal cursors as the only brand voltage, and the live-IDE-screenshot convention that anchors every section card. The one move worth borrowing only if your product is itself a code-execution platform: emerald-as-cursor. Most teams use green for success badges or chart accents; Daytona reserves it for the literal blinking terminal cursor, and the restraint is what makes it read as evidence rather than decoration.

What makes it distinct

Live-IDE-as-evidenceevery section card is anchored by a small isolated screenshot of the Daytona terminal with emerald-green cursors and Berkeley Mono code samples
Inter plus Berkeley Monothe marketing voice splits cleanly between Inter sans for prose and Berkeley Mono for every uppercase label, code sample, and small-caps section divider
Single emerald voltage`#2ecc71` terminal-green is the only brand-layer chromatic moment, reserved for live cursors, success states, and the network-topology diagrams
Cobalt blue CTAthe primary action pill uses a saturated `#0000ee` web-blue that reads as a deliberate throwback to default browser link color
57px pseudo-pill radiusthe system's signature button shape uses an unusual 57px corner rounding rather than the conventional 9999px full pill, soft but not perfectly circular

Live at daytona.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

daytona.io

Explore Daytona

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Daytona design system FAQ

Common questions about Daytona's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Daytona — official site

Daytona's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.