Carta DESIGN.md
Brands
Equity management design with professional navy identity, legal-precision surfaces, clean table hierarchy, and ownership-clarity UX.
At a glance
- Group
- Brands
- Main color
- #1e3a5fBlue design systems
- Fonts
- InterJetBrains Mono
Colors in this file
- #1e3a5f
background
- #ffffff
Unnamed
- #f1f5f9
background
- #e2e8f0
Unnamed
- #142847
Unnamed
- #2563eb
Unnamed
- #059669
Unnamed
- #d97706
Unnamed
- #dc2626
Unnamed
- #f8fafc
Unnamed
Equity management design with professional navy identity, legal-precision surfaces, clean table hierarchy, and ownership-clarity UX.
1. Visual Theme & Atmosphere
Carta should feel precise, professional, and trustworthy. The design language communicates cap tables, equity grants, fund administration, and 409A valuations with legal accuracy and boardroom confidence.
- Mood: precise, authoritative, trustworthy, professional
- Density: high, with stakeholder tables, waterfall models, and equity grant detail
- Character: professional navy brand, white table surfaces, subtle gray hierarchy, green equity confirmation
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--carta-navy | #1E3A5F | Primary brand and CTA |
--carta-navy-dark | #142847 | Hover and table header |
--carta-blue | #2563EB | Secondary actions and links |
--carta-green | #059669 | Equity vested and certificates issued |
--carta-amber | #D97706 | Pending approval and draft |
--carta-red | #DC2626 | Cancelled grants and errors |
--surface-card | #FFFFFF | Table and detail panels |
--surface-bg | #F8FAFC | Dashboard background |
--surface-header | #F1F5F9 | Table header background |
--text-primary | #1E293B | Table data and labels |
--border-default | #E2E8F0 | Table and panel borders |
Use navy for primary navigation and CTAs. Reserve green strictly for vested shares and issued certificates — never as generic success.
3. Typography Rules
css--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Page Title | 32px | 700 | 1.1 |
| Section Title | 22px | 600 | 1.2 |
| Table Header | 13px | 600 | 1.3 |
| Table Body | 14px | 400 | 1.5 |
| Body | 15px | 400 | 1.6 |
| Share Count | 18px | 700 | 1.1 |
| Label | 12px | 600 | 1.35 |
4. Component Stylings
css.button-primary {
min-height: 40px;
padding: 0 16px;
border: none;
border-radius: 6px;
background: #1E3A5F;
color: #FFFFFF;
font: 600 14px/1 Inter, sans-serif;
}
.table-row {
display: grid;
padding: 12px 16px;
border-bottom: 1px solid #E2E8F0;
font: 400 14px/1.5 Inter, sans-serif;
}
.table-header {
padding: 10px 16px;
background: #F1F5F9;
font: 600 12px/1.3 Inter, sans-serif;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.grant-badge {
display: inline-flex;
padding: 2px 10px;
border-radius: 4px;
font: 600 12px/1.5 Inter, sans-serif;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-2 | 8px | Table cell padding |
--space-4 | 16px | Section rhythm |
--space-6 | 24px | Card padding |
--space-10 | 40px | Major section gaps |
Tables are the primary surface — they must be perfectly aligned with clear column hierarchy. Freeze the first column on wide cap tables.
6. Depth & Elevation
css.shadow-table { box-shadow: 0 1px 3px rgba(30, 41, 59, 0.06); }
.shadow-panel { box-shadow: 0 6px 20px rgba(30, 58, 95, 0.10); }
.shadow-modal { box-shadow: 0 20px 50px rgba(30, 41, 59, 0.18); }
Tables should be nearly flat. Reserve stronger shadows for modals with legal actions like grant issuance.
7. Do's and Don'ts
Do align all share counts and percentages to the right in tables. Do use mono font for all share counts and dollar values. Do clearly distinguish authorized, issued, and outstanding shares. Do not use decorative graphics on legal or equity surfaces. Do not hide total share counts behind extra clicks.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Portfolio summary, no complex tables |
| Tablet | 768px | Scrollable cap table, single-column stakeholder list |
| Desktop | 1200px | Full cap table, waterfall, and scenario modeling |
The desktop experience is primary — equity management is fundamentally a desktop workflow.
9. Agent Prompt Guide
Design like Carta: professional navy CTAs, Inter typography, dense precise data tables, mono number formatting, equity-state color coding, and legal-precision financial hierarchy.
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
Elastic
Brands · Inter
Elastic UI (EUI) is Elastic’s public React component framework: its documentation presents themed components, setup guidance, and implementation patterns for software interfaces. The captured EUI home, components…
Calendly
Brands · Inter
Scheduling product design with calm blue trust, clean booking flows, and precise availability selection.
Heptabase
Brands · Instrument Sans
Heptabase is a visual note-taking and knowledge-management app built around an infinite whiteboard of cards, and its marketing site mirrors that product ethos: calm, paper-like, and almost editorial. The canvas is a…
Contentful
Brands · Avenir Next
Headless CMS design with professional blue identity, content-model clarity, structured entry surfaces, and API-first editorial UX.
1Password
Brands · Inter
Identity and access security with a calm, premium SaaS frame. 1Password's public site uses deep indigo and blue gradients, white surfaces, rounded cards, and a modern sans stack to make security feel approachable and…
Box
Brands · Inter
Enterprise content management with white space, blue trust cues, and AI-era document workflows. Box's public site uses bright white canvases, navy-blue accents, structured product cards, and a calm enterprise tone.