MIGUEL Design System
A comprehensive design system for consistent, professional financial advisory interfaces.
Colors
Primary Palette (Gold)
primary-50
#FFF9E6
primary-100
#FFF3CC
primary-200
#FFE799
primary-300
#FFDB66
primary-400
#FFCF33
primary-500
#D4AF37
primary-600
#B8941F
primary-700
#9C7A0F
primary-800
#7F6000
primary-900
#634A00
Secondary Palette (Navy)
secondary-50
#E6E8F0
secondary-100
#CCD1E0
secondary-200
#99A3C1
secondary-300
#6675A2
secondary-400
#334783
secondary-500
#001B44
secondary-600
#001633
secondary-700
#001226
secondary-800
#000E1A
secondary-900
#00070D
Semantic Colors
success
#4CAF50
warning
#FFC107
error
#F44336
neutral-500
#9E9E9E
neutral-900
#212121
Typography
Display Font - Playfair Display
Used for headings and emphasis
Body Font - Inter
Used for body text and UI elements
Font Sizes
xs - 0.75rem
sm - 0.875rem
base - 1rem
lg - 1.125rem
xl - 1.25rem
2xl - 1.5rem
3xl - 1.875rem
4xl - 2.25rem
5xl - 3rem
6xl - 3.75rem
7xl - 4.5rem
Buttons
Variants
Sizes
States
Code Example
import Button from '../components/ui/Button'
<Button variant="primary" size="md" onClick={handleClick}>
Click Me
</Button>
<Button variant="ghost" icon={<FiSave />} loading={isLoading}>
Save Changes
</Button>Cards
Custom Shadow & Padding
This card uses a gold shadow and large padding for emphasis.
Code Example
import Card from '../components/ui/Card'
<Card
title="Financial Summary"
subtitle="Q4 2025"
hoverable
footer={<Button>View Details</Button>}
>
Your portfolio performance data here...
</Card>Form Elements
Code Example
import Input, { Select } from '../components/ui/Input'
<Input
label="Email Address"
type="email"
placeholder="you@example.com"
required
error={errors.email}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Select
label="Account Type"
value={accountType}
onChange={(e) => setAccountType(e.target.value)}
options={accountOptions}
/>Modals
Code Example
import Modal from '../components/ui/Modal'
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Edit Profile"
size="md"
footer={
<>
<Button variant="ghost" onClick={() => setIsOpen(false)}>
Cancel
</Button>
<Button variant="primary" onClick={handleSave}>
Save Changes
</Button>
</>
}
>
<form>
{/* Modal content */}
</form>
</Modal>Tooltips
Code Example
import Tooltip, { InfoTooltip } from '../components/ui/Tooltip'
<Tooltip content="Delete this item" position="top">
<Button variant="danger" size="sm">
<FiTrash />
</Button>
</Tooltip>
<label>
Tax Rate
<InfoTooltip content="Current federal tax rate for 2025" />
</label>Badges
Variants
Sizes & Features
Code Example
import Badge, { BadgeGroup } from '../components/ui/Badge'
<BadgeGroup>
<Badge variant="primary">Tax Optimized</Badge>
<Badge variant="success" dot>Active</Badge>
<Badge variant="warning">Pending Review</Badge>
<Badge removable onRemove={handleRemove}>
California
</Badge>
</BadgeGroup>Loading States
Spinners
Progress Bars
Skeletons
Code Example
import {
Spinner,
ProgressBar,
Skeleton,
CardSkeleton
} from '../components/ui/LoadingStates'
// Loading spinner
<Spinner size="md" color={colors.primary[500]} />
// Progress bar
<ProgressBar
value={uploadProgress}
variant="success"
showLabel
animated
/>
// Skeleton loader
{isLoading ? (
<CardSkeleton lines={3} showImage />
) : (
<Card>{content}</Card>
)}Shadows
sm
shadow-sm
base
shadow-base
md
shadow-md
lg
shadow-lg
xl
shadow-xl
2xl
shadow-2xl
inner
shadow-inner
gold
shadow-gold
goldLg
shadow-goldLg
Spacing System
Based on a 4px unit system for consistent spacing throughout the application.
Accessibility Guidelines
- All interactive elements have focus states with 2px primary color outline
- Color contrast ratios meet WCAG AA standards
- Form inputs include proper labels and error messages
- Modals trap focus and can be closed with Escape key
- Loading states provide appropriate ARIA labels
- Tooltips are keyboard accessible
- Screen reader only content uses .sr-only class