Portfolio Personal UI Gradient: Slate → Emerald (Soft-editorial)
A professional slate-emerald gradient palette designed for portfolio personal interfaces. This soft-editorial style color scheme is optimized for modern web and mobile applications, providing excellent contrast and visual appeal.
Preview · The Contextual Visualizer
Overview
Switch templates to see this palette in Admin Dashboard, Pricing Page, and Mobile Profile contexts.
Accessibility & Contrast
Real-time Contrast
Design Intent & Use Cases
- •Light-mode readability for long case studies
- •Emerald accent for tasteful CTAs and highlights
- •Soft borders and paper surfaces for an editorial feel
Color Psychology
Paper surfaces feel calm and credible. Emerald accents add a subtle signal of growth and confidence without the 'salesy' energy of warm CTA colors.
Best Usage Context
Use emerald for one primary CTA and for small highlights (links, chips). Keep the rest of the interface neutral so your work and typography remain the focus.
Accessibility & Contrast
Dark ink text on off-white surfaces is a safe baseline for readability. Emerald buttons use white text for strong contrast; avoid using emerald as body text on light backgrounds.
Color Palette
Gradient Presets
linear-gradient(135deg, #F1F5F9 0%, #CBD5E1 50%, #059669 100%)radial-gradient(circle at center, #059669 0%, #CBD5E1 50%, #F1F5F9 100%)Copy & Use
:root {
--color-primary: #F1F5F9;
--color-accent: #059669;
--bg-page: #F8FAFC;
--bg-surface: #FFFFFF;
--border-color: #E2E8F0;
--text-primary: #0F172A;
--text-secondary: #475569;
--button-primary-bg: #059669;
--button-primary-text: #FFFFFF;
--button-secondary-bg: #FFFFFF;
--button-secondary-text: #0F172A;
}Best for
✓Best for
- Case-study-heavy portfolios
- Writer and designer sites
- Consultant pages
- Minimal personal blogs
✕Not recommended for
- Dark-only visual identities
- Neon creative directions