Has a developer you know lost their peace? Find a more peaceful way.×

Ship software peacefully

With the all-in-one intelligent cloud provider

Deploy → Agents
New Project / Dashboard
web
Next.js · deployed 2m ago
postgres
Volume · 12 GB
worker
Cron · every 5m
Components

Large 58px buttons, purple punctuation.

Buttons · every variant, with hover and disabled
Primary · default · #553f83Deploy →
Primary · hover · 10% white liftDeploy →
Primary · disabled · #878593Deploy →
Secondary · default · rgba(0,0,0,.35)Agents
Secondary · hoverAgents
Secondary · disabledAgents
Nav links · the only other control captured
Link · default · #ffffffPricing
Link · hover · opacity .15s ease-in-outPricing
Link with caretProduct ▾
Underlined body linkintelligent
Field · default and focus
Input · default · dark fill, .15 white border
⚲
Input · focus · lavender ring #a667e4
⚲
Chips & badges
Announcement chip · bar tintFind a more peaceful way
Service status chips · purple only
Deployed Building Sleeping

Buttons are unusually large, 58px tall, radius 8px, 20px/500. The primary is muted violet #553f83 with a rgba(255,255,255,.15) border; the secondary is a translucent rgba(0,0,0,.35) fill with a brighter .25 border. Purple is the only hue: lavender #a667e4 for the bar, links and accent dots. Gaps: hover fills, disabled and inputs were not captured live, so hover is a 10% white lift over the captured fill, disabled uses text-dim #878593 at reduced opacity, and the field follows the spec note: dark fill, white-alpha border, purple focus.

Typography

IBM Plex Serif display, Inter body.

Display h1 · IBM Plex Serif · 54/60.5 · 500 · -1.96px (-3.6%)Ship software peacefully
Section h2 · IBM Plex Serif · 40/48 · 400 · -0.8pxDeploy in seconds
Sub-section h3 · IBM Plex Serif · 36/48 · 400 · -0.72pxDatabases, volumes and cron
Subhead · Inter · 20 · 400 · rgba(255,255,255,.80)The all-in-one intelligent cloud provider
Body · Inter · 16/26 · 400 · #ffffffDepth comes from the illustrated background and glassy panels, not shadows.
UI / buttons · Inter · 20 · 500Deploy →
Palette

Deep indigo, one purple family.

Text
text-primary#ffffff
text-sub255,255,255,.80
text-muted#a1a0ab
text-dim#878593
Surfaces & borders
canvas#13111c
bar-bg#1f132a
surface-panel#33323e
surface-glass0,0,0,.35
border-10255,255,255,.10
border-15255,255,255,.15
border-25255,255,255,.25
Accent · purple is the only hue
lavender#a667e4
violet#853bce
cta-purple#553f83
purple-deep#3d2259
indigo-tint#1f132a

Every token above is captured from the live DOM. There is no semantic red/green/amber set: the rule is that purple is the only hue in the chrome, and white text on indigo carries everything else.

Depth & motion

Illustrated depth, not drop shadows.

Radius scale
8px · buttons, inputs, cards
12px · panels
circle · mark, dots
Elevation recipes
Glass hairline · the captured default
No drop shadow. Translucent rgba(0,0,0,.35) fill over the illustrated sky, lifted by a 1px rgba(255,255,255,.15) hairline.
Upward panel lift · embedded dashboard
box-shadow: 0 -20px 60px rgba(0,0,0,.4). The only shadow on the page, cast upward where the product preview bleeds into the hero.
Control heights
Buttons · 58px Announcement bar · 52px Nav · 64px, transparent

Motion: quick CSS micro-transitions only. transform 0.15s cubic-bezier(0.4,0,1,1), background-color 0.2s ease-out, opacity 0.15s ease-in-out; subtle hovers on buttons and nav, no scroll-jacking.