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

Kestra

A developer-orchestration platform interface built on a dark near-black hero canvas with electric-violet accents, transitioning into bright white content sections below the fold. The system reads as confident open-source-enterprise tooling — Mona Sans typography throughout, generous 12px-radius white cards floating on soft blue-tinted shadows, pill-shaped feature chips, and a violet CTA that carries nearly all the brand voltage. The dark-to-light scroll rhythm and the single violet accent define the voice.

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

Color Palette

Accent

Neutrals

Typography

h1 56px · 500 · 1.125
The quick brown fox jumps
h2 32px · 600 · 1.2
The quick brown fox jumps
h4 24px · 600 · 1.2
The quick brown fox jumps
h3 20px · 600 · 1.2
The quick brown fox jumps
body 18px · 400 · 1.5
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

Border Radius

Name Value Preview
xs 4px
sm 6px
md 8px
lg 12px
xl 16px
xxl 32px
pill 40px
full 9999px

FAQ

What colors does Kestra use?
Kestra's core palette includes #131316, #ffffff, #000000, #212529, #3b3a41. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Kestra DESIGN.md.
What font does Kestra use?
Kestra's primary typeface is Mona Sans. 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 Kestra design system?
A developer-orchestration platform interface built on a dark near-black hero canvas with electric-violet accents, transitioning into bright white content sections below the fold. The system reads as…

More like this