Style Tile

When to Use This Skill

Use this skill when you need to:

Establish visual direction for a web design project before full mockups
Align stakeholders on design aesthetic without building complete pages
Bridge the gap between brand guidelines and actual web implementation
Give a designer or developer clear direction for UI styling

DO NOT use this skill for wireframing, full page mockups, or brand identity creation. Style tiles sit between brand guidelines and page design — they define the visual feel without committing to layout.

Core Principle

A STYLE TILE SHOWS HOW THE BRAND FEELS ON SCREEN — IT ANSWERS "WHAT WILL THIS LOOK LIKE?" WITHOUT DESIGNING EVERY PAGE.

Phase 1: Brief

Required Inputs

Input	What to Ask	Default
Project	"What web project is this for? (new site, redesign, landing page)"	New website
Brand adjectives	"Describe the desired feel in 3-5 adjectives."	Must be provided
Target audience	"Who will use this site?"	Must be provided
Reference sites	"Share 3-5 websites you admire visually and why."	Must be provided
Anti-references	"Share 1-2 sites that feel wrong for your brand."	None
Existing brand assets	"Logo, colors, fonts — what do you have?"	Logo and basic colors

GATE: Confirm brief before creating style tile specifications.

Phase 2: Design

Style Tile Components

A complete style tile includes specifications for:

Color palette — primary, secondary, accent, neutrals with hex codes
Typography — heading font, body font, size scale, weight variations
Button styles — primary CTA, secondary, ghost/outline, hover states
Form elements — input fields, dropdowns, checkboxes, error states
Card/container styles — border radius, shadow depth, background treatment
Image treatment — photo style, overlay treatment, border or mask shapes
Iconography style — line weight, style reference, size
Texture/pattern — background patterns, subtle textures, gradients
Mood adjectives — 3-5 words that capture the target feeling

Typography Scale

Define a type scale with exact values:

Display: 48-64px
H1: 36-48px
H2: 28-36px
H3: 22-28px
Body: 16-18px
Small/Caption: 12-14px
Line height: 1.4-1.6 for body, 1.1-1.2 for headings

GATE: Present the style tile specification and wait for feedback. Iterate until the direction is approved.

Phase 3: Build

Deliverables

1. Style Tile Document

Complete specification for every visual element listed above
Organized in a single-page reference format
Includes hex codes, font names, pixel values, and border radius values

2. CSS Design Tokens

Variables list ready for implementation:
- --color-primary: #XXXX
- --font-heading: 'Inter', sans-serif
- --radius-default: 8px
- --shadow-card: 0 2px 8px rgba(0,0,0,0.1)

3. Component Style Specs

Button: padding, font size, border radius, background color, hover state
Card: padding, border, shadow, border radius
Input: height, border, focus state, error state
Link: color, underline treatment, hover state

4. Mood Board Reference

5-8 reference images capturing the target aesthetic
Notes on what to take from each reference (typography from this one, spacing from that one)

Phase 4: Polish

Design Handoff

Package the style tile for the person implementing it:

For designers: Figma-ready specifications with component descriptions
For developers: CSS variables and utility class suggestions
For page builders: color codes and font names formatted for Webflow, WordPress, or Squarespace

Iteration Protocol

Style tiles are meant to be iterated. Present up to 3 directions if the first does not land. Each iteration adjusts based on specific feedback ("warmer colors," "more whitespace," "bolder typography").

Example 1: Bold SaaS Startup

Adjectives: Bold, modern, confident, energetic. Colors: Deep navy (#0F1729), electric blue (#3B82F6), white, warm gray. Typography: Inter Bold for headings, Inter Regular for body. Buttons: Rounded (8px radius), solid blue, white text, subtle shadow on hover. Cards: White with 1px border, 12px radius, light shadow.

Example 2: Warm Lifestyle Brand

Adjectives: Warm, organic, inviting, refined. Colors: Terracotta (#C2725A), cream (#FFF8F0), sage (#6B8F71), charcoal (#2D3436). Typography: Playfair Display for headings, Source Sans Pro for body. Buttons: Pill-shaped (full radius), terracotta fill, cream text. Cards: Cream background, no border, subtle warm shadow, 16px radius.

Anti-Patterns

Style tile as final design — it shows direction, not layout. Do not expect it to replace mockups.
Too many options at once — presenting 5 style directions creates decision paralysis. Maximum 2-3 options.
No interactive states — buttons without hover states and inputs without focus states leave gaps for implementation.
Vague specifications — "modern font" is not actionable. Include the exact font name, weight, and size.
Skipping anti-references — knowing what the client does NOT want is as valuable as knowing what they do want.

Recovery

Client cannot articulate the desired feel: Use a preference test — show 5 diverse website screenshots and ask for gut reactions (love/hate/neutral).
Style tile rejected: Ask which specific elements feel wrong. Often it is one thing (color too cold, font too formal) not the whole direction.
Cannot agree on direction: Create two contrasting style tiles (e.g., bold vs. minimal) and let the contrast clarify the preference.
Style tile looks good but does not translate to pages: Bridge the gap with a single sample section (hero area) using the style tile elements before committing to full page design.