Brand feel
Works nicely for data tables, filters, and sidebars.
Theme Guide
Slate Terminal
A dark utility palette tailored for admin tools and code-heavy products.
Slate Terminal is meant for interfaces where dense information needs to stay crisp. It brings in terminal-inspired greens while keeping the layout calm and business-ready.
- Best for admin panels, developer tools, and internal dashboards.
- 17.45:1 text on background
- 10.08:1 primary button contrast
- Focused
- Utility-first
- Sharp
Suggested application
Best for admin panels, developer tools, and internal dashboards.
AAA AAA
background #0a0f14
surface #111b24
text #eaf7ef
muted #8ba39b
primary #7ee081
secondary #2fc9b8
accent #ffb703
border #253340
Primary interface
Use the surface and border pair for cards, forms, and content blocks. The primary color should carry calls to action, while accent stays reserved for highlighted insight.
Interface benefit
Keeps important numbers readable on low-glare backgrounds.
Implementation note
Supports code snippets and keyboard-driven workflows cleanly.
Where Slate Terminal works best
- Monitoring dashboards, table views, and operational control panels.
- Code snippets, settings pages, and keyboard-driven product areas.
- Alert states, permissions screens, and information-dense sidebars.
What to customize first
If you need more brand personality, test accent and secondary color shifts first while keeping the subdued background and readable green-highlight balance intact.
When to pick another direction
This direction is a weaker fit for soft storytelling pages, visual-first marketing sites, or consumer products that benefit from brighter open space.
Usage Notes
How to use Slate Terminal without losing clarity
Slate Terminal is designed as a practical starting point, not just a visual exercise. Best for admin panels, developer tools, and internal dashboards. Slate Terminal is meant for interfaces where dense information needs to stay crisp. It brings in terminal-inspired greens while keeping the layout calm and business-ready.
What the contrast scores tell you
The current text and background pairing lands at 17.45:1, which scores as AAA in this preview. The primary action color reaches 10.08:1 with its readable button text, which gives you a quick check on whether the main CTA is likely to stay clear when the palette moves into production.
Where to focus your first customizations
If you adapt this preset to match a brand, start with the primary, secondary, and accent roles first. Keep the background, surface, and text relationship stable until the base readability still feels solid, then test muted text, borders, hover states, and empty states before launch.
Quick implementation checklist
- Use background and surface colors to create clear separation between the canvas and cards.
- Reserve the accent color for emphasis so the interface still has hierarchy.
- Retest body text, buttons, and form controls after any brand-driven color changes.
- Check the theme in your real typography and spacing system before shipping it.
Export Tokens
CSS variables for Slate Terminal
Use this as a starting point in Astro, Tailwind, or any other frontend stack that accepts CSS custom properties.
:root {
--theme-bg: #0a0f14;
--theme-surface: #111b24;
--theme-text: #eaf7ef;
--theme-muted: #8ba39b;
--theme-primary: #7ee081;
--theme-secondary: #2fc9b8;
--theme-accent: #ffb703;
--theme-border: #253340;
--theme-on-primary: #102033;
} Related Guides
Learn when this palette style makes sense
These pages explain the broader decisions behind palettes like Slate Terminal, so visitors can compare this theme against a real project need instead of only reacting to the swatches.
Dashboard Guide
Dashboard Color Palettes for Analytics, Admin Panels, and Operations Teams
How to build a dashboard palette that keeps dense information legible while still feeling intentional and professional.
- Use background, surface, and border layers to organize the layout before adding stronger colors.
- Save color intensity for actions, critical states, or chart highlights instead of decoration.
App Color Schemes for SaaS Products, Utilities, and Product-Led Teams
How to choose an app palette that keeps interfaces readable, makes actions obvious, and scales from onboarding to settings screens.
- Protect the neutral structure first so cards, forms, and layout regions stay easy to scan.
- Limit bright accents to actions, status signals, or selective highlights instead of spreading them everywhere.
Accessible Color Combinations for Interfaces, Buttons, and Long-Form Pages
Simple guidance for choosing color combinations that stay readable in real layouts rather than only looking good in a swatch row.
- Check body text, button text, form labels, and table values separately because they often fail in different places.
- Use muted colors deliberately; a polished palette can still be highly readable.
More Themes
Explore other directions
If this palette is close but not exact, the broader theme library gives you more routes to compare without leaving the same design vocabulary.