Mint Cloud
Fresh green / Clean calm. Gentle palettes, welcoming warmth, and approachable creative aesthetics.
Your name
React
TypeScript
Tailwind CSS
VueWhy Choose the Mint Cloud Style?
Soft pastel tones reduce visual fatigue and foster trust, friendliness, and openness. Perfect for community builders and human-centric creators.
Rounded sans-serif or friendly humanistic serif typography that feels warm and conversational.
✦ Pro Designer Tips for this Preset
- Pastel tones work well with colorful illustrated or warm photographic avatars.
- Soft lilac, mint, and peach washes soften dark mode interfaces.
- Include your personal mission or community motto.
Copy Design Tokens & CSS Variables
Directly use these custom color tokens in your Figma, Tailwind config, or CSS stylesheets:
:root {
/* Mint Cloud (34) — header.name */
--banner-bg: #e5f4ec;
--banner-ink: #244233;
--banner-accent: #5fb98a;
--banner-wash: #c8e6d2;
--banner-font: 'DM Sans', sans-serif;
}// Tailwind CSS Config
colors: {
banner: {
bg: '#e5f4ec',
ink: '#244233',
accent: '#5fb98a',
wash: '#c8e6d2',
}
}Template Usage & FAQ
Can I use the "Mint Cloud" 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.