Style identity
Delivery Studio
A dark editorial developer-tool study for sending, observing, and protecting transactional email.
Dark-first editorial developer tooling with warm type, code UI, and coral signal themeDesign system Pro AI Kit12 components
Delivery Studio — Resend-inspired AI Kit
12 focused, original elements for Delivery Studio; categories are retained only when supported by the live reference. Published flags remain disabled.
Desktop · 1440 × 12207
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Domaine
Expressive hero display typography
domaine, Georgia, "Times New Roman", serif- Weights
- 400 observed; 500 and 700 available
- Sizes
- 72–96px hero; 48–56px section
- Line height
- 1.0 hero; 1.2 section
- Tracking
- -0.01em hero; -0.05em section
Fallback: Georgia, Times New Roman, serif
ABC Favorit
Section display and product storytelling
aBCFavorit, inter, ui-sans-serif, system-ui, sans-serif- Weights
- 400, 500 observed
- Sizes
- 16px body; 56px section
- Line height
- 1.2 display; 1.5 body
- Tracking
- -0.05em display; normal body
Fallback: inter, ui-sans-serif, system-ui, sans-serif
Inter
Navigation, controls, body, and developer calls to action
inter, ui-sans-serif, system-ui, sans-serif- Weights
- 100–900 variable observed
- Sizes
- 12px labels; 16px body; 18px lead
- Line height
- 1.5 body
- Tracking
- normal
Fallback: ui-sans-serif, system-ui, sans-serif
Commit Mono
Code samples, API payloads, logs, and labels
commitMono, ui-monospace, SFMono-Regular, Menlo, monospace- Weights
- 400 observed
- Sizes
- 12–14px
- Line height
- 1.55–1.7
- Tracking
- normal
Fallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Core colors
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
Responsive hierarchy
| 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
Layout rhythm
- Density
- Editorial with dense code islands
- Base unit
- 4px
- Max width
- 1240px
- Section gap
- 128px
- Card padding
- 24px
- Element gap
- 16px
Iconography
Minimal monochrome outline icons with coral signal
1.5px–2px stroke · 16px / 20px / 24px
Keep developer actions monochrome, use coral for status rather than decoration, and label event/log icons in text.
System metrics
Radius
Control 6pxCard 12pxFeature 20pxPill 999px
Spacing
Base unit 4pxInline gap 8pxControl gap 12pxCard padding 24pxSection gap 128px
Motion
Interaction 160ms ease-outReveal 500ms cubic-bezier(.2,.8,.2,1)
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
Do
- Show the observed mechanism beside its claim.
- Keep states and next actions close to their explanation.
- Use semantic color and explicit focus in both themes.
- Let long content wrap or scroll without clipping.
Don't
- ×Do not copy brand marks or protected text.
- ×Do not add generic categories just to increase the count.
- ×Do not make decorative gradients carry essential meaning.
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.
Concept
A complete visual language, ready to inspect.
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
Delivery Studio Interface Elements
12 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
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.
Observable-inspired Signal Notebook
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.
Replit-inspired Build Canvas
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.