Memotron
A soft, paper-calm marketing surface for a personal-knowledge-management super-app, built on a near-white canvas with charcoal (#333333) ink and a single rounded geometric typeface (Sen) used for everything from the oversized hero headline to button labels. The system reads as quiet, friendly utility software — generous centered whitespace, dark pill-shaped CTAs, a warm amber accent scale for highlights, and product screenshots floated on a soft-gray media frame. Brand voltage comes from the rounded Sen wordmark voice and a hand-drawn coral/pastel illustration backing the product mockups rather than from saturated UI color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
heading-xl
44px · 500 · 1.5
The quick brown fox jumps
heading-sm
18.79px · 600 · 1.5
The quick brown fox jumps
body
21.93px · 400 · 1.5
The quick brown fox jumps
button
16.7px · 400 · 1.25
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 13px | |
| md | 17px | |
| lg | 25px | |
| xl | 33px | |
| xxl | 50px | |
| section | 84px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sm | 6px | |
| md | 13px | |
| pill | 9999px | |
| full | 9999px |
FAQ
- What colors does Memotron use?
- Memotron's core palette includes #333333, #333333, #333333, #545454, #808080. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Memotron DESIGN.md.
- What font does Memotron use?
- Memotron's primary typeface is Sen. 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 Memotron design system?
- A soft, paper-calm marketing surface for a personal-knowledge-management super-app, built on a near-white canvas with charcoal (#333333) ink and a single rounded geometric typeface (Sen) used for eve…