Pixloop Design.md
Temporal homepage design, full-page screenshot

Temporal

A dark-canvas, developer-first interface for durable-execution infrastructure — near-black #141414 floor, near-white Aeonik display headlines set thin (weight 300) with aggressive negative tracking, and a neon accent spectrum (indigo, violet, pink, lime-green, mint) borrowed from terminal/code-editor syntax palettes. The system reads as engineered-and-confident: sharp 0px corners everywhere, a hard offset drop-shadow as the one signature elevation move, real code editors and architecture diagrams shown in-card, and a bright lime promo banner pinned above the nav.

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
loading…

Color Palette

Accent

Neutrals

Typography

display 68px · 300 · 1.1
The quick brown fox jumps
body 14px · 400 · 1.429
The quick brown fox jumps
button 16px · 400 · 1.5
The quick brown fox jumps

Spacing & Shape

Spacing

Name Value Preview
xxs 4px
xs 8px
sm 12px
md 16px
lg 24px
xl 32px
xxl 48px
section 64px
section-lg 96px

Border Radius

Name Value Preview
none 0px
pill 9999px
full 9999px

FAQ

What colors does Temporal use?
Temporal's core palette includes #444ce7, #7f86f1, #f8fafc, #141414, #ffffff. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Temporal DESIGN.md.
What font does Temporal use?
Temporal's primary typeface is Aeonik. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Temporal design system?
A dark-canvas, developer-first interface for durable-execution infrastructure — near-black #141414 floor, near-white Aeonik display headlines set thin (weight 300) with aggressive negative tracking,…

More like this