Slite

A warm, editorial knowledge-base SaaS interface built on a near-white canvas (#fdfdfd) with cream content surfaces (#fdf9f4), an oversized Garnett display headline, and a single warm-orange CTA (#f67748). The system reads as calm and document-first — large pill buttons, deeply rounded cream cards (32px), real product UI fragments embedded inside cards, and hand-drawn doodle accents that soften an otherwise clean grid. Brand voltage comes from the big Garnett wordmark-scale headline and the warm orange action color against the cream paper.

slite.com

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

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display 64px · 500 · 1.2

The quick brown fox jumps

title-lg 21.75px · 700 · 1.3

The quick brown fox jumps

title-md 20px · 700 · 1.25

The quick brown fox jumps

body 19.2px · 400 · 1.4

The quick brown fox jumps

button 15px · 600 · 1.0

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	8px
sm	12px
md	16px
lg	24px
xl	32px
xxl	40px
xxxl	48px
huge	60px
section	72px

Border Radius

Name	Value	Preview
none	0px
xs	8px
sm	12px
md	16px
lg	18px
xl	32px
xxl	40px
pill	999px
full	9999px

FAQ

What colors does Slite use?: Slite's core palette includes #f67748, #ffbda6, #f9efe4, #2d2f34, #1d1e20. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Slite DESIGN.md.
What font does Slite use?: Slite's primary typeface is Garnett. 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 Slite design system?: A warm, editorial knowledge-base SaaS interface built on a near-white canvas (#fdfdfd) with cream content surfaces (#fdf9f4), an oversized Garnett display headline, and a single warm-orange CTA (#f67…

More like this

↓ .md ↓ All files

loading…