Guides distinctive brand colors, typography, and visual choices. Contains human-first design principles to ensure sites look intentional and memorable.
Create gorgeous micro-interactions and animations using CSS and Svelte transitions. Use this skill when adding motion to components, page transitions, scroll animations, or any interactive elements that need polish.
Write human-sounding marketing copy that converts. Contains overused word alternatives, headline formulas, CTA patterns, and tone guidelines for specific, authentic text.
Maintain clear, non-technical documentation for website projects. Use this skill after ANY code change to update SITE.md with what changed. Triggers on file edits, new pages, component changes, or when the user asks about their site. Essential for keeping non-developers informed about their project.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that feels intentional and memorable.
Section architecture, hero patterns, layout principles, and conversion optimization for marketing landing pages. Ensures strategic, high-converting page structure.
Guided discovery flow for new Ship Studio projects. Asks about business, audience, brand personality, and goals to create a personalized SITE.md and build plan.
| name | brand-identity |
| description | Guides distinctive brand colors, typography, and visual choices. Contains human-first design principles to ensure sites look intentional and memorable. |
| user_invocable | true |
| invocation | /brand |
This skill ensures every site has a distinctive, intentional visual identity. It provides guidance for creating memorable designs.
Every site needs exactly three color roles:
:root {
/* 60% - Dominant */
--color-bg: #fafaf9;
--color-text: #1c1917;
/* 30% - Secondary */
--color-secondary: #e7e5e4;
--color-secondary-text: #44403c;
/* 10% - Accent */
--color-accent: #dc2626;
--color-accent-hover: #b91c1c;
}
Use these as STARTING POINTS - always customize:
| Industry | Dominant | Secondary | Accent |
|---|---|---|---|
| Finance/Legal | Slate, Stone | Cool gray | Navy or Forest |
| Health/Wellness | Warm white, Cream | Sage, Soft green | Terracotta, Coral |
| Tech/SaaS | True white, Cool gray | Slate | Electric blue, Violet |
| Food/Restaurant | Cream, Warm white | Terracotta, Olive | Deep red, Orange |
| Creative/Agency | Off-black, Charcoal | Warm gray | Unexpected pop (yellow, magenta) |
| Luxury/Fashion | Pure white, Black | Gold, Champagne | Black or Gold |
| Education | Light cream | Warm gray, Blue-gray | Warm blue, Green |
These fonts work well but are everywhere. Consider whether you need distinction:
Always pair a display font (headings) with a body font:
Modern & Clean:
Elegant & Refined:
Bold & Energetic:
Warm & Approachable:
Creative & Artistic:
Important: All fonts above have been verified on Google Fonts as of January 2026. Click the links to preview and get embed codes.
Always include fallbacks for reliability:
/* Example with fallbacks */
--font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
/* Serif example */
--font-display: 'Playfair Display', ui-serif, Georgia, serif;
--font-body: 'Lato', ui-sans-serif, system-ui, sans-serif;
<!-- src/routes/+layout.svelte -->
<svelte:head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=DM+Sans:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</svelte:head>
/* app.css */
:root {
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'DM Sans', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
}
body {
font-family: var(--font-body);
}
| Common Default | Why Consider Alternatives | Alternative Ideas |
|---|---|---|
#3B82F6 (Tailwind blue-500) | It's the default, so it's everywhere | Pick a unique blue: #2563EB, #1D4ED8, or a non-blue accent |
| Purple-to-blue gradient | Very common pattern | Single color, or unexpected gradient (orange→pink, green→teal) |
| Teal + Coral combo | Overused "modern" palette | Pick ONE and find a neutral complement |
| Rainbow gradients | Can feel unintentional | Two-color max, subtle angle |
Pure #000000 on #FFFFFF | Harsh contrast | Off-black (#1C1917) on off-white (#FAFAF9) |
| Common Pattern | Why Try Alternatives | Alternative Ideas |
|---|---|---|
| 3-column feature grid with icons | Very common, can feel templated | 2-column, asymmetric, or bento grid |
| Centered everything | Predictable | Left-align body, vary section alignment |
| Equal spacing throughout | Can feel mechanical | Vary spacing: tight headers, generous between sections |
| Generic icon set (Heroicons default) | Recognizable as defaults | Phosphor Icons, Lucide with custom stroke, or no icons |
| Pattern | Why It Feels Dated | Alternatives |
|---|---|---|
| Abstract blob SVGs | Was trendy, now overused | Geometric shapes, grain texture, or solid color |
| Wave dividers | 2020 template aesthetic | Hard edges, diagonal slices, or no dividers |
| Gradient mesh backgrounds | Overplayed | Subtle radial gradient, solid color, or photography |
| Grid of dots | Very common | Lines, noise texture, or nothing |
| Generic Choice | Why Consider Alternatives | Better Options |
|---|---|---|
| Handshake stock photos | Meaningless corporate | Real team photos or none |
| Diverse group pointing at laptop | Overused cliche | Action shots or illustrations |
| Abstract 3D shapes | Very common default | Real photos, custom illustration, or typography-focused |
| Floating UI mockups | Template aesthetic | Screenshots in context or no mockups |
When building, CHECK every component against:
| Issue | Fix |
|---|---|
| Looks too "template" | Add asymmetry, vary section layouts |
| Colors feel generic | Commit to ONE bold accent, desaturate the rest |
| Typography feels flat | Increase heading size contrast, add letter-spacing |
| Too much whitespace | Add subtle background texture or tint |
| Too busy | Remove one element from every section |
| Feels corporate | Add one unexpected color or playful element |