Solum Health Brand Guidelines Skill

Use this skill automatically when creating any content, web pages, HTML documents, landing pages, one-pagers, or marketing materials for Solum Health. This ensures all output is on-brand.

Logo

• Primary logo (dark on light): Use on light backgrounds (#F2F2F9 or white)
  • Logo URL: https://cdn.prod.website-files.com/66ccf770fcc17846279d79cd/6748cf9b5bac5ff27b9e6bff_solumnewlogo.avif
• Reversed logo (white on dark): Use on Navy (#011C40) backgrounds
• Icon-only mark: The globe/S mark can be used standalone as a favicon or avatar
• The wordmark reads SolumHealth (one word, capital S and capital H, no space)

Color Palette

Primary Colors

Secondary / Accent Colors

Neutral / UI Colors

Gradients

• Blue-to-purple gradient: linear-gradient(135deg, #468AF7, #A16CF4) — for hero sections, featured CTAs
• Teal-to-blue gradient: linear-gradient(135deg, #70D3C6, #468AF7) — for secondary highlights
• Full spectrum: linear-gradient(90deg, #A16CF4, #E5DFF4, #70D3C6, #011C40, #468AF7) — for decorative borders or thin accent lines

Typography

• Font family: 'DM Sans', sans-serif
• Google Fonts import: @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
• Weights used:
  • 400 (Regular) — Body text, descriptions
  • 500 (Medium) — Subheadings, labels, navigation
  • 700 (Bold) — Headlines, emphasis, buttons, session titles
• Italic variants available for all weights — use for quotes, annotations, secondary info

Type Scale (recommended)

Design Principles

1. Navy-first hierarchy: Use Navy (#011C40) for primary headers, footers, and time/date blocks. It anchors every layout.
2. Blue for action: Solum Blue (#468AF7) is reserved for links, buttons, CTAs, and interactive highlights.
3. Light backgrounds: Default page background is #F2F2F9 or #F9F9F9. Use white (#FFFFFF) for cards.
4. Accent sparingly: Teal (#70D3C6) and Purple (#A16CF4) are supporting colors — use for tags, badges, callout borders, and decorative accents. Never as primary background for large areas.
5. Generous whitespace: Solum's brand feels clean and professional. Maintain at least 16px padding inside cards, 24px+ between sections.
6. Border radius: Use 8px for cards and containers, 20px for pills/badges, 6px for small elements.
7. Shadows (minimal): box-shadow: 0 1px 3px rgba(1, 28, 64, 0.08) for subtle card elevation.

CSS Starter Template

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

:root {
  /* Primary */
  --solum-navy: #011C40;
  --solum-light-gray: #F2F2F9;
  --solum-blue: #468AF7;

  /* Secondary */
  --solum-light-blue: #CCEAE5;
  --solum-lavender: #E5DFF4;
  --solum-teal: #70D3C6;
  --solum-purple: #A16CF4;
  --solum-dark-teal: #146055;
  --solum-deep-purple: #462E7D;

  /* Neutrals */
  --solum-near-white: #F9F9F9;
  --solum-dark-text: #111111;
  --solum-white: #FFFFFF;
}

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--solum-dark-text);
  background: var(--solum-light-gray);
  line-height: 1.5;
}

Contact Information (for Solum Health materials)

• JP Montoya, CEO, Solum Health
• Email: jp@getsolum.com
• Phone: (628) 276-2659
• Website: getsolum.com