Toolkit for styling web pages, documents, and interfaces with professional themes. Provides 10 pre-set themes with curated color palettes and font pairings. Use when the user wants to apply a theme, style a UI, or needs a cohesive color/font system for any project.
This skill provides a curated collection of professional color and font themes. Choose a theme and apply it consistently to any project — web pages, documents, presentations, or interfaces.
Apply consistent, professional styling with:
Mood: Professional, calming, trustworthy
#0a1628 (deep navy), #1a3a5c (ocean blue), #2d8cf0 (bright blue), #64b5f6 (sky), #e3f2fd (foam white)#00bcd4 (teal)Outfit, Body: Source Sans 3Mood: Warm, vibrant, energetic
#1a0a2e (deep purple), #d4451a (burnt orange), #ff6b35 (sunset orange), #ffa726 (warm gold), #fff3e0 (cream)#e91e63 (magenta)Playfair Display, Body: RalewayMood: Natural, grounded, organic
#1b2820 (forest dark), #2e5339 (deep green), #4caf50 (leaf green), #81c784 (light green), #e8f5e9 (mint white)#8d6e63 (bark brown)Merriweather, Body: Open SansMood: Clean, contemporary, sophisticated
#111111 (near black), #333333 (dark gray), #888888 (mid gray), #cccccc (light gray), #fafafa (off-white)#2196f3 (minimal blue)DM Sans, Body: IBM Plex SansMood: Rich, warm, autumnal
#2c1810 (dark chocolate), #6d4c2a (caramel), #c49a4a (gold), #e6c87a (wheat), #fdf6e3 (parchment)#d84315 (amber red)Cormorant Garamond, Body: LatoMood: Cool, crisp, modern
#0d1b2a (arctic night), #1b3a4b (ice blue), #468faf (frost), #a2d2ff (ice), #f0f8ff (snow white)#62b6cb (glacier)Josefin Sans, Body: NunitoMood: Soft, sophisticated, elegant
#3d2c2e (dark rose), #7b4b5a (dusty rose), #c48b9f (rose), #e8b4b8 (blush), #fdf2f4 (rose white)#c9a96e (sand gold)Libre Baskerville, Body: KarlaMood: Bold, modern, futuristic
#0a0e17 (void), #141e30 (dark tech), #00d4ff (neon cyan), #7c4dff (electric purple), #e8eaf6 (tech white)#00e676 (matrix green)Space Grotesk, Body: JetBrains MonoMood: Fresh, organic, lively
#1a2f1a (garden dark), #2d5a27 (deep leaf), #66bb6a (garden green), #aed581 (spring), #f1f8e9 (garden white)#ff7043 (flower orange)Fraunces, Body: Work SansMood: Dramatic, cosmic, luxurious
#0b0c1e (void black), #1a1b3d (deep space), #4a148c (nebula purple), #7c43bd (galaxy violet), #e8e0f0 (starlight)#ffd54f (star gold)Sora, Body: Inter:root {
/* Colors */
--color-bg-primary: [darkest];
--color-bg-secondary: [dark];
--color-primary: [main];
--color-primary-light: [light];
--color-bg-light: [lightest];
--color-accent: [accent];
/* Typography */
--font-heading: '[Heading Font]', sans-serif;
--font-body: '[Body Font]', sans-serif;
}
<link href="https://fonts.googleapis.com/css2?family=[Heading+Font]:wght@400;600;700&family=[Body+Font]:wght@300;400;500;600&display=swap" rel="stylesheet">
If no existing theme fits, create a custom one: