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

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.