Document artifact
product-brief.md
This Claude preview uses the extracted tokens in a Claude-native composition: warm cream canvas, calm serif headlines, coral CTAs, chat composition, artifacts, model picker and dark code/product surfaces.
Not generic: the preview is composed as a Claude chat and artifact surface.
Claude uses cream + coral as a counterpoint to cold AI interfaces. The product composition shows prompt composer, assistant response, artifact panel and model picker instead of abstract SaaS cards.
Claude-specific: alongside the chat, a document, code window or structured workspace appears. This is a core pattern of the preview.
Warm, low-noise warnings appear as cream/coral editorial callouts.
Large rounded input, attachment tools and restrained coral send action.
Calm paragraphs, clear hierarchy and warm cards instead of bright blue bubbles.
Compact pill for model selection and project context.
Code, model comparisons and tool output move onto dark navy panels. This gives the warm editorial page a technical counterweight.
Claude-Oberflächen wirken ruhig und arbeitsnah: Projektkontext, Dateien, Connector Tiles und Statuspunkte.
Connected
Code context
Team notes
Uploaded docs
Warm cream canvas, coral action, dark product surfaces, muted editorial text and sparse semantic accents.
#cc785c#141413#3d3d3a#6c6a64#faf9f5#efe9de#e6dfd8#181715#252320#5db8a6#e8a55a#c64545Serif display for the editorial Claude tone, humanist sans for UI, mono for code.
64 / 400 / 1.0548 / 400 / 1.118 / 500 / 1.416 / 400 / 1.55Die Komponenten bleiben dokumentiert, werden aber als Claude UI gerendert.
Copy-paste-fähige CSS-Variablen für den nächsten Agenten oder Frontend-Prototyp.
:root {
--claude-primary: #cc785c;
--claude-primary-active: #a9583e;
--claude-ink: #141413;
--claude-body: #3d3d3a;
--claude-muted: #6c6a64;
--claude-canvas: #faf9f5;
--claude-surface-soft: #f5f0e8;
--claude-surface-card: #efe9de;
--claude-hairline: #e6dfd8;
--claude-surface-dark: #181715;
--claude-surface-dark-elevated: #252320;
--claude-teal: #5db8a6;
--claude-amber: #e8a55a;
--claude-radius-md: 8px;
--claude-radius-lg: 12px;
--claude-radius-xl: 16px;
--claude-section: 96px;
}