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
Frequently asked questions
What colors are in the Mono Slate Reader?
The Mono Slate Reader is built around a dominant color (#334155), a support tone (#64748B), and an accent color (#FBBF24). 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 Mono Slate Reader best used for?
This palette is curated for mobile app. It works especially well for reading apps, notes apps, meditation and focus timers, and habit trackers with minimal ui. It is less suited to high-energy social feeds and marketing-heavy mobile experiences, where a different contrast or saturation balance usually works better.
Does the Mono Slate Reader meet accessibility contrast standards?
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.
How do I use the Mono Slate Reader in CSS or Tailwind?
Every color in the Mono Slate Reader 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 Mono Slate Reader free to use in commercial projects?
Yes. The Mono Slate Reader, 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.