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
Frequently asked questions
What colors are in the Sage Paper Calm?
The Sage Paper Calm is built around a dominant color (#F1F5F9), a support tone (#CBD5E1), and an accent color (#059669). These are organized into semantic roles—background, surface, border, text, and primary action—so the palette maps directly onto a design token system rather than a loose set of swatches.
What is the Sage Paper Calm best used for?
This palette is curated for portfolio / personal. It works especially well for case-study-heavy portfolios, writer and designer sites, consultant pages, and minimal personal blogs. It is less suited to dark-only visual identities and neon creative directions, where a different contrast or saturation balance usually works better.
Does the Sage Paper Calm meet accessibility contrast standards?
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.
How do I use the Sage Paper Calm in CSS or Tailwind?
Every color in the Sage Paper Calm ships as copy-ready CSS custom properties and a matching Tailwind config, plus linear and radial gradient presets. Copy the CSS variables for a framework-agnostic setup, or drop the Tailwind config into your theme to reference semantic names like primary, surface, and border throughout your components.
Is the Sage Paper Calm free to use in commercial projects?
Yes. The Sage Paper Calm, like every palette on UI Colors Lab, is free for both personal and commercial projects. No signup is required and attribution is appreciated but not mandatory.