What is Earthly's primary brand color?

Earthly uses two brand voltages. Electric cyan (#00d4ff, --el-cyan, --logo-cyan) is the primary signal — appearing 158 times across text (47), border (84), gradient (19), background (1), and shadow (7) roles. It colors the logo, inline code, card borders, link defaults, and the CTA gradient start-stop. Neon green (#00ff88, --success, --logo-green) is the action-success accent — appearing 39 times as text (5), background (6), border (11), shadow (2), and gradient (15). It colors the success indicator, nav hover state, link hover, and the CTA gradient terminus. The two never appear as flat full-opacity fills on large surfaces; they operate as strokes, glows, and gradients on the dark navy canvas.

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

Earthly runs Roboto across every tier — display, heading, body, button, and metadata — with no second family. The fallback stack is '-apple-system, system-ui, Segoe UI, Oxygen, Ubuntu, Cantarell, sans-serif'. Hero h1 sits at 46px / weight 800; section h2s at 40px / weight 700; card titles at 20–24px / weight 700–800; body at 14–16px / weight 400. The heavy weight 800 on the hero h1 is the system's loudest typographic moment. Roboto is open-source and freely available from Google Fonts. If you need a substitute that preserves the utilitarian feel, Inter at the same weights transfers cleanly; Roboto's slightly wider letterforms give it a more utilitarian character than Inter's tighter proportions.

How does Earthly's glow-based elevation system work?

Rather than drop shadows, Earthly uses radial-glow CSS variables at fractional opacity to create depth on the dark canvas. The system defines nine glow variants for cyan (--glow-cyan-06 through --glow-cyan-40), nine for green (--glow-green-06 through --glow-green-30), three for purple (--glow-purple-10 through --glow-purple-30), and one for amber (--glow-amber-20). Each is an rgba value at the specified opacity. Feature cards place a cyan-20 or cyan-30 radial glow behind the card border; success indicators use a green-20 glow; AI feature cards use a purple-20 glow. The effect reads as a light source inside the card radiating outward — a cinematic depth cue that does not require any z-axis shadow offset.

What canvas color does Earthly use?

The primary canvas is #0a0e1a (--bg-main), a deep navy-black with a blue undertone — distinct from Spline's pure #000000 or Linear's warm near-black. The CSS defines five dark surface values that form a gradient of depth: --bg-deepest (#06090f) for the darkest section floors, --bg-main (#0a0e1a) for the primary canvas, --bg-dark and --bg-section-dark (#0d1117 / #0f1419) for section alternation, and --bg-card (#1a1f35) for elevated card surfaces. Each step is roughly 5–10 lightness points apart. The blue undertone in the canvas family makes the electric cyan glow system legible — a neutral near-black would absorb the cyan halos rather than letting them read as distinct light.

Can I use this DESIGN.md to build my own developer-tool dark-mode 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 Earthly's specific moves: near-black navy canvas with a blue undertone, dual-fluorescent cyan and green voltages deployed as strokes and glow layers rather than fills, Roboto at weight 800 for the hero display, conservative 8px base rounding on content cards, and the gradient CTA pill. The glow system is the most distinctive element to borrow: the token references resolve to rgba values you can apply as box-shadow or filter: drop-shadow. One caveat: the dual-fluorescent palette works because both colors are high-chroma against the dark navy. On a lighter canvas both would read as garish; reserve them for dark surfaces only.

Earthly Design System

Earthly's marketing-site design system: electric cyan #00d4ff and neon green #00ff88 on near-black navy.

About Earthly DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source earthly.dev

Developer Tools & IDEs
Backend, Database & DevOps

Earthly's marketing page reads as a dark-mode developer tool whose design choices prioritize legibility of code and status information over conventional SaaS marketing aesthetics. The canvas is a near-black navy (#0a0e1a), the display headline "Engineering Guardrails for the AI Era" sits in near-white at 46px / weight 800 in Roboto, and the primary CTA button is a diagonal cyan-to-green gradient pill — the only polychromatic interactive element on the page. Where Vercel holds its dark canvas flat and Linear tints theirs with violet, Earthly injects neon-spectrum glow from behind the card surfaces to create depth: cyan halos pulse around feature cards, green halos mark success states, purple halos indicate AI features. The glow system replaces both drop shadows and background-color banding as the depth mechanism.

The dual-fluorescent palette is the distinctive technical choice. Electric cyan (#00d4ff) is wired into 16 CSS variables — logo color, card border color, inline code color, link default, button hover shadow, and CTA gradient — making it the highest-frequency brand signal in the system. Neon green (#00ff88) wired into 9 variables handles success states, nav hover color, link hover, and the CTA gradient terminus. The two colors never appear at full opacity as background fills — they always appear at reduced opacity in glow layers or at full opacity as text and border strokes. This keeps the neon palette from overwhelming the dark navy canvas.

The type system is single-family Roboto across all scales, with significant weight variation doing the hierarchy work: the hero h1 at weight 800 is the heaviest moment, section h2s at weight 700, card titles at weight 700–800, and body copy at weight 400. The result reads closer to a developer documentation site (MDN, ReadTheDocs) than to a typical SaaS marketing page. Feed this file to an AI coding tool and it reproduces the glow-card system, the gradient CTA, and the dual-fluorescent nav hover on a near-black canvas.

What makes it distinct

Dual-fluorescent paletteelectric cyan (#00d4ff) as the brand voltage and neon green (#00ff88) as the success/action accent, both deployed on a near-black navy canvas
Ambient glow instead of shadowcards use CSS radial-glow halos (cyan-40 opacity, green-30 opacity) rather than drop shadows to create depth on the dark surface
Roboto across all tiersa single family from the 46px hero h1 (weight 800) to the 11px metadata label (weight 400), with no display-family switch
8px default radius, circular badgessmall conservative rounding on content cards and code blocks, with full-circle (50%) for icon badge containers
Gradient CTAthe primary button uses a diagonal cyan-to-green gradient rather than a flat brand fill, making it the only polychromatic element in the interactive tier

Live at earthly.dev

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

earthly.dev

Explore Earthly

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.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Earthly design system FAQ

Common questions about Earthly'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.

Earthly — official site

Earthly'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.