Guides distinctive brand colors, typography, and visual choices. Contains human-first design principles to ensure sites look intentional and memorable.
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.
Create gorgeous micro-interactions and animations using Framer Motion. 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.
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.
Remake and improve existing web pages from URL examples. Use when user provides a URL and asks to "remake", "rebuild", "recreate", or "use as inspiration" for their site. Screenshots the original, analyzes branding, and rebuilds section-by-section.
Section architecture, hero patterns, layout principles, and conversion optimization for marketing landing pages. Ensures strategic, high-converting page structure.
| name | brand-identity |
| description | Guides distinctive brand colors, typography, and visual choices. Contains human-first design principles to ensure sites look intentional and memorable. |
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:
// app/layout.tsx
import { Space_Grotesk, DM_Sans } from 'next/font/google'
const spaceGrotesk = Space_Grotesk({
subsets: ['latin'],
variable: '--font-display',
display: 'swap',
})
const dmSans = DM_Sans({
subsets: ['latin'],
variable: '--font-body',
display: 'swap',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${spaceGrotesk.variable} ${dmSans.variable}`}>
<body className="font-body">
{children}
</body>
</html>
)
}
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
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 |