Mobile App UI Gradient: Slate → Yellow (Reading-focus)
A professional slate-yellow gradient palette designed for mobile app interfaces. This reading-focus 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
- •Low visual fatigue for long reading sessions
- •Disciplined accents to protect focus
- •High readability at low brightness
Color Psychology
Slate neutrals feel stable and quiet, reducing cognitive load while reading. Yellow highlights create a 'highlighter pen' mental model—great for bookmarks, saved items, and important actions.
Best Usage Context
Keep the UI mostly slate. Use yellow for one primary button, bookmark icons, or a single active state. This keeps the interface from becoming noisy while still giving users a strong interaction cue.
Accessibility & Contrast
Yellow is paired with dark text for safe contrast. Primary body text uses high-contrast light ink against dark surfaces, keeping long reading sessions comfortable and legible.
Color Palette
Gradient Presets
linear-gradient(135deg, #334155 0%, #64748B 50%, #FBBF24 100%)radial-gradient(circle at center, #FBBF24 0%, #64748B 50%, #334155 100%)Copy & Use
:root {
--color-primary: #334155;
--color-accent: #FBBF24;
--bg-page: #020617;
--bg-surface: #0F172A;
--border-color: #1E293B;
--text-primary: #F8FAFC;
--text-secondary: #94A3B8;
--button-primary-bg: #FBBF24;
--button-primary-text: #020617;
--button-secondary-bg: #1E293B;
--button-secondary-text: #E2E8F0;
}Best for
✓Best for
- Reading apps
- Notes apps
- Meditation and focus timers
- Habit trackers with minimal UI
✕Not recommended for
- High-energy social feeds
- Marketing-heavy mobile experiences