---
name: portal-design-system
description: Use this skill when the task involves improving the visual quality, consistency, styling, or polish of the puppy portal UI. Applies the project design system, premium breeder aesthetic, typography, spacing, surfaces, buttons, forms, tables, and visual hierarchy rules.
---

# Portal Design System

Use this skill when the user wants the portal to look more professional, polished, cohesive, premium, or developer-built.

## Objective

Transform the portal into a premium, trustworthy, refined product UI for a Chihuahua breeder business. The result should feel intentional, elegant, and production-ready.

## Visual direction

Design for:
- warmth
- trust
- refinement
- clarity
- calm premium presentation

Avoid:
- generic AI-looking dashboards
- harsh black-heavy styling
- flat default Tailwind-looking layouts
- unfinished placeholder styling
- inconsistent spacing and typography
- random color usage
- overly playful SaaS visuals that feel off-brand

## Brand style

Preferred palette direction:
- cream
- paper
- latte
- camel
- bronze
- cocoa
- espresso

General rules:
- prefer warm neutrals over cold grays
- use contrast carefully
- dark text should usually be espresso/cocoa rather than pure black
- use soft borders and subtle depth
- glass effects are allowed when tasteful and readable
- avoid overusing blur or transparency

## Typography

Typography should feel editorial and premium.

Rules:
- strong heading hierarchy
- page titles should feel deliberate, not generic
- section titles should be clear and elegant
- body copy should be clean and readable
- labels should be concise and aligned
- avoid giant walls of bold text
- avoid tiny low-contrast text
- avoid inconsistent font sizing between pages

## Spacing and rhythm

Spacing must feel intentional and consistent.

Rules:
- use a predictable spacing scale
- maintain generous card padding
- align related controls
- do not cram cards, forms, or tables together
- maintain consistent vertical rhythm between sections
- use whitespace to create hierarchy

## Surfaces

Preferred surface behavior:
- soft cards
- refined shadows
- warm borders
- subtle highlights
- elevated but not flashy

Cards should:
- have consistent border radius
- have consistent padding
- feel like part of the same system
- not change style arbitrarily from page to page

## Buttons and controls

Buttons should:
- have a consistent height and radius
- use a clear primary/secondary/ghost hierarchy
- feel clickable and polished
- never look like raw browser defaults

Inputs should:
- be aligned
- have consistent border treatment
- have readable placeholder and label styling
- have visible focus states
- look professional in both filled and empty states

## Tables

Tables must look polished and readable.

Rules:
- align headers and cells carefully
- use row spacing, padding, and subtle separators
- avoid cramped columns
- style empty states well
- ensure tables feel like product UI, not raw database output

## Badges and status indicators

Status UI should be consistent:
- same radius family
- consistent sizing
- consistent casing
- semantic but tasteful visual language
- avoid random bright colors unless needed for alerts

## Finish standard

Before finalizing:
- normalize spacing
- normalize heading sizes
- normalize border radius usage
- normalize shadows
- normalize button styles
- normalize card treatments
- normalize table styles
- remove anything that looks placeholder or accidental

## Output rules

When applying this skill:
- improve aesthetics without losing usability
- preserve real functionality
- do not invent fake interactions
- do not introduce visual clutter
- return polished, production-quality code