parthkishan20 Color Palette
| Role | Hex | CSS Variable | Usage |
|---|---|---|---|
| info | #5AC8FA | --info |
Informational states — tips, neutral notifications |
| error | #FF3B30 | --error |
Error states — validation errors, destructive actions |
| accent | #0071E3 | --accent |
Eye-catching highlights — badges, icons, special elements |
| border | #D2D2D7 | --border |
Subtle dividers and container borders |
| primary | #000000 | --primary |
Main brand color — CTAs, active states, key UI elements |
| success | #34C759 | --success |
Positive states — confirmations, success messages |
| surface | #F5F5F7 | --surface |
Card/container backgrounds — slightly offset from page bg |
| warning | #FF9F0A | --warning |
Caution states — warnings, pending actions |
| secondary | #86868B | --secondary |
Supporting brand color — secondary buttons, highlights |
| textMuted | #86868B | --text-muted |
Captions, hints, timestamps — lower contrast |
| background | #FFFFFF | --background |
Page background |
| textPrimary | #1D1D1F | --text-primary |
Main body text — highest contrast |
| textSecondary | #6E6E73 | --text-secondary |
Secondary text — subheadings, descriptions |
CSS Variables
:root {
--info: #5AC8FA;
--error: #FF3B30;
--accent: #0071E3;
--border: #D2D2D7;
--primary: #000000;
--success: #34C759;
--surface: #F5F5F7;
--warning: #FF9F0A;
--secondary: #86868B;
--text-muted: #86868B;
--background: #FFFFFF;
--text-primary: #1D1D1F;
--text-secondary: #6E6E73;
}
Usage Rules
- Use only these colors. Never introduce colors outside this system.
- Maintain WCAG AA contrast for all text on backgrounds.
- Use primary for main actions, secondary for supporting actions.
- Reserve success/warning/error/info for their semantic purpose only.
- Use surface for elevated containers, background for the page.
- Apply border color for all dividers and container outlines.
Verified Contrast Pairs
| Foreground | Background | Ratio | Level | Status |
|---|---|---|---|---|
| textPrimary | background | 16.8:1 | AA | Pass |
| textPrimary | surface | 15.5:1 | AA | Pass |
| textSecondary | background | 5.1:1 | AA | Pass |
| textSecondary | surface | 4.7:1 | AA | Pass |
| textMuted | background | 3.6:1 | AA-large | Pass |
| textMuted | surface | 3.3:1 | AA-large | Pass |
References
references/tailwind-config.md— Tailwind theme configurationreferences/css-variables.md— Complete CSS custom propertiesreferences/accessibility.md— Full contrast matrixreferences/components.md— Component class mappings
Anti-patterns
- Do not use raw hex values. Always reference CSS variables or design tokens.
- Do not mix semantic colors (e.g., success color for decorative elements).
- Do not override text colors without checking contrast ratios.
- Do not use background color for elevated surfaces — use surface instead.