Component Development Skill

Staylook Components: Curved, Semantic, and Hierarchical

What is it?

This skill covers building individual Staylook UI components—buttons, cards, inputs, badges, modals, and typography. It focuses on creating reusable, atomic components that follow the design system's semantic tokens, radius hierarchy, and state progressions.

Note: For assembling components into complete pages and platforms, see the Platform Building skill.

Why use it?

•Semantic Consistency: All components use Standard/Expressive color roles
•Visual Hierarchy: Radius nesting creates clear structure
•Intensity Progression: Muted → Calm → Vibrant for all states
•Premium Aesthetic: Curved, pill-shaped buttons and editorial spacing
•Accessibility: WCAG AA compliant with proper contrast
•Reusability: Create atomic components for use across the platform

Part 1: Button Hierarchy System

The Three Button Priorities

Implement a clear three-tier button system:

Priority 1: Expressive Button (THE Main Action)

•Purpose: The single most important action on the page
•Color: Use Expressive (accent) color
•Budget: Maximum 1 per screen or section
•Examples: "Get Started", "Publish", "Complete Purchase", FAB buttons
•Shape: ALWAYS pill-shaped (border-radius: 9999px)
•Visual Weight: Filled, high contrast, shadowed
•States: Hover darkens, active adds slight press effect

Priority 2: Standard Button (Secondary Actions)

•Purpose: Supporting actions, default choice
•Color: Use Standard (--color-text) color with outline
•Budget: Unlimited usage
•Examples: "Cancel", "Save Draft", "Continue", "Back"
•Shape: ALWAYS pill-shaped (border-radius: 9999px)
•Visual Weight: Outlined or subtle fill
•States: Hover increases border contrast, active changes background subtly

Priority 3: Ghost Button (Tertiary Actions)

•Purpose: Optional or dismissive actions
•Color: Use Standard (--color-text-secondary) color, transparent background
•Budget: Unlimited usage
•Examples: "Skip", "Maybe Later", "Dismiss", "Learn More"
•Shape: ALWAYS pill-shaped (border-radius: 9999px)
•Visual Weight: Minimal, text-only with hover background
•States: Hover adds subtle background, active slightly darker

Button Sizing Guidelines

Define three standard button sizes:

Small:

•Padding: 8px × 16px (space-2 × space-4)
•Font size: text-sm
•Use for: Inline actions, dense interfaces

Medium (Default):

•Padding: 12px × 24px (space-3 × space-6)
•Font size: text-base
•Use for: Most standard actions

Large:

•Padding: 16px × 32px (space-4 × space-8)
•Font size: text-lg
•Use for: Hero sections, primary CTAs

Button Implementation Rules

When creating buttons:

•Always use pill shape - Set border-radius to 9999px or "full"
•Choose correct priority - Expressive for THE action, Standard for supporting, Ghost for tertiary
•Respect the budget - Never more than 1 Expressive per screen
•Apply proper states - All buttons need hover, active, focus, and disabled states
•Use semantic tokens - Never hardcode colors
•Add focus indicators - 2px outline with 2px offset for keyboard navigation

Part 2: Card Component Patterns

Card Structure

Build cards with this anatomy:

Base Card:

•Border radius: 16px (--radius-card)
•Background: Muted surface (#FFFFFF)
•Border: 1px solid Muted or Calm border
•Shadow: Muted shadow (subtle)
•Padding: 20px (space-5)

Optional Sections:

•Header: Optional top section with title/actions
•Body: Main content area
•Footer: Optional bottom section with actions/metadata

Card Variants

Create these card types:

Standard Card

•Use on Calm (#FAFAFA) page backgrounds
•Muted (#FFFFFF) surface makes it "pop"
•Subtle border and shadow
•Non-interactive, static display

Interactive Card

•Responds to hover and click
•
Progressive states using intensity scale:
- •Resting: Muted surface, Muted border, Muted shadow
- •Hover: Calm border, Calm shadow, slight lift (-2px translateY)
- •Active: Calm surface, Muted shadow, no lift
•Add cursor pointer
•Include focus state for keyboard navigation

Outlined Card

•Stronger border (Calm instead of Muted)
•No shadow
•Use when cards need more definition

Elevated Card

•No border
•Stronger shadow (Calm instead of Muted)
•Hover increases shadow to Vibrant
•Use for prominent content

Expressive Card (Use Sparingly)

•Background: Accent-light color
•Border: Accent color
•Use only when card IS the "One Highlight"

Card Grid Layouts

Arrange cards using:

Auto-fit Grid:

•Minimum card width: 280px
•Cards automatically flow to new rows
•Gap between cards: 16px (space-4)

Fixed Columns:

•2-column: For side-by-side comparisons
•3-column: For dashboards, galleries
•4-column: For dense data displays

Part 3: Input Component Patterns

Standard Input Design

Build inputs with:

Visual Design:

•Border radius: 16px (--radius-input)
•Background: Vibrant surface (#F0F0F0) for depth
•Border: 1px Muted border
•Height: 48px minimum (touch-friendly)
•Font: Base size, sans family

States:

•Resting: Vibrant background, Muted border
•Hover: Calm border (not focused)
•Focus: Muted background (inverts for clarity), Vibrant border, 4px blue glow
•Error: Red border, light red background tint
•Success: Green border, light green background tint
•Disabled: Calm background, muted text, cursor not-allowed, 70% opacity

Input Components

Create these input types:

Text Input:

•Standard single-line input
•Placeholder text uses Ink Muted color
•Label above with space-2 margin

Textarea:

•Multiline input
•Minimum height: 120px
•Vertical resize only
•Same styling as text input

Select Dropdown:

•Appears like text input
•Chevron icon on right
•Custom dropdown styling matches modal radius (24px)

Checkbox/Radio:

•20px × 20px size
•Rounded (checkbox: 4px, radio: full circle)
•Checked state uses Expressive color (when it's THE selection)
•Otherwise use Standard color

Input Label Pattern

Always include labels:

•Font weight: 600 (semibold)
•Font size: text-sm
•Color: --sl-standard
•Position: Above input with space-2 gap
•Required fields: Add asterisk in Accent color

Input Helper Text

Provide guidance with:

•Font size: text-sm
•Color: --sl-standard-muted
•Position: Below input with space-2 gap
•Error messages: Use red color, include icon

Part 4: Stack & Row Components

Stack Component (Vertical)

Stack elements vertically:

•Use flexbox column
•
Gap sizes:
- •xs: 4px (space-1)
- •sm: 8px (space-2)
- •md: 16px (space-4) - default
- •lg: 24px (space-6)
- •xl: 32px (space-8)

Row Component (Horizontal)

Arrange elements horizontally:

•Use flexbox row
•Align items center
•Gap sizes: same as Stack
•Responsive: convert to stack on mobile

Note: For page-level containers, grids, and layouts, see the Platform Building skill.

Part 5: Badge & Tag Components

Badge Base Design

Small status indicators:

•Border radius: 8px (--radius-sm)
•Padding: 4px × 12px (space-1 × space-3)
•Font size: text-xs
•Font weight: 600 (semibold)
•Text transform: uppercase
•Letter spacing: 0.05em

Badge Variants (Intensity Scale)

Create badges using intensity levels:

Muted Badge (Lightest):

•Background: Vibrant surface
•Text: Ink Muted
•Use for: Low-priority labels

Calm Badge (Standard):

•Background: Calm surface
•Text: --sl-standard-soft
•Border: 1px Calm border
•Use for: Standard labels

Vibrant Badge (Strongest):

•Background: --sl-standard
•Text: Base (white)
•Use for: High-priority labels

Expressive Badge (Highlight):

•Background: --sl-expressive
•Text: Base (white)
•Use when: Badge IS the "One Highlight"

Expressive Light Badge:

•Background: Accent Light
•Text: Accent Dark
•Use for: Accent information that's not THE highlight

Status Badges

Create semantic status badges:

•Success: Green background tint, green text
•Warning: Orange background tint, orange text
•Error: Red background tint, red text
•Info: Accent light background, accent dark text

Part 6: Modal & Dialog Components

Modal Structure

Build modals with:

Backdrop:

•Fixed position, full viewport
•Background: black at 50% opacity
•Backdrop blur: 4px
•z-index: 100+

Modal Container:

•Width: 90% of viewport, max 480px
•Max height: 90vh
•Overflow: auto (if content exceeds)
•Background: Muted surface
•Border radius: 24px (--radius-container)
•Shadow: Vibrant shadow (strongest)
•Padding: 24px (space-6)

Modal Sections:

•Header: Title area, margin-bottom space-4
•Title: text-xl, weight 700, --sl-standard
•Body: Main content, --sl-standard-soft color, relaxed line height
•Footer: Button area, flexbox, gap space-3, justify-end, margin-top space-6

Modal Button Pattern

In modal footers:

•Cancel/Close: Use Standard button
•Primary action: Use Expressive button (this IS the highlight)
•Align right
•Gap between: space-3

Part 7: Typography Components

Heading Styles

Apply semantic colors to headings:

Primary Headings:

•Color: --sl-standard
•Weight: 700 (bold)
•Line height: Tight (1.25)
•Letter spacing: -0.02em
•Use for: H1, H2, H3

Secondary Headings:

•Color: --sl-standard-soft
•Weight: 600 (semibold)
•Line height: Tight (1.25)
•Use for: H4, H5, H6

Expressive Headings (Rare):

•Color: --sl-expressive
•Weight: 700 (bold)
•Use sparingly: Only when heading IS the highlight

Headings with Highlight:

•Base: --sl-standard
•Highlight word: --sl-expressive
•Use to: Emphasize one key word

Body Text Styles

Apply appropriate colors:

Standard Body:

•Color: --sl-standard-soft
•Size: text-base
•Line height: Relaxed (1.75)
•Use for: Paragraphs, descriptions

Muted Text:

•Color: --sl-standard-muted
•Size: text-sm
•Use for: Captions, hints, metadata

Expressive Text (Rare):

•Color: --sl-expressive
•Weight: 500 (medium)
•Use for: Links, important highlighted words

Part 8: Component State System

Intensity-Based States

Apply intensity progression to ALL interactive components:

Resting State:

•Surface: Muted
•Border: Muted
•Shadow: Muted
•Transform: none

Hover State:

•Surface: Calm (or stay Muted for buttons)
•Border: Calm
•Shadow: Calm
•Transform: translateY(-2px) for cards, none for buttons

Active/Pressed State:

•Surface: Vibrant for inputs, Calm for cards
•Border: Vibrant
•Shadow: Muted (reduces on press)
•Transform: translateY(0) or scale(0.98)

Focus State:

•Maintain surface color
•Border: Vibrant
•Outline: 2px solid blue, 2px offset
•Shadow: 4px blue glow

Disabled State:

•Surface: Calm
•Text: Ink Muted
•Opacity: 70%
•Cursor: not-allowed
•Pointer events: none

Part 9: Component Responsiveness

Component-Level Adaptations

Build components that adapt to their container:

Touch-Friendly Sizing:

•Minimum touch target: 44px × 44px
•Buttons: At least 44px height
•Inputs: At least 48px height

Adaptive Padding:

•Reduce internal padding on smaller screens
•Cards: 16px (mobile) → 24px (tablet) → 32px (desktop)
•Buttons: Maintain consistent padding ratio

Font Size Adjustments:

•Use responsive typography when needed
•Headings may reduce size on mobile
•Body text should remain readable (min 14px)

Note: For full page layouts, grids, and navigation responsiveness, see the Platform Building skill.

Part 10: Implementation Guidelines

Component Development Workflow

Follow this process for each component:

•Define Semantic Tokens: Choose Standard vs Expressive, select intensity level
•Apply Radius: Follow nesting hierarchy (32→24→16→pill)
•Set Spacing: Use 4px grid values
•Create States: Implement intensity progression
•Add Accessibility: Include ARIA, keyboard support, focus states
•Test Responsiveness: Verify on all breakpoints
•Validate Design: Ensure "One Highlight" rule if using Expressive

Quality Checklist

Before marking component complete:

• Uses semantic tokens (no hardcoded colors)
• Follows radius hierarchy
• Buttons are pill-shaped
• States use intensity progression
• Spacing follows 4px grid
• Accessible (keyboard navigation, ARIA labels, contrast)
• Responsive (works on all breakpoints)
• "One Highlight" rule respected

Best Practices

Do:

•Make ALL buttons pill-shaped
•Use Standard color for default buttons
•Reserve Expressive for ONE element per screen
•Follow radius nesting hierarchy
•Apply intensity scale to states
•Place cards on Calm backgrounds

Don't:

•Mix sharp corners with curved design
•Use multiple Expressive buttons on one screen
•Skip intensity progression
•Hardcode radius values
•Ignore the Standard vs Expressive distinction
•Break the radius nesting order

Staylook Design System — Beautiful, Semantic, Hierarchical