claude-style

name

claude-style

description

Apply the ClawHQ / Claude.ai-inspired design system to any web project. Use when: restyling an existing dashboard or web page to match ClawHQ's visual style, unifying multiple web tools under a consistent look, or building a new web UI from scratch in this style. Triggers on phrases like 'apply Claude style', 'make it look like Claude.ai', 'unify to Claude.ai style', 'apply our design system', 'restyle this dashboard', 'same style as clawhq'.

clawhq-style

Applies the ClawHQ design system — a Claude.ai-inspired aesthetic — to web projects. Key traits: warm cream background, terracotta accent, flat solid cards, clean sticky header, Anthropic font stack, no glassmorphism orbs.

Design System Summary

Full token reference and component patterns: references/design-tokens.md Ready-to-use base CSS (copy into project): assets/base.css

Workflow

1. Assess the target project

Identify:

• Where CSS lives (inline <style>, external .css, CSS-in-JS, Tailwind, etc.)
• Existing color/font variables (if any)
• Key components to restyle: header, cards, progress bars, badges, lists, code blocks

2. Inject design tokens

Replace or override the project's CSS variables with the ClawHQ token set from references/design-tokens.md.

For projects with no existing variable system, copy assets/base.css as the foundation.

3. Restyle components

Priority order:

1. Body + background — set background: var(--bg), font-family: var(--font), color: var(--text-primary), -webkit-font-smoothing: antialiased
2. Header — sticky, full-width, border-bottom: 1px solid var(--border), 56px height, no blur/glass
3. Cards — background: var(--surface), border: 1px solid var(--border), border-radius: var(--radius), warm box-shadow, -1px translateY hover lift
4. Card titles — 11px, 600 weight, uppercase, letter-spacing: 0.6px, color: var(--text-tertiary)
5. Accent numbers / hero stats — font-family: var(--font-serif), large size, color: var(--accent)
6. Progress bars — warm-tinted track, accent fill, warn/danger states
7. Badges / pills — background: rgba(180,130,80,0.10), border-radius: 20px
8. Status dots — pulsing animation for online state

4. Remove anti-patterns

Strip or disable:

• Background orbs / radial gradients on body
• backdrop-filter: blur() on cards (Claude.ai uses flat, not glass)
• Heavy box-shadows or dark overlays
• Noise/texture overlays on background

5. Verify result

Compare against ClawHQ at clawhq.ylongwang.top. Key checkpoints:

• Body background is warm cream (not pure white or gray)
• Cards are visibly separated by border + subtle warm shadow (not floating glass)
• Header is a clean bar flush to top
• Big numbers use serif font
• Accent color (terracotta) is used sparingly for active/highlight states