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:

1. Use the wasmCloud library — load components from the library above rather than drawing from scratch
2. 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)
3. 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