# Design from Reference: WorkOS Dashboard Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** WorkOS - **Category:** Dashboard - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6a4503442b22fb62a9de_6acb694a834771b57d14d768_cms-f0acf92c38b98608ce1b0e95.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:** Developer onboarding dashboard with white surfaces, fine gray dividers, purple actions and colorful feature icons. - **Scale:** Source 2880 × 2846px; dimensions estimate a 1440px-wide CSS layout at 2× capture scale. ### Page composition - **Sidebar:** A roughly 280px rail contains workspace/environment selector, Overview and developer configuration links. - **Opening:** Let's get started introduces a wide Slack-support banner with text/actions left and WorkOS/Slack marks right. - **Configuration:** A two-column region pairs staging credential controls with three numbered implementation steps. - **Lower regions:** Two support/team resources precede a two-column, three-row feature-integration grid. Thin full-width rules separate sections. ### Information hierarchy - **Support:** Create Slack channel and Not right now appear before technical setup. - **Setup:** Client ID/API Key controls accompany steps to store variables, configure redirect URIs and create an organization. - **Resources:** Shared Slack channel and teammate invitation lead into Single Sign-On, Directory Sync, Admin Portal, Audit Logs, Multi-factor Authentication and Magic Link. ### Typography - **Family:** Neutral sans-serif; exact font identity is unverified. - **Roles:** Estimated page title 24px semibold, section headings 20px, resource titles 16px semibold and body 14–16px/22px. - **Secondary text:** Credential labels and helper links use muted gray or violet. ### Colors & surfaces - **Sampled palette:** ICC-aware sRGB samples include white #FFFFFF, pale #FCFCFD, #FEFEFF and #FDFDFF, and dark slate #29333C. - **Accents:** Purple identifies actions and inline links. Feature illustrations add teal, pink, blue and violet. - **Boundaries:** Cards use fine cool-gray outlines, subtle tint and small-to-medium rounding. ### Components - **Slack banner:** Broad rounded outlined panel with compact filled-purple action and secondary text action. - **Credential card:** White bordered rectangle with two labeled gray fields and right-side copy icons; credential values are partially obscured. - **Setup steps:** Small numbered gray circles precede concise instructions and violet links, with information icons at line ends. - **Resource grid:** Colorful approximately 64px square icons sit beside bold titles and short descriptions; small northeast arrows indicate external destinations. - **Environment selector:** Outlined Staging dropdown sits above sidebar navigation; Overview is highlighted with pale-gray fill. ### Visual rhythm - **Section cadence:** Broad gaps and horizontal rules divide support, configuration and integration resources. - **Alignment:** Two-column sections share stable guides; icon/text pairs repeat consistently in the feature grid. ### Responsive - **Recommended adaptation:** Only desktop is observed. Collapse sidebar and stack credential/instruction columns and feature resources. - **Secrets:** Keep copy controls usable and values safely truncated or masked without revealing obscured text. ### Adaptation guidance - **Preserve:** Keep support access, environment configuration and feature integration as separate stages. - **Adapt:** Use real supported features and setup instructions. Never reconstruct or reuse the obscured credentials from the screenshot. 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.