Brand reference — colors, typography, components, and rules.
Cloud platforms drown users in dashboards, nested menus, and thousands of configuration panes. Drift's visual identity is a radical rejection of that complexity. Every element should feel physical, blocky, and playful — like pressing buttons on a toy cash register. If a component looks like it belongs in the Azure portal, it's wrong.
The guiding metaphor: paper cutouts on a desk. White cards with ink borders, sitting on a light gray surface. Buttons that rise up when you hover and slam flat when you click. No gradients, no rounded corners, no drop shadows — just hard edges and solid colors.
The three brand colors map to the product's ABC triad: orange for Atomic (functions, compute), purple for Backbone (data, storage), green for Canvas (sites, the visible output). This mapping is embedded in the logo itself — the first three letters carry the triad colors.
The brand and the runtime make the same promise: your app doesn't need fifty resources and a PhD in cloud infrastructure. It fits in your hand.
Tinos bold italic with per-letter colored underlines. The first three letters carry the ABC triad: orange (Atomic), purple (Backbone), green (Canvas).
Five named colors. Orange for Atomic, purple for Backbone, green for Canvas. Ink for everything structural. Gray surface underneath.
System-UI stack, three weights only. The logo is Tinos italic — the only serif on the platform.
Drift runs your code, stores your data, and hosts your site — all inside one lightweight process that uses less RAM than a browser tab.
Filled background, white text, ink border, zero radius. Hover to raise, click to slam.
White panels with ink borders. Interactive cards raise on hover. Selected cards are purple and flush.
White background, ink border, no radius. Focus ring is purple. Steppers have physical pushbutton [-] / [+] controls.
Grouped form sections use fieldset + legend. Legend is 11px uppercase on the border.
Status badges use brand colors with the raised-on-ink affordance.
VS Code Dark+ theme on #1e1e1e background. The only dark element on the platform — a deliberate frame-break for terminal content.
// @atomic route=GET:get-menu auth=none package main import "drift-sdk" func GetMenu() (int, string, interface{}) { menu, err := drift.CacheGet("menu") if err != nil { return 500, "text/plain", "error" } return 200, "application/json", menu }
$ drift deploy Deploying restaurant... Atomic ✓ get-menu ✓ submit-reservation Backbone ✓ Cache: menu ✓ NoSQL: reservations Done in 8.2s
drift deploy to ship your app. The manifest lives in drift.yaml.
A static square — no rotation. Edges light up one at a time in brand colors. On completion, all edges snap to green (success) or red (error). The spinner IS the result indicator — no separate progress bar.
Progressive disclosure control. Lets users choose how much technical detail they see. Three levels: Beginner (what it does), Builder (how to use it), Engineer (how it works). Content is tagged with data-depth attributes and shown/hidden as the slider moves.
Canvas hosts your website. Drop a folder of HTML files and it's live.
Your site can call your backend functions at /api/* — no setup needed.
Deploy with drift canvas deploy ./site. Canvas serves static files and proxies
/api/* requests to your Atomic functions on the same origin — no CORS
configuration required. Supports multiple sites per slice via the -s flag.
Canvas runs on :8002 inside the single-binary Slice process. The /api/*
proxy is a direct Go handler call to the Atomic mux within the same process — no network hop,
no serialization. The Dockerfile builds from scratch: no shell, no coreutils.
HTML files are served with auto-injected <base href> tags
and browser security headers (CSP, X-Frame-Options, Referrer-Policy).
These break the brand. If you see any of these in a Drift surface, it's a bug.