# Design from Reference: Context.dev Pricing Page Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Context.dev - **Category:** Pricing Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acacfff7796407cec1417bd_6acacf8fb2165b6c7fff7997_cms-2091c8867454bfc55eb54d8c.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Character:** Technical API pricing page with white plan grid, blue numeric accents and a dramatic black footer. ### Page composition - **Capture:** 2880 × 10314 screenshot pixels; estimated 2× CSS scale. - **Structure:** Announcement/navigation, pricing hero/toggle, four primary plans plus volume guide/Scale/Enterprise row, discount strip, logos, credit-cost table, two-column FAQ and footer. ### Information hierarchy - **Priority:** Plan names/prices/actions lead; credit quotas and feature rows are grouped in gray subpanels. Volume guide helps selection before FAQ. ### Typography - **Families:** Sans serif with monospace volume ranges and serif footer wordmark; exact families unverified. - **Estimated CSS sizes:** Hero 48px, section titles 32–48px, prices 28px, body 14–16px and quota details 12px. ### Colors & surfaces - **Measured palette:** White #FFFFFF, canvas #FAFAFA, subpanels #F7F7F7, footer #0D0D0E/#121213 and blue #278BFF. ### Components - **Elements:** Billing pill, plan icons, blue actions, quota boxes, dotted separators, volume table, API-credit table and rounded plus-icon FAQs. - **Estimated geometry:** Plan grid about 1000px wide, outer radius 16px, 8px actions, 16px subpanel radii and 16px inner padding. ### Visual rhythm - **Spacing:** Dense structured plans transition into airy cost/FAQ sections; oversized footer wordmark closes the page. ### Responsive - **Suggested adaptation:** Stack plans/FAQ columns and keep data tables horizontally scrollable. Mobile behavior is unverified. ### Adaptation guidance - **Transfer:** Preserve quota/overage clarity and volume-based guidance. Use current verified rates and limits. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.