UI Design Expert Skill
Overview
This skill provides expert guidance for reviewing game UI screenshots and recommending visual improvements. It covers color theory, typography, layout, shadows, animations, and CSS patterns that create a polished, professional board game experience.
The aesthetic targets a steampunk/brass era theme appropriate for UP SHIP!'s 1900-1937 Golden Age of Airships setting.
Screenshot Review Workflow
When reviewing a screenshot, analyze in this order:
1. First Impressions (2 seconds)
- What draws the eye first? Is it the right thing?
- Does it feel cohesive or scattered?
- Is the theme immediately apparent?
2. Visual Hierarchy Check
- Are important elements (current action, player status) prominent?
- Is there clear distinction between interactive and static elements?
- Can you tell whose turn it is at a glance?
3. Color & Contrast Audit
- Are colors from the defined palette?
- Is text readable against backgrounds? (4.5:1 minimum contrast)
- Are accent colors used sparingly for emphasis?
4. Spacing & Alignment
- Is spacing consistent throughout?
- Are related elements grouped together?
- Is there enough breathing room (white space)?
5. Polish & Detail
- Do interactive elements have hover states?
- Are there appropriate shadows for depth?
- Do cards/components look tactile?
6. Recommendations
- Prioritize by impact: highest visual improvement per CSS change
- Provide specific CSS code snippets
- Reference the style guide sections below
Color Palette: Steampunk Brass Era
Primary Colors
:root {
/* Brass & Copper - The heart of steampunk */
--brass-gold: #C08B51;
--brass-light: #D4A76A;
--copper: #A7623C;
--copper-dark: #8B4D32;
/* Deep Industrial - Backgrounds and panels */
--slate-dark: #1a1a2e;
--slate: #16213e;
--charcoal: #2c2c3e;
--iron: #3d3d4a;
/* Accent - Teal/Patina (oxidized copper) */
--patina: #34544F;
--patina-light: #4a7a72;
--patina-bright: #5fa093;
/* Parchment & Cream - Text backgrounds, cards */
--parchment: #F5DEB3;
--cream: #DBCA9A;
--ivory: #f5f0e6;
--paper: #e8e0d0;
}Semantic Colors
:root {
/* Text */
--text-dark: #2c2417;
--text-medium: #5c5040;
--text-light: #f5f0e6;
--text-muted: #8a7f6a;
/* Status Colors (keep muted to fit theme) */
--success: #5a8a5a; /* Muted green */
--warning: #c4a035; /* Amber/gold */
--danger: #a85454; /* Muted red */
--info: #5a7a9a; /* Steel blue */
/* Interactive States */
--highlight: #C08B51; /* Brass for selection */
--highlight-glow: rgba(192, 139, 81, 0.3);
--focus-ring: #D4A76A;
}Faction Colors
:root {
/* Player/Faction Colors */
--germany: #1a1a2e; /* Deep slate/iron */
--britain: #8B0000; /* Deep crimson */
--usa: #1e3a5f; /* Navy blue */
--italy: #2d5a3d; /* Forest green */
/* Lighter variants for backgrounds */
--germany-light: #2c2c3e;
--britain-light: #a83232;
--usa-light: #2d5478;
--italy-light: #3d7a52;
}Usage Guidelines
| Element | Color | Reason |
|---|---|---|
| Backgrounds | --slate-dark, --slate | Dark creates drama, focus |
| Cards/Panels | --parchment, --cream | Warm, readable surfaces |
| Primary buttons | --brass-gold | Eye-catching, action-oriented |
| Secondary buttons | --patina | Distinct but muted |
| Text on dark | --ivory, --cream | High contrast |
| Text on light | --text-dark | Readable, warm |
| Accents/highlights | --copper | Period-appropriate gold |
| Borders | --copper-dark, --iron | Subtle definition |
Typography
Font Stack
:root {
/* Display/Headers - Period-appropriate serif */
--font-display: 'Cinzel', 'Playfair Display', 'Georgia', serif;
/* Body text - Clean, readable sans-serif */
--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
/* Monospace - For numbers, stats */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}Type Scale
:root {
--text-xs: 0.75rem; /* 12px - Labels, captions */
--text-sm: 0.875rem; /* 14px - Secondary text */
--text-base: 1rem; /* 16px - Body text (minimum!) */
--text-lg: 1.125rem; /* 18px - Emphasized body */
--text-xl: 1.25rem; /* 20px - Card titles */
--text-2xl: 1.5rem; /* 24px - Section headers */
--text-3xl: 2rem; /* 32px - Page titles */
--text-4xl: 2.5rem; /* 40px - Hero text */
}Typography Patterns
/* Game title/logo */
.game-title {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: 700;
color: var(--brass-gold);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Section headers */
.section-header {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
color: var(--cream);
border-bottom: 2px solid var(--copper);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
/* Card titles */
.card-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-dark);
}
/* Body text */
.body-text {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--text-dark);
}
/* Stats and numbers */
.stat-value {
font-family: var(--font-mono);
font-size: var(--text-lg);
font-weight: 600;
color: var(--brass-gold);
}
/* Labels */
.label {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
}Layout & Spacing
Spacing Scale
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-8: 3rem; /* 48px */
--space-10: 4rem; /* 64px */
}Layout Principles
- Group related elements - Cards with their stats, buttons with their labels
- Use consistent gaps - Pick 2-3 spacing values and stick to them
- Create breathing room - Don't crowd the interface
- Align to grid - Use CSS Grid or consistent flexbox patterns
/* Panel layout with consistent spacing */
.panel {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
}
/* Card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-4);
}
/* Inline stats */
.stat-row {
display: flex;
align-items: center;
gap: var(--space-2);
}Cards & Panels
Base Card Style
.card {
background: linear-gradient(135deg, var(--parchment) 0%, var(--cream) 100%);
border: 2px solid var(--copper-dark);
border-radius: 8px;
padding: var(--space-4);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.15),
0 8px 16px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.card.selected {
border-color: var(--brass-gold);
box-shadow:
0 0 0 3px var(--highlight-glow),
0 4px 8px rgba(0, 0, 0, 0.15);
}Dark Panel (for sidebars, overlays)
.panel-dark {
background: linear-gradient(180deg, var(--slate) 0%, var(--slate-dark) 100%);
border: 1px solid var(--iron);
border-radius: 8px;
padding: var(--space-5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 4px 16px rgba(0, 0, 0, 0.3);
}Tech/Upgrade Tile
.tech-tile {
background: var(--paper);
border: 2px solid var(--copper);
border-radius: 6px;
padding: var(--space-3);
position: relative;
overflow: hidden;
}
/* Brass corner accents */
.tech-tile::before,
.tech-tile::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
background: var(--brass-gold);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.tech-tile::before {
top: 0;
left: 0;
}
.tech-tile::after {
bottom: 0;
right: 0;
transform: rotate(180deg);
}Playing Card Style
.playing-card {
width: 120px;
height: 180px;
background: var(--ivory);
border: 1px solid var(--text-muted);
border-radius: 8px;
padding: var(--space-2);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 2px 6px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
.playing-card .card-symbol {
font-size: var(--text-3xl);
text-align: center;
color: var(--copper);
}
/* Card in hand - overlapping fan */
.hand .playing-card {
margin-left: -40px;
transition: transform 0.2s ease, margin 0.2s ease;
}
.hand .playing-card:first-child {
margin-left: 0;
}
.hand .playing-card:hover {
transform: translateY(-20px) scale(1.05);
z-index: 10;
margin-left: 0;
margin-right: 40px;
}Buttons
Primary Button (Brass)
.btn-primary {
background: linear-gradient(180deg, var(--brass-light) 0%, var(--brass-gold) 100%);
border: 2px solid var(--copper);
border-radius: 6px;
padding: var(--space-2) var(--space-4);
color: var(--text-dark);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: all 0.2s ease;
}
.btn-primary:hover {
background: linear-gradient(180deg, var(--brass-gold) 0%, var(--copper) 100%);
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:active {
transform: translateY(0);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.2),
inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:disabled {
background: var(--iron);
border-color: var(--iron);
color: var(--text-muted);
cursor: not-allowed;
transform: none;
box-shadow: none;
}Secondary Button (Patina/Teal)
.btn-secondary {
background: transparent;
border: 2px solid var(--patina);
border-radius: 6px;
padding: var(--space-2) var(--space-4);
color: var(--patina-light);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-secondary:hover {
background: var(--patina);
color: var(--ivory);
border-color: var(--patina-light);
}Icon Button
.btn-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--charcoal);
border: 1px solid var(--iron);
color: var(--cream);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-icon:hover {
background: var(--patina);
border-color: var(--patina-light);
transform: scale(1.1);
}Shadows & Depth
Layered Shadow System
:root {
/* Elevation levels */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
--shadow-md:
0 2px 4px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.1);
--shadow-lg:
0 4px 8px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(0, 0, 0, 0.1),
0 16px 32px rgba(0, 0, 0, 0.1);
--shadow-xl:
0 8px 16px rgba(0, 0, 0, 0.15),
0 16px 32px rgba(0, 0, 0, 0.15),
0 32px 64px rgba(0, 0, 0, 0.1);
/* Glow effects */
--glow-brass: 0 0 20px rgba(192, 139, 81, 0.4);
--glow-patina: 0 0 20px rgba(52, 84, 79, 0.4);
}Inset/Recessed Effects
/* Recessed input fields */
.input-field {
background: var(--paper);
border: 1px solid var(--copper-dark);
border-radius: 4px;
padding: var(--space-2) var(--space-3);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Pressed button state */
.btn-pressed {
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.2),
inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
/* Engraved text effect */
.text-engraved {
color: var(--iron);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.3),
0 -1px 0 rgba(0, 0, 0, 0.2);
}Icons & Symbols
Icon Guidelines
- Consistency - Use one icon set throughout (Lucide, Heroicons, or custom SVG)
- Size scale - 16px (inline), 20px (buttons), 24px (standalone), 32px (feature)
- Color - Icons inherit text color by default; use accent colors sparingly
- Stroke width - Match to font weight (1.5-2px for regular text)
Game-Specific Icons
/* Icon sizing */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
/* Resource icons with color coding */
.icon-cash { color: var(--brass-gold); }
.icon-hydrogen { color: #5588cc; } /* Blue gas */
.icon-helium { color: #cc8855; } /* Orange/amber gas */
.icon-officers { color: var(--cream); }
.icon-engineers { color: var(--patina-light); }Symbol Reference
| Resource | Symbol | Color |
|---|---|---|
| Cash | Pound sign / Coin | Brass gold |
| Hydrogen | Blue flame / H2 | Steel blue |
| Helium | Orange balloon / He | Amber |
| Officers | Person / Hat | Cream |
| Engineers | Wrench / Gear | Patina |
| Lift | Up arrow / Balloon | Light |
| Weight | Down arrow / Anchor | Dark |
Animations & Transitions
Base Transitions
:root {
--transition-fast: 150ms ease;
--transition-normal: 200ms ease;
--transition-slow: 300ms ease;
/* Specific easing for different actions */
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Apply transitions thoughtfully */
.interactive {
transition:
transform var(--transition-normal),
box-shadow var(--transition-normal),
background-color var(--transition-fast);
}Hover & Selection Effects
/* Lift on hover */
.hoverable:hover {
transform: translateY(-4px);
}
/* Subtle pulse for attention */
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 var(--highlight-glow); }
50% { box-shadow: 0 0 0 8px transparent; }
}
.attention {
animation: pulse-glow 2s ease-in-out infinite;
}
/* Selection ring */
.selectable.selected {
outline: 3px solid var(--brass-gold);
outline-offset: 2px;
}State Change Animations
/* Value change highlight */
@keyframes value-change {
0% { background: var(--highlight-glow); }
100% { background: transparent; }
}
.stat-changed {
animation: value-change 0.5s ease-out;
}
/* Income popup */
@keyframes float-up {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-30px); }
}
.income-popup {
animation: float-up 1s ease-out forwards;
color: var(--success);
font-weight: bold;
}Card Flip
.card-flipper {
perspective: 1000px;
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-flipper.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.card-back {
transform: rotateY(180deg);
}Accessibility
Contrast Requirements
| Text Type | Minimum Ratio | Our Colors |
|---|---|---|
| Body text | 4.5:1 | --text-dark on --parchment = 9.2:1 |
| Large text (24px+) | 3:1 | --cream on --slate-dark = 8.1:1 |
| UI components | 3:1 | --brass-gold on --slate = 4.8:1 |
Focus States
/* Visible focus for keyboard users */
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}
/* Remove default outline only when custom is applied */
button:focus:not(:focus-visible) {
outline: none;
}Motion Preferences
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Screen Reader Support
/* Visually hidden but accessible */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Common UI Patterns
Resource Display
.resource-bar {
display: flex;
gap: var(--space-4);
padding: var(--space-3);
background: var(--charcoal);
border-radius: 6px;
border: 1px solid var(--iron);
}
.resource-item {
display: flex;
align-items: center;
gap: var(--space-2);
}
.resource-icon {
width: 24px;
height: 24px;
}
.resource-value {
font-family: var(--font-mono);
font-size: var(--text-lg);
font-weight: 600;
color: var(--cream);
}Turn Indicator
.turn-indicator {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--slate);
border-left: 4px solid var(--brass-gold);
border-radius: 0 6px 6px 0;
}
.turn-indicator.my-turn {
background: linear-gradient(90deg, rgba(192, 139, 81, 0.2) 0%, transparent 100%);
animation: pulse-glow 2s ease-in-out infinite;
}Tooltip
.tooltip {
position: absolute;
background: var(--slate-dark);
border: 1px solid var(--copper-dark);
border-radius: 6px;
padding: var(--space-3);
max-width: 250px;
box-shadow: var(--shadow-lg);
z-index: 1000;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s, transform 0.2s;
}
.tooltip.visible {
opacity: 1;
transform: translateY(0);
}
.tooltip-arrow {
position: absolute;
width: 8px;
height: 8px;
background: var(--slate-dark);
border-left: 1px solid var(--copper-dark);
border-top: 1px solid var(--copper-dark);
transform: rotate(45deg);
top: -5px;
left: 20px;
}Modal/Dialog
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.modal {
background: linear-gradient(180deg, var(--cream) 0%, var(--parchment) 100%);
border: 3px solid var(--copper);
border-radius: 12px;
padding: var(--space-6);
max-width: 500px;
width: 90%;
box-shadow: var(--shadow-xl);
}
.modal-header {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--text-dark);
border-bottom: 2px solid var(--copper);
padding-bottom: var(--space-3);
margin-bottom: var(--space-4);
}Checklist: Before Shipping
Use this checklist when reviewing the final UI:
Visual Polish
- All colors from the defined palette
- Consistent spacing using the scale
- Cards/panels have appropriate shadows
- Interactive elements have hover states
- Selected states are clearly visible
- Typography hierarchy is clear
Usability
- Current player/turn is obvious
- Available actions are highlighted
- Disabled elements look disabled
- Loading states exist where needed
- Error states are styled
Accessibility
- Text has 4.5:1 contrast minimum
- Focus states are visible
- Interactive elements are keyboard accessible
- Motion respects user preferences
Theme Consistency
- Brass/copper accents for primary actions
- Parchment/cream for content cards
- Dark slate for backgrounds/panels
- Patina/teal for secondary elements
- Period-appropriate typography
When This Skill Activates
Use this skill when:
- Reviewing UI screenshots for improvements
- Recommending CSS changes for visual polish
- Designing color schemes or typography
- Creating new UI components
- Fixing visual inconsistencies
- Adding animations or transitions
- Improving accessibility
- Making the game look more professional