Style identity
Delivery Studio
A dark editorial developer-tool study for sending, observing, and protecting transactional email.
Reference style: Dark-first editorial developer tooling with warm type, code UI, and coral signal12 focused, original elements for Delivery Studio.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A dark editorial developer-tool study for sending, observing, and protecting transactional email.
Reference style: Dark-first editorial developer tooling with warm type, code UI, and coral signalTypography
Domaine
Expressive hero display typography
domaine, Georgia, "Times New Roman", serifFallback: Georgia, Times New Roman, serif
ABC Favorit
Section display and product storytelling
aBCFavorit, inter, ui-sans-serif, system-ui, sans-serifFallback: inter, ui-sans-serif, system-ui, sans-serif
Inter
Navigation, controls, body, and developer calls to action
inter, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, sans-serif
Commit Mono
Code samples, API payloads, logs, and labels
commitMono, ui-monospace, SFMono-Regular, Menlo, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
canvas / light
#faf9f7light page backdrop
surface / light
#fffffflight card/control surface
border / light
#ded9d5light hairline separation
text / light
#1c1918light primary text
muted / light
#6f6864light supporting text
accent / light
#ff6b58light action signal
accent2 / light
#b88cfflight secondary action signal
canvas / dark
#000000dark page backdrop
surface / dark
#111111dark card/control surface
border / dark
#333333dark hairline separation
text / dark
#f0f0f0dark primary text
muted / dark
#a1a4a5dark supporting text
accent / dark
#ff806bdark action signal
accent2 / dark
#b896ffdark secondary action signal
Success
#3dcc8apositive completion
Warning
#e2b35ccaution
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | 96px | 400 | 96px | -0.96px |
| Section | 56px | 400 | 67px | -2.8px |
| Lead | 20px | 400 | 30px | 0 |
| Body | 16px | 400 | 24px | 0 |
| Code | 13px | 400 | 20px | 0 |
Spacing & shape
Iconography
Keep developer actions monochrome, use coral for status rather than decoration, and label event/log icons in text.
System metrics
Radius
Spacing
Motion
Elevation
Soft
0 4px 16px rgba(15,23,42,.08)quiet surface separation
Lifted
0 18px 48px rgba(15,23,42,.14)focused proof surface
Surfaces & shape
Canvas
#faf9f7 / #000000page backdrop
Surface
#ffffff / #111111card and control surfaces
Accent
#ff6b58 / #ff806baction and status emphasis
Guidelines
Imagery
Prefer original code panels, event timelines, domain-status diagrams, and restrained abstract gradients; no third-party logos or email screenshots.
Layout
A dark editorial shell with sparse nav, large mixed-type hero, code-led integration sections, delivery proof, domain protection, and compact terminal-like surfaces.
Assigned collection
12 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
