design-styles

name	design-styles
description	Use these as reference styles when designing UI for projects or PPT.

When to Use

• User specifies a design style (e.g. "make it look like Stripe" or "Apple style")
• Designer agent needs a reference style for UI design
• Coder needs a DESIGN.md to guide UI implementation

How to Use

1. Find the matching style from the list below
2. Read the reference file: read references/<style>.md
3. Use it as the basis for design.md — adapt colors, typography, components, and layout principles to the project's needs
4. Copy to project if needed: place as DESIGN.md in the project root for coding agents to reference

Available Styles (58)

AI & LLM Platforms

Style	File	Description
Claude	references/claude.md	Warm terracotta accent, clean editorial layout
Cohere	references/cohere.md	Vibrant gradients, data-rich dashboard aesthetic
ElevenLabs	references/elevenlabs.md	Dark cinematic UI, audio-waveform aesthetics
Minimax	references/minimax.md	Bold dark interface with neon accents
Mistral AI	references/mistral.ai.md	French-engineered minimalism, purple-toned
Ollama	references/ollama.md	Terminal-first, monochrome simplicity
OpenCode AI	references/opencode.ai.md	Developer-centric dark theme
Replicate	references/replicate.md	Clean white canvas, code-forward
RunwayML	references/runwayml.md	Cinematic dark UI, media-rich layout
Together AI	references/together.ai.md	Technical, blueprint-style design
VoltAgent	references/voltagent.md	Void-black canvas, emerald accent, terminal-native
xAI	references/x.ai.md	Stark monochrome, futuristic minimalism

Developer Tools & IDEs

Style	File	Description
Cursor	references/cursor.md	Sleek dark interface, gradient accents
Expo	references/expo.md	Dark theme, tight letter-spacing, code-centric
Lovable	references/lovable.md	Playful gradients, friendly dev aesthetic
Raycast	references/raycast.md	Sleek dark chrome, vibrant gradient accents
Superhuman	references/superhuman.md	Premium dark UI, keyboard-first, purple glow
Vercel	references/vercel.md	Black and white precision, Geist font
Warp	references/warp.md	Dark IDE-like interface, block-based command UI

Backend, Database & DevOps

Style	File	Description
ClickHouse	references/clickhouse.md	Yellow-accented, technical documentation style
Composio	references/composio.md	Modern dark with colorful integration icons
HashiCorp	references/hashicorp.md	Enterprise-clean, black and white
MongoDB	references/mongodb.md	Green leaf branding, developer documentation focus
PostHog	references/posthog.md	Playful hedgehog branding, developer-friendly dark UI
Sanity	references/sanity.md	Red accent, content-first editorial layout
Sentry	references/sentry.md	Dark dashboard, data-dense, pink-purple accent
Supabase	references/supabase.md	Dark emerald theme, code-first

Productivity & SaaS

Style	File	Description
Cal.com	references/cal.md	Clean neutral UI, developer-oriented simplicity
Intercom	references/intercom.md	Friendly blue palette, conversational UI patterns
Linear	references/linear.app.md	Ultra-minimal, precise, purple accent
Mintlify	references/mintlify.md	Clean, green-accented, reading-optimized
Notion	references/notion.md	Warm minimalism, serif headings, soft surfaces
Resend	references/resend.md	Minimal dark theme, monospace accents
Zapier	references/zapier.md	Warm orange, friendly illustration-driven

Design & Creative Tools

Style	File	Description
Airtable	references/airtable.md	Colorful, friendly, structured data aesthetic
Clay	references/clay.md	Organic shapes, soft gradients, art-directed layout
Figma	references/figma.md	Vibrant multi-color, playful yet professional
Framer	references/framer.md	Bold black and blue, motion-first, design-forward
Miro	references/miro.md	Bright yellow accent, infinite canvas aesthetic
Webflow	references/webflow.md	Blue-accented, polished marketing site aesthetic

Fintech & Crypto

Style	File	Description
Coinbase	references/coinbase.md	Clean blue identity, trust-focused, institutional feel
Kraken	references/kraken.md	Purple-accented dark UI, data-dense dashboards
Revolut	references/revolut.md	Sleek dark interface, gradient cards, fintech precision
Stripe	references/stripe.md	Signature purple gradients, weight-300 elegance
Wise	references/wise.md	Bright green accent, friendly and clear

E-commerce & Consumer

Style	File	Description
Airbnb	references/airbnb.md	Warm coral accent, photography-driven, rounded UI
Pinterest	references/pinterest.md	Red accent, masonry grid, image-first
Spotify	references/spotify.md	Vibrant green on dark, bold type, album-art-driven
Uber	references/uber.md	Bold black and white, tight type, urban energy

Automotive

Style	File	Description
BMW	references/bmw.md	Dark premium surfaces, precise German engineering aesthetic
Ferrari	references/ferrari.md	Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
Lamborghini	references/lamborghini.md	True black cathedral, gold accent, monumental display type
Renault	references/renault.md	Vivid aurora gradients, zero-radius buttons
Tesla	references/tesla.md	Radical subtraction, cinematic full-viewport photography

Tech & Media

Style	File	Description
Apple	references/apple.md	Premium white space, SF Pro, cinematic imagery
IBM	references/ibm.md	Carbon design system, structured blue palette
NVIDIA	references/nvidia.md	Green-black energy, technical power aesthetic
SpaceX	references/spacex.md	Stark black and white, full-bleed imagery, futuristic

Each DESIGN.md Contains

Section	What it captures
Visual Theme & Atmosphere	Mood, density, design philosophy
Color Palette & Roles	Semantic name + hex + functional role
Typography Rules	Font families, full hierarchy table
Component Stylings	Buttons, cards, inputs, navigation with states
Layout Principles	Spacing scale, grid, whitespace philosophy
Depth & Elevation	Shadow system, surface hierarchy
Do's and Don'ts	Design guardrails and anti-patterns
Responsive Behavior	Breakpoints, touch targets, collapsing strategy
Agent Prompt Guide	Quick color reference, ready-to-use prompts

Adding New Styles

cd /tmp && npx getdesign@latest add <style-name>
cp /tmp/<style-name>/DESIGN.md ~/.openclaw/teams/dev/skills/design-styles/references/<style-name>.md

Then update this SKILL.md with the new entry.