Slate Blue
Steel tones / Professional. Midnight aesthetics, focused neon accents, and stealth-mode sophistication.
Your name
Why Choose the Slate Blue Style?
Deep dark backgrounds with precise accent lighting evoke high-tech focus, stealth craftsmanship, and terminal-grade engineering immersion.
Monospace or geometric sans-serif fonts in electric violet, lime, or amber neon highlights.
✦ Pro Designer Tips for this Preset
- Dark mode native — seamlessly integrates into GitHub and X dark themes.
- Use neon accent colors sparingly to guide the viewer’s eye directly to key badges.
- Grid and noise overlays add authentic cyberpunk / IDE texture.
Copy Design Tokens & CSS Variables
Directly use these custom color tokens in your Figma, Tailwind config, or CSS stylesheets:
:root {
/* Slate Blue (38) — header.name */
--banner-bg: #171a21;
--banner-ink: #dfe6ef;
--banner-accent: #7ea6d9;
--banner-wash: #2c3444;
--banner-font: 'DM Sans', sans-serif;
}// Tailwind CSS Config
colors: {
banner: {
bg: '#171a21',
ink: '#dfe6ef',
accent: '#7ea6d9',
wash: '#2c3444',
}
}Template Usage & FAQ
Can I use the "Slate Blue" template across all social networks?
Yes. This template is designed with responsive coordinate scaling that perfectly formats for X / Twitter (1500×500), LinkedIn (1584×396), YouTube (2560×1440), and GitHub Profile README (1280×400) without any text clipping.
How do I customize the avatar, name, and badges in this template?
Click "Use This Template in Generator" above. You can load your GitHub profile automatically, change typography, adjust the Brand Kit palette, and download high-res PNG or vector SVG in seconds.
Is this template 100% free with no watermark?
Yes, 100% free and open. All rendering happens entirely inside your browser (local-first). No registration, no subscription, and zero watermarks.