cosmonic-labs Cosmonic & wasmCloud Brand Guidelines
This skill provides official brand colors and typography for Cosmonic and wasmCloud projects.
Cosmonic Brand
Typography
- Primary Font: Work Sans
- Fallback: Arial, sans-serif
Colors
Primary Colors:
| Color Name | Hex Code | Usage |
|---|---|---|
| Slate Purple | #685BC7 |
Primary brand color, CTAs, accents |
| Light Gray | #768692 |
Secondary text, subtle elements |
Secondary Colors:
| Color Name | Hex Code | Usage |
|---|---|---|
| Yellow | #FFB600 |
Highlights, warnings, attention |
| Space Blue | #002E5D |
Dark backgrounds, headers |
| Gunmetal | #253746 |
Dark text, secondary backgrounds |
| Gainsboro | #D9E1E2 |
Light backgrounds, borders, dividers |
wasmCloud Brand
Typography
- Primary Font: Lexend
- Fallback: Arial, sans-serif
Colors
Primary Colors:
| Color Name | Hex Code | Usage |
|---|---|---|
| Green Aqua | #00C389 |
Primary brand color, CTAs, accents |
| Light Gray | #768692 |
Secondary text, subtle elements |
Secondary Colors:
wasmCloud shares the same secondary color palette as Cosmonic:
| Color Name | Hex Code | Usage |
|---|---|---|
| Yellow | #FFB600 |
Highlights, warnings, attention |
| Space Blue | #002E5D |
Dark backgrounds, headers |
| Gunmetal | #253746 |
Dark text, secondary backgrounds |
| Gainsboro | #D9E1E2 |
Light backgrounds, borders, dividers |
CSS Variables
For web projects, use these CSS custom properties:
/* Cosmonic Brand */
:root {
--cosmonic-slate-purple: #685BC7;
--cosmonic-light-gray: #768692;
--cosmonic-yellow: #FFB600;
--cosmonic-space-blue: #002E5D;
--cosmonic-gunmetal: #253746;
--cosmonic-gainsboro: #D9E1E2;
}
/* wasmCloud Brand */
:root {
--wasmcloud-green-aqua: #00C389;
--wasmcloud-light-gray: #768692;
--wasmcloud-yellow: #FFB600;
--wasmcloud-space-blue: #002E5D;
--wasmcloud-gunmetal: #253746;
--wasmcloud-gainsboro: #D9E1E2;
}
Tailwind Configuration
For Tailwind CSS projects:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
cosmonic: {
purple: '#685BC7',
gray: '#768692',
yellow: '#FFB600',
blue: '#002E5D',
gunmetal: '#253746',
gainsboro: '#D9E1E2',
},
wasmcloud: {
aqua: '#00C389',
gray: '#768692',
yellow: '#FFB600',
blue: '#002E5D',
gunmetal: '#253746',
gainsboro: '#D9E1E2',
},
},
fontFamily: {
cosmonic: ['Work Sans', 'Arial', 'sans-serif'],
wasmcloud: ['Lexend', 'Arial', 'sans-serif'],
},
},
},
};
Excalidraw Diagrams
When creating diagrams, use the official wasmCloud & Wasm Excalidraw library which contains reusable components including wasmCloud cluster diagrams and architecture diagram elements.
Library URL: https://raw.githubusercontent.com/excalidraw/excalidraw-libraries/ricochet-wasmcloud-and-wasm-1770917744834/libraries/ricochet/wasmcloud-and-wasm.excalidrawlib?raw=true
Add to Excalidraw: Install Library
Using with Excalidraw MCP Server
When drawing diagrams with the Excalidraw MCP server, always:
- Use the wasmCloud library — load components from the library above rather than drawing from scratch
- Use wasmCloud brand colors in all diagram elements:
- Primary: Green Aqua (
#00C389) for main elements, connections, and accents - Backgrounds: Light blue (
#e5f2ff), light gray (#f4f7fa,#f8f9fa) - Dark elements: Deep green (
#007054), teal (#00bc8e) - Text/outlines: Gunmetal (
#253746) or Space Blue (#002E5D) - Borders/dividers: Gainsboro (
#D9E1E2)
- Primary: Green Aqua (
- Avoid default Excalidraw colors — replace them with the brand palette above
Usage Guidelines
When to Use Cosmonic Branding
- Cosmonic product interfaces and dashboards
- Cosmonic marketing materials
- Cosmonic documentation and websites
- Enterprise and commercial content
When to Use wasmCloud Branding
- wasmCloud open-source project materials
- wasmCloud documentation and tutorials
- Community content and contributions
- Technical demonstrations
Color Combinations
Cosmonic:
- Primary: Slate Purple (
#685BC7) on white or Gainsboro backgrounds - Dark mode: Light text on Space Blue (
#002E5D) or Gunmetal (#253746) - Accents: Yellow (
#FFB600) for highlights and CTAs
wasmCloud:
- Primary: Green Aqua (
#00C389) on white or Gainsboro backgrounds - Dark mode: Light text on Space Blue (
#002E5D) or Gunmetal (#253746) - Accents: Yellow (
#FFB600) for highlights and CTAs
Accessibility
Ensure sufficient color contrast for text readability:
- Use Gunmetal (
#253746) or Space Blue (#002E5D) for body text on light backgrounds - Use white or Gainsboro (
#D9E1E2) for text on dark backgrounds - Test color combinations with WCAG contrast checkers