Convex DESIGN.md
Brands
Backend platform design with playful technical energy, real-time data clarity, and AI-agent-ready product surfaces.
At a glance
- Group
- Brands
- Main color
- #ff6a3dRed design systems
- Fonts
- InterSF Mono
Colors in this file
- #ff6a3d
Unnamed
- #111827
Unnamed
- #eaddd2
Unnamed
- #7c3aed
Unnamed
- #2563eb
Unnamed
- #fff8f3
Unnamed
- #ffffff
Unnamed
- #16a34a
Unnamed
- #15803d
Unnamed
Backend platform design with playful technical energy, real-time data clarity, and AI-agent-ready product surfaces.
1. Visual Theme & Atmosphere
Convex should feel like a modern backend that keeps app state live without backend boilerplate. The design should support functions, tables, agents, sync, auth, deployments, logs, and schema clarity.
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--convex-orange | #FF6A3D | Primary brand/action accent |
--convex-purple | #7C3AED | AI / function accent |
--convex-ink | #111827 | Text and dark panels |
--convex-blue | #2563EB | Links and info |
--surface-page | #FFF8F3 | Warm page field |
--surface-card | #FFFFFF | Cards and panels |
--border-default | #EADDD2 | Warm borders |
--success | #16A34A | Healthy deployment |
3. Typography Rules
css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 58px | 700 | 1.05 |
| Page Title | 40px | 700 | 1.12 |
| Section Title | 30px | 650 | 1.2 |
| Function Title | 20px | 650 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Code | 13px | 500 | 1.55 |
4. Component Stylings
css.button-primary { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid #FF6A3D; background: #FF6A3D; color: #fff; font: 600 14px/1 Inter, sans-serif; }
.function-card { border: 1px solid #EADDD2; border-radius: 16px; background: #fff; padding: 18px; }
.data-panel { border-radius: 14px; background: #111827; color: #fff; padding: 16px; font: 500 13px/1.55 "SF Mono", monospace; }
.live-badge { background: rgba(22, 163, 74, 0.12); color: #15803D; border-radius: 999px; padding: 6px 10px; }
5. Layout Principles
Organize around project, functions, data, schema, auth, deployment, and logs. Keep real-time state and agent backend capabilities visible.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 8px 18px rgba(17, 24, 39, 0.07); }
.shadow-panel { box-shadow: 0 20px 48px rgba(17, 24, 39, 0.14); }
7. Do's and Don'ts
Do make backend state feel live and understandable. Do show code and data together. Do not make it feel like a generic database console.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stack data/function panels |
| Tablet | 768px | Two-column builder views |
| Desktop | 1200px | Full console with data, logs, and function navigation |
9. Agent Prompt Guide
Design like Convex: warm real-time backend UI, orange primary action, function cards, dark data/code panels, live state badges, and AI-agent backend clarity.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Retool
Brands · Inter
Retool is the platform for building internal tools fast — the admin panels, dashboards, and operational apps that companies used to hand-code for months. Its visual identity is unapologetically built for developers,…
Hotjar
Brands · Inter
Behavior analytics design with warm coral identity, heatmap visualization surfaces, session-replay clarity, and user-empathy UX.
Replit
Brands · ABC Diatype
Browser IDE and AI app-building design with vivid orange identity, clean coding surfaces, and practical workspace ergonomics.
Auth0
Brands · Inter
Identity and authentication platform with a clean enterprise aesthetic — dark navy brand, orange accents, and security-infrastructure UI patterns.
DuckDuckGo
Brands · Inter
Privacy search and browser design with friendly orange identity, clean utility surfaces, and no-tracking clarity.
Brave
Brands · Poppins
Privacy browser design with official orange identity, dark neutral contrast, Poppins typography, and protective browsing surfaces.