Dock Activity Analytics

# Design from Reference: Dock Activity Analytics Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Dock - **Category:** Analytics - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad968bd9ce0e960551e20_6acad8dffef6904ce0096efb_cms-88a190804964f2aa65ff3ec1.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:** Clean credential/API activity dashboard with white surfaces and restrained blue navigation cues. ### Page composition - **Canvas:** 2880 × 1836 screenshot px; CSS estimates assume 2× capture. - **Structure:** Pale left sidebar, Activity heading and helper line, outlined transaction-history chart, centered pagination, two-row transaction table and lower test-data management card. A test-mode toggle appears upper right. ### Information hierarchy - **Priority:** Heading and chart precede tabular audit detail. Status checks and timestamps make individual transactions scannable. ### Typography - **Family:** Neutral rounded sans serif, exact font unverified. - **Scale:** Estimated CSS title 36 px, chart heading 24 px, body 14 px and table headers 11–12 px uppercase. ### Colors & surfaces - **Sampled palette:** White #FFFFFF, sidebar #FAFAFA/#F9F9F9, selected row #E7EEFB, borders #E4E4E7, muted fill #F4F4F5 and text #1C2938. ### Components - **Chart:** Flat zero-value lavender line, open-circle endpoints and dotted horizontal grid; no nonzero activity visible. - **Table:** Type, Date, Data and Status columns, truncated technical values, thin row rules and green check icons. - **Geometry:** Estimated CSS sidebar 255 px, content padding 80–90 px, card radius 12 px; selected navigation is pill-shaped. Lower destructive action is a light-gray pill. ### Visual rhythm - **Spacing:** Broad chart interior and approximately 32–40 CSS px between major blocks; compact table rows balance the airy canvas. ### Responsive - **Observed:** Desktop only. - **Adaptation:** Collapse sidebar and allow transaction-data columns to scroll while retaining status/date context. ### Adaptation guidance - **Preserve:** Audit-focused hierarchy, subtle outlines and clear mode/status cues. - **Replace:** Use real transaction data and mode labels; never reproduce technical identifiers from the reference. 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.