Portfolio Personal UI Gradient: Slate → Cyan (Minimal-ink)
A professional slate-cyan gradient palette designed for portfolio personal interfaces. This minimal-ink 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
- •Minimal canvas to keep projects and screenshots dominant
- •Crisp accent for links and contact actions
- •High readability for case study pages
Color Psychology
Ink-dark palettes feel confident and modern, especially for creators who want their work to speak for itself. The sky accent adds clarity and 'clickability' without turning the whole site into a neon billboard.
Best Usage Context
Use the accent for links, active navigation states, and the main contact CTA (Email me / Book a call). Keep project cards neutral so thumbnails and screenshots stay the focal point.
Accessibility & Contrast
Light ink text on deep backgrounds is a safe baseline for reading. The sky-blue button uses dark text for strong contrast, making the primary CTA readable even at smaller sizes.
Color Palette
Gradient Presets
linear-gradient(135deg, #0F172A 0%, #334155 50%, #38BDF8 100%)radial-gradient(circle at center, #38BDF8 0%, #334155 50%, #0F172A 100%)Copy & Use
:root {
--color-primary: #0F172A;
--color-accent: #38BDF8;
--bg-page: #020617;
--bg-surface: #0F172A;
--border-color: #1E293B;
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--button-primary-bg: #38BDF8;
--button-primary-text: #020617;
--button-secondary-bg: #1E293B;
--button-secondary-text: #E2E8F0;
}Best for
✓Best for
- Designer portfolios
- Developer personal sites
- Case study pages
- Consultant landing pages
✕Not recommended for
- Highly playful lifestyle aesthetics
- Colorful illustration-heavy brands
Frequently asked questions
What colors are in the Mono Ink Minimal?
The Mono Ink Minimal is built around a dominant color (#0F172A), a support tone (#334155), and an accent color (#38BDF8). 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 Ink Minimal best used for?
This palette is curated for portfolio / personal. It works especially well for designer portfolios, developer personal sites, case study pages, and consultant landing pages. It is less suited to highly playful lifestyle aesthetics and colorful illustration-heavy brands, where a different contrast or saturation balance usually works better.
Does the Mono Ink Minimal meet accessibility contrast standards?
Light ink text on deep backgrounds is a safe baseline for reading. The sky-blue button uses dark text for strong contrast, making the primary CTA readable even at smaller sizes.
How do I use the Mono Ink Minimal in CSS or Tailwind?
Every color in the Mono Ink Minimal 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 Ink Minimal free to use in commercial projects?
Yes. The Mono Ink Minimal, 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.