Polaris Pixels Brand Guidelines

Version 3.0 — March 2026

Warm authority. Navy, cream, and gold.

Design Philosophy

Warm Authority: Professional credibility with approachable warmth. The palette communicates trust (navy), sophistication (cream), and action (gold).

The 60-30-10 Rule: 60% navy (structure, headings, text), 30% cream and warm neutrals (backgrounds, breathing room), 10% gold (interactive elements only). This ratio creates visual hierarchy without competing accents.

Core Palette

Six colors form the complete system. The 60-30-10 ratio is enforced across every page.

#0B0F19 60%

Midnight

brandMidnight

Darkest navy. Button text on gold, dark backgrounds, gradients.

#27445D 60%

Navy

brandNavy

Primary brand color. Headings, body text, decorative icons, backgrounds.

#EFE9D5 30%

Cream

brandCream

Warm background. Page sections, card borders, subtle depth.

#FAF8F3 30%

Warm White

brandWarmWhite

Lightest background. Alternate sections, subtle warmth over pure white.

#D9A441 10%

Gold

brandGold

Interactive ONLY. Links, buttons, CTAs, focus rings, accent dividers.

#B05E36 10%

Clay

brandClay

Button hover state. Paired with white text on hover.

The Gold Rule

Gold means clickable. No exceptions.

Gold is for:

  • Links and hover states
  • Buttons and CTAs
  • Focus rings on form inputs
  • Accent-rule dividers
  • List markers and check icons

Gold is NOT for:

  • Headings or body text
  • Background fills (except buttons)
  • Decorative icons or illustrations
  • Borders (except interactive elements)
  • Any non-interactive element

Warm Neutrals

Supporting tones for secondary text and subtle structure.

#6B6560

Warm Gray

brandWarmGray

Secondary text. 4.7:1 contrast on cream backgrounds.

#D4CFC7

Warm Gray Light

brandWarmGrayLight

Borders, dividers, subtle separators.

Accent & Photography Colors

Warm earth tones for special contexts. Use sparingly.

#DA6E5A

Coral

Photography brand accent (Polaris Moments)

brandCoral

#F9C87E

Sun

Warm yellow, CTA button alternate hover

brandSun

#8C4A2F

Earth

Brown, highlighted/emphasized text

brandEarth

#D78888

Rose

Soft pink, photography contexts

brandRose

Functional Colors

System colors for feedback and status. Use consistently for their intended purpose.

#3BB273

Success

Success messages, confirmations

brandSuccess

#F4A259

Warning

Warnings, important notices

brandWarning

#E54B4B

Error

Error states, critical alerts

brandError

#4D9DE0

Info

Informational states, helpful tips

brandInfo

Deprecated Colors

Do not use. Tokens exist in Tailwind config for legacy compatibility only.

DEPRECATED

Teal (DEPRECATED)

Replaced by gold for interactive, navy for decorative. Removed site-wide in v2.5.0.

DEPRECATED

Teal Dark (DEPRECATED)

Replaced by navy. Token exists in config for backwards compatibility only.

Typography

Two-Font System

DM Serif Display for display headings (H1, H2) — weight 400, elegant serifs that convey authority. DM Sans for everything else — body text, subheadings (H3-H6), navigation, buttons, forms. Clean geometric sans-serif, weights 400-700.

Display Font

DM Serif Display

H1, H2, .font-display

Body Font

DM Sans

H3-H6, body, nav, buttons, forms

H1 — DM Serif Display / 400 / 2.5rem → 4.25rem

The quick brown fox

H2 — DM Serif Display / 400 / 2rem → 3rem

The quick brown fox jumps

H3 — DM Sans / 600 / 1.25rem → 1.5rem

The quick brown fox jumps over

H4 — DM Sans / 600 / 1.125rem → 1.35rem

The quick brown fox jumps over the lazy dog

H5 — DM Sans / 700 / 1rem / UPPERCASE

The quick brown fox

H6 — DM Sans / 600 / 0.875rem / italic

The quick brown fox jumps over the lazy dog

Body — DM Sans / 400 / 18px / line-height 1.65

The Polaris Pixels brand represents the intersection of technical precision and human guidance. Our warm, AI-forward approach is grounded in deep expertise and guided by the North Star metaphor — providing clear direction through complex challenges.

Contrast Requirement

Body text on cream or white backgrounds must use text-brandNavy/70 minimum opacity for WCAG AA compliance (4.5:1 contrast ratio).

Buttons & Interactive Elements

Standard Button

All primary buttons use gold with midnight text. The clay hover state provides clear feedback. 8.5:1 AAA contrast ratio.

Book a Free Strategy Call Default Size 
bg-brandGold text-brandMidnight font-semibold px-6 py-2 rounded
hover:bg-brandClay hover:text-white transition-colors


class="btn-primary"

Never: bg-brandGold text-white — gold on white fails contrast. Always use text-brandMidnight as default.

Links

Default link color is gold, hover is navy. Set globally in CSS — no need to add classes to standard links.

Here is a sample link showing the default gold style with navy hover.

CTA Standard

All call-to-action buttons across the site use the label:

"Book a Free Strategy Call"

Navigation, homepage, landing pages, service pages, footer — consistent everywhere.

Logo: The Polaris Star

Our logo represents guidance, precision, and unwavering direction — the North Star for businesses navigating digital transformation.

Three Variants

Primary

Navy on light backgrounds

Reversed

White on dark backgrounds

Accent

Gold for interactive contexts

Clear Space Rule

Minimum padding around the logo must equal the height of one star point. This ensures the logo has proper breathing room and maintains its impact.

Brand Personality

We Are:

  • Technically Precise: Deep expertise, proven methodologies
  • Proven Experience: Years of successful client engagements
  • Modern AI-Forward: Cutting-edge tools, future-focused thinking
  • Human Guidance: The North Star through complexity
  • Professional but Approachable: Expert without being cold

The North Star Metaphor:

Just as the Polaris star has guided travelers for centuries, we provide unwavering direction for businesses navigating digital transformation.

Our brand represents:

  • Constant, reliable guidance
  • Technical precision
  • Clear direction through complexity

Brand Context for AI Tools

Copy this snippet and paste it into ChatGPT, Claude, or any AI tool to give it instant context about the Polaris Pixels brand.

{
  "brand": "Polaris Pixels",
  "version": "3.0",
  "updated": "March 2026",
  "tagline": "Warm authority. Navy, cream, and gold.",
  "philosophy": "60-30-10 rule: 60% navy (structure), 30% cream/warm neutrals (space), 10% gold (interactive only).",

  "colors": {
    "core": {
      "midnight": "#0B0F19 (darkest navy, button text)",
      "navy": "#27445D (primary brand color)",
      "cream": "#EFE9D5 (warm background)",
      "warmWhite": "#FAF8F3 (lightest background)",
      "gold": "#D9A441 (interactive ONLY)",
      "clay": "#B05E36 (button hover)"
    },
    "warmNeutrals": {
      "warmGray": "#6B6560 (secondary text)",
      "warmGrayLight": "#D4CFC7 (borders)"
    },
    "accent": {
      "coral": "#DA6E5A (photography brand)",
      "sun": "#F9C87E (warm yellow)",
      "earth": "#8C4A2F (emphasis text)",
      "rose": "#D78888 (photography)"
    },
    "deprecated": {
      "teal": "#71BBB2 (DO NOT USE)",
      "tealDark": "#497D74 (DO NOT USE)"
    },
    "functional": {
      "success": "#3BB273",
      "warning": "#F4A259",
      "error": "#E54B4B",
      "info": "#4D9DE0"
    }
  },

  "typography": {
    "display": "DM Serif Display (H1, H2) - weight 400, elegant authority",
    "body": "DM Sans (H3-H6, body, nav, buttons, forms) - weights 400-700",
    "philosophy": "Two-font system. Serif for display impact, sans for everything else."
  },

  "goldRule": "Gold = clickable. No exceptions. Decorative elements use navy or warm neutrals.",

  "buttons": {
    "standard": "bg-brandGold text-brandMidnight hover:bg-brandClay hover:text-white",
    "contrast": "8.5:1 AAA",
    "never": "bg-brandGold text-white (fails contrast)"
  },

  "cta": "Book a Free Strategy Call (used everywhere)",

  "logo": "Polaris Star - Navy on light, White on dark, Gold for interactive",

  "personality": [
    "Technically precise with deep expertise",
    "Proven experience from successful engagements",
    "Modern AI-forward with cutting-edge tools",
    "Human guidance through complexity (North Star)",
    "Professional authority, approachable warmth"
  ]
}

This JSON format works with ChatGPT, Claude, Gemini, and most AI assistants. Paste it at the start of your conversation to provide brand context.

π