Coda — Pricing / Plans
A four-column pricing card layout with monthly/annual toggle switch at the top. Each card has a tier name, description, price, and bulleted feature list. Below is a comparison table showing all tiers side-by-side with detailed feature rows and visual icons for included packs.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/coda-scroll-pinned-overwhelmed-about-work-narrative.
Measured spec
| Scheme | light |
| Background | #FFFFFF |
| Text | #0D3A70 |
| Accents | #0D3A70, #3771A6 |
| Contrast | 11.31 |
| Columns | 1 |
| Alignment | left |
| Whitespace | regular |
| Density | 0.232 |
| Measured size | 1600×3837 px |
Palette
#0052CC#1A1A1A#FFFFFF#F5A623#E8B71A
Fonts
Inter
Page types
Detail
UX patterns
Pricing ToggleData TableFilter & Sorting
UI elements
Pricing CardToggleTableBadge
Context
- Parent page: Coda four-tier pricing page with Maker-Billing model and exhaustive feature comparison matrix
- All of Coda
Other sections on this page
- Hero — Full-width hero with centered headline and CTA
- Feature — Role-based feature comparison with pricing tiers
- Comparison — Pricing tier comparison table with feature rows
- Comparison — Collaboration and Sharing Features Comparison Table
- Comparison — Tiered feature comparison table with four plan levels
- FAQ — FAQ section with expandable accordion questions
- FAQ — Collapsible FAQ about Coda AI pricing and credits
- FAQ — Pricing and billing FAQ accordion
- Footer — Multi-column navigation footer with legal links and social icons