# Design from Reference: Forest Admin 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:** Forest Admin - **Category:** Pricing Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad3fdc910b3adf9e48a63_6acad177b2165b6c7fffbfb5_cms-840462aa3e5af3de1c84f672.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 - **Style:** Editorial pricing page mixing elegant serif headings with rounded geometric sans-serif interface/body text. - **Palette:** Dark olive, fresh lime, warm off-white and white create a distinctive restrained brand. - **Structure:** A dark pricing hero leads into a long feature matrix, softly filled capability blocks, testimonial, security panel, FAQ and footer. ### Page composition - **Canvas:** Source 2258 × 11068 pixels, inspected throughout in five crops at 1400px width. Geometry uses inspection pixels; exact CSS scale is unverified. - **Header:** Narrow rounded outlined navigation shell, centered at roughly x117–1283. - **Pricing hero:** Nearly full-width dark olive rounded panel. Intro copy sits left; billing switch and two white plan cards sit right. - **Comparison:** Centered heading/copy introduce a roughly 1142px-wide three-column table with feature labels and Scale/Control columns. - **Capabilities:** A warm off-white rounded region contains centered introduction and six icon-led groups in a three-column, two-row grid. - **Trust:** Large centered testimonial over a faint dot field precedes a dark olive security panel with three columns. - **Ending:** Split FAQ, centered pale CTA panel and a broad warm footer with brand, eight link groups, badges and legal links. ### Information hierarchy - **Hero:** Serif benefit statement leads to two plan choices, one with a numeric starting price and one with custom pricing. - **Billing:** Monthly is highlighted in a compact Monthly/Annually switch with adjacent annual-saving text. - **Plan cards:** Serif plan name/price, short description, three feature lines and bottom action. - **Matrix:** Group headers organize governance, build, run, manage, embed, security, developer, support and enhancement features. - **Lower sequence:** Workflow capabilities, testimonial, security reassurance, FAQ and final demo invitation provide progressively broader supporting context. ### Typography - **Hero/section headings:** Serif around 36px regular, approximately 40px line height. - **Plan names/prices:** Around 30–36px serif; feature and matrix-group headings around 22–25px serif. - **Body/interface:** Approximately 15–16px rounded sans serif, around 22px line height. - **Navigation/buttons:** Around 14px medium; table cells around 15px. - **Testimonial:** Approximately 36px serif with about 44px line height and mixed gray/dark emphasis. Exact font families are unverified. ### Colors & surfaces - **Measured palette:** #FFFFFF white, #F9F7F5 warm panel/footer fill, #1B2207 deep olive and #E9E6DF thin border tone. - **Measured accents:** #D0EE89 and #D7EC95 lime controls/decorative marks. - **Foreground:** Dark olive headings contrast with muted olive-gray body copy; dark panels switch to white/soft pale text. - **Surface treatment:** Thin warm outlines, large rounded section shells and minimal shadowing keep the page calm. ### Components - **Navigation shell:** Approximately 1166 × 55px with 15px radius and fine outline; lime demo action and outlined free-start action sit right. - **Plan cards:** Approximately 364 × 383px, around 22px radius and 23px padding; white surfaces on olive. - **Billing switch:** Small white rounded segmented control, lime selected segment and adjacent saving note. - **Table:** Three roughly equal columns, thin warm rules, rounded outer corners and about 42px row height; group rows span all columns. - **Availability markers:** Lime checkmarks, pale gray crosses and Add-ons labels distinguish cell types. - **Capability tiles:** Borderless cells divided by fine rules, small outlined icon boxes, serif titles and short paragraphs. - **FAQ:** Four collapsed ruled rows with right arrows; answers are not visible. - **Footer:** Brand/social cluster at left, link groups arranged in two tiers, and four small compliance/privacy marks along the bottom. - **Capture artifacts:** Repeated lime circular floating controls appear along the long screenshot; treat these as repeated captures of an overlay, not a series of inline content components. ### Visual rhythm - **Hero:** Wide outer gutters and generous intro/card separation; plan actions align near card bottoms. - **Table cadence:** Repetitive rows and full-width category breaks make the long comparison scannable. - **Section gaps:** Around 80–110px separates large blocks, with substantial padding inside rounded panels. - **Grid cadence:** Equal-width capability/security columns share icon/title/body alignment. - **Footer rhythm:** Broad spacing separates upper navigation groups, lower groups and legal/badge row. ### Responsive - **Observed scope:** Desktop only; billing changes and FAQ expansion are unverified. - **Recommended hero:** Stack intro and plans, with billing switch directly above cards. - **Recommended table:** Preserve feature/plan relationships through horizontal scrolling or a deliberate mobile comparison view. - **Recommended lower grids:** Collapse three-column regions to single columns and stack FAQ heading above rows. - **Recommended footer:** Reflow link groups and badges while keeping legal text readable. ### Adaptation guidance - **Preserve:** Serif/sans contrast, olive/lime palette, two-plan comparison and restrained warm borders. - **Data fidelity:** Populate pricing, feature availability, claims and badges from supplied current information. - **Implementation:** Use semantic table headers and category rows, with accessible availability labels beyond check/cross icons. - **Interaction:** Define billing, FAQ and demo states explicitly; keep floating utilities clear of comparison content. 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.