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

Dagger

A warm, developer-tooling marketing surface built on a cream canvas (#f8f4ef) with near-black ink, white content cards, and bold General Sans display headlines. The system reads as friendly-but-technical — playful hand-drawn mascot illustrations sit inside saturated color tiles (teal, orange, yellow), white rounded cards (16px) carry feature copy, and a near-black ink footer closes the page. Brand voltage comes from the chunky General Sans display face and the saturated illustration tiles rather than from accent text colors.

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

Color Palette

Accent

Neutrals

Typography

display-xl 68px · 600 · 1.1
The quick brown fox jumps
display-lg 44px · 600 · 1.1
The quick brown fox jumps
title 24px · 600 · 1.2
The quick brown fox jumps
body 20px · 400 · 1.4
The quick brown fox jumps
button 16px · 500 · 1
The quick brown fox jumps

Spacing & Shape

Spacing

Name Value Preview
xxs 4px
xs 8px
sm 12px
md 16px
lg 20px
xl 24px
xxl 32px
huge 40px
huge2 48px
section 80px
section-lg 100px

Border Radius

Name Value Preview
sm 4px
md 8px
lg 16px

FAQ

What colors does Dagger use?
Dagger's core palette includes #131226, #131226, #191922, #ffffff, #f8f4ef. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Dagger DESIGN.md.
What font does Dagger use?
Dagger's primary typeface is General 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 Dagger design system?
A warm, developer-tooling marketing surface built on a cream canvas (#f8f4ef) with near-black ink, white content cards, and bold General Sans display headlines. The system reads as friendly-but-techn…

More like this