# Design from Reference: Claude Skeleton Screen Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Claude - **Category:** Loading Screen - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/69971c43880099097a2be7c9_tDWhXy5xYrUSSj4kDpKnXuSbVnCoJtpSqO45Svix4OY.avif 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:** Warm neutral analytics skeleton with ivory surfaces, muted placeholder blocks and an otherwise fully rendered console shell. - **Scale:** Source 2880 × 2600px; sizes estimate a 1440px-wide CSS layout at 2× capture scale. ### Page composition - **Sidebar:** A roughly 256px rail groups Build, Analytics, Claude Code and Manage links, with documentation/account controls at the bottom. - **Header:** Claude Code title sits left; a month selector with previous/next arrows sits right. - **Analytics grid:** Two compact metric cards form the first row; Activity and Spend chart placeholders form a larger second row. - **Lower section:** An outlined spend-information notice precedes a broad Team table with search, Export and skeleton rows. ### Information hierarchy - **Loading state:** Card labels remain readable while values, chart areas and member data are represented by neutral blocks. - **Metrics:** Lines of code accepted and Suggestion accept rate appear above Activity and Spend. - **Team context:** Members, Spend this month and Lines this month headings define the table; no real member values are shown. ### Typography - **Families:** Serif console wordmark contrasts with sans-serif interface text; exact font identities are unverified. - **Roles:** Estimated page title 26px, card labels/body 14px, sidebar links 14px and uppercase group labels 12px. - **Placeholders:** Skeleton bars contain no text; their lengths communicate future content roles rather than actual values. ### Colors & surfaces - **Sampled palette:** ICC-aware sRGB samples include #F0EEE6, #F5F4ED, #E8E6DC, #FAF9F5 and related warm neutrals #E9E7DD and #EAE8DF. - **Contrast:** Dark ink is reserved for labels, selected navigation and Export; placeholders are only slightly darker than cards. - **Depth:** Flat rounded containers and thin borders avoid distracting shadows. ### Components - **Metric cards:** Two equal pale rounded rectangles with label and short horizontal skeleton bar. - **Chart cards:** Large rounded surfaces with an inset solid rectangular placeholder below each label. - **Team table:** Broad pale card with title, white search field, dark Export button and three columns of repeated rounded skeleton bars. - **Notice:** Thin outlined horizontal message with information icon and underlined cost-dashboard link. - **Month control:** Compact warm-gray outlined rectangle with date label and opposing chevrons. ### Visual rhythm - **Grid:** Two equal columns and consistent gaps stabilize the upper dashboard. - **Rows:** Team placeholders repeat at regular intervals, with long member bars and short numeric bars aligned in columns. - **State consistency:** Loaded labels/navigation contrast with uniformly empty data regions. ### Responsive - **Recommended adaptation:** Only desktop is observed. Collapse navigation, stack metric/chart cards and allow the team table to scroll horizontally. - **Loading behavior:** Preserve final-layout dimensions to minimize layout shift; animation cannot be verified from this still image. ### Adaptation guidance - **Preserve:** Keep a recognizable dashboard structure while data loads, with consistent placeholder shapes by content role. - **Adapt:** Match skeleton dimensions to the real final content. Do not infer metric values, team members or animation from static placeholders. 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.