Skip to content
UXClaim
Design Systems

CraftedStays Design System

Complete visual system for CraftedStays brand—colors, typography, components, icons, and Claude Code integration.

View source More in Design Systems

What it is

CraftedStays Design System is a locked, portable visual language for all CraftedStays brand surfaces—marketing site, dashboard UI, emails, and collateral. It’s not for client homepages (those have per-client systems); this governs CraftedStays’ own brand only.

How it works

The system lives in a single DESIGN.md source-of-truth document structured in 9 sections: visual theme, colors, typography, components, layout, depth, do/don’ts, responsive rules, and AI agent prompts. Supporting files include an icon library spec (Lucide only, 6-color rotation), a live HTML exemplar showing every component, variable Outfit fonts, and a Claude Code skill for instant access.

Key specs

Colors: Warm cream background (#F7F4ED), purple (#6B3795) + coral (#E75A69) primary palette, icon rotation across six colors.

Type: Outfit typeface only—weights 400/480/500/600/700.

Components: Hairline borders (no shadows), inset-shadow button stacks, 32px Lucide icons at card top-left, gradient emphasis text for 2–4 word focal phrases.

Who benefits

Design teams using Claude Design, Claude Code, or other AI tools needing a complete, AI-friendly brand spec. Non-technical stakeholders can read DESIGN.md as a brief. Human designers get exemplar.html as a finished reference.

Frequently asked questions

What is the CraftedStays Design System?
A locked visual system defining all brand surfaces for CraftedStays—marketing, product UI, emails, collateral. It includes color palettes, typography rules, component specs, icon guidelines, and integration with Claude Code and Claude Design. The system is internal to CraftedStays and does not apply to client homepages.
How do I use it in Claude Design?
Go to claude.ai/design → Create new design system. Link the GitHub repo or drag-drop DESIGN.md, iconography.md, exemplar.html, and fonts/ folder. Paste brand notes from DESIGN.md into 'Any other notes?' Every prototype you create will auto-inherit the system.
How do I install the Claude Code skill?
Clone the repo, then run: `mkdir -p ~/.claude/skills/craftedstays-design && cp skill/SKILL.md ~/.claude/skills/craftedstays-design/ && cp -R skill/references ~/.claude/skills/craftedstays-design/` In any Claude Code session, describe what you need (e.g., 'build a CraftedStays pricing page') and the skill auto-triggers.
Can I use this for client brand sites?
No. This system is exclusively for CraftedStays' own brand. Client homepages have their own per-client brand systems. Do not mix the two.
What colors and fonts does the system use?
Primary colors: purple #6B3795, coral #E75A69, warm cream background #F7F4ED. Typography: Outfit font family (weights 400/480/500/600/700) only. Icon palette rotates across six colors: purple, coral, orange, teal, navy, red.
Where is the source of truth?
DESIGN.md is the canonical spec. It contains 9 sections covering visual theme, colors, typography, components, layout, depth, do/don'ts, responsive rules, and AI agent prompts. Update DESIGN.md first, then update supporting files and re-sync to Claude Design and Claude Code.
Can I use this in other AI tools like Cursor or Lovable?
Yes. Paste DESIGN.md into the tool's system prompt, project rules, or context field. The 9-section structure is portable across Cursor, Lovable, Stitch, and other AI coding/design tools.
What does the exemplar.html file show?
exemplar.html is a finished reference page that exercises every component in the system—buttons, cards, typography, icons, layout patterns, and more. Open it in any browser to see the system in action and use it as a design touchstone.

Glossary

Source of truth
A single authoritative document (DESIGN.md) that defines all design decisions. When updates happen, this document is modified first, then changes propagate to other tools and files.
Icon palette rotation
A repeating sequence of six colors (purple, coral, orange, teal, navy, red) applied to icon sets in consistent order. Ensures visual variety without clashing with the brand.
Hairline border
A thin, minimal border (usually 1px) used instead of drop shadows to define card and component edges. Creates a cleaner, more spacious visual hierarchy.
Inset-shadow button stack
A button style using layered inset shadows (rather than outer shadows) to create depth and tactile feedback. Defined in DESIGN.md § 4.
Claude Code skill
A packaged reference file that gives Claude Code agents automatic access to design system rules. Once installed in ~/.claude/skills/, it auto-triggers when you describe design tasks.

More in Design Systems

All →
Design Systems

Claude Code Agent Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language briefs.

MichelSR25
Design Systems

Claude Code Design Kit

AI-powered multi-agent design system generator that creates production-ready UI components, design tokens, and documentation from natural language descriptions.

MichelSR25
Design Systems

Claude Design Studio Toolkit

AI-powered design co-pilot with responsive UI engine, design tokens, accessibility validation, and multi-agent workflows for code-first design teams.