# Design from Reference: NewsCatcher Usage Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** NewsCatcher - **Category:** Usage - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad0de5af75170c4bbe21c_6acad06f8b7c605a8f56cbf2_cms-67ee7ea3dccdac67f35c2848.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:** Light API-usage dashboard with pale cool-gray workspace, white bordered panels and vivid blue metrics/actions. - **Visual emphasis:** A large credit number, two quota bars and a sparse daily chart establish usage at a glance. - **Scale:** The source measures 2880 × 2408 image px. Dimensions below estimate a 1440 × 1204 CSS layout at 2× scale; device ratio and zoom are unverified. ### Page composition - **Sidebar:** A roughly 255 CSS px rail groups events/news API destinations and management links, with account context bottom. - **Header:** Usage title left and two API tabs right. - **Summary:** A wide white panel pairs available-credit total left with active-monitor/concurrency bars right; a blue credit-purchase action sits upper right. - **Daily chart:** A second panel contains API-key/date filters and a large chart with one tall blue bar near the right edge. - **Request logs:** A lower panel contains filters, export control and a single visible table row. ### Information hierarchy - **Scope:** Events API is selected in the header; Usage is selected in the sidebar. - **Credits:** A large numeric total dominates the summary. - **Quota:** Labeled bars show monitor slots and job concurrency with explicit fractions. - **History:** Daily usage precedes detailed request logs. - **Actions:** Get more credits and Export are separate controls; neither is activated. ### Typography - **Family:** Neutral sans-serif; exact identity is unverified. - **Title:** Approximately 26–28 CSS px bold. - **Credit metric:** Roughly 50–54 px, heavy and tightly tracked. - **Panel headings:** About 17–18 px bold. - **Body/controls:** Around 14 px; small uppercase API tabs use tracked monospace-like lettering. - **Table:** Compact 14 px labels/values with a blue identifier link. ### Colors & surfaces - **Measured base:** ICC-aware sRGB sampling yields #FEFFFF, #FFFFFF and #F4F7FA. - **Measured accent:** Blue #173FD8 appears in action/chart treatment. - **Measured pale accents:** #E6E5F1 and #E8ECFB define selection/borders; #D2E2FF appears in a quota track. - **Foreground:** #000000 appears in strong text. - **Status:** Orange marks the full concurrency bar, while blue marks usage; labels provide meaning. ### Components - **Sidebar selection:** A pale lavender-blue rectangle highlights Usage with blue icon/text. - **Summary split:** A thin vertical rule divides credit total from quota bars. - **Quota bars:** Two long rounded tracks have labels and fractions above. - **Filters:** Outlined API-key dropdown and date-range field with calendar icon sit side by side. - **Chart:** A sparse baseline/date axis and one saturated blue bar fill the large plotting region. - **Logs table:** Fine pale borders frame six columns; one row contains timestamp, source chip, identifiers, credits and API-key source. - **Support:** A small black circular chat control floats near the lower right. ### Visual rhythm - **Panel spacing:** Consistent roughly 24 px gaps separate major white regions. - **Alignment:** Header and panels share a main content left axis. - **Density:** Sparse top chart contrasts with compact table details below. - **Inset:** Generous padding keeps filters/metrics away from panel edges. ### Responsive - **Evidence limit:** Only desktop is shown; recommendations follow. - **Shell:** Collapse sidebar and wrap API tabs. - **Summary:** Stack credit/quota groups. - **Charts/tables:** Preserve readable axes and allow horizontal scrolling for logs. - **Filters:** Wrap controls without reducing touch targets. ### Adaptation guidance - **Reusable pattern:** Separate credit balance, quota saturation, usage trend and request-level history. - **State clarity:** Keep date ranges/API scope explicit and distinguish balances from consumed amounts. - **Accessibility:** Use semantic table/chart summaries and label all filters/icons. - **Data discipline:** Treat displayed numbers as captured examples, not current account state. 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.