Brand Style Guide

Version 1.0 — February 2026 Palette: P01 — Navy + Parchment + Copper

1. Brand Essence

Brand personality in three words: Grounded. Sharp. Human.

The feel we’re going for: Walking into a well-designed coworking space — warm lighting, good materials, clearly organized, but not corporate. You feel welcome and you feel like serious things get done here.

2. Color System

2.1 Core Palette

Our palette anchors on deep navy for authority and parchment for warmth, with copper as the signature accent that sets us apart from the blue-on-white SaaS crowd.

Role	Hex	Name	When to use
Primary	`#020532`	Ink Navy	Nav bar, hero backgrounds, section headers, footer, primary containers
Secondary	`#091652`	Deep Navy	Links, subheadings, icon fills, card borders, hover states on dark elements
Accent	`#C47A3D`	Copper	Primary CTA buttons, badges, key callouts, underline highlights, progress indicators
Background	`#FEF9F1`	Parchment	Page base, light sections, card interiors, modal backgrounds
Text	`#111827`	Charcoal	All body copy, form labels, long-form content

2.2 Extended Colors

Role	Hex	Name	When to use
Accent Light	`#D4945E`	Copper Hover	CTA hover state, secondary badges, highlights
Accent Dark	`#A86230`	Copper Pressed	CTA active/pressed state
Navy Mid	`#374273`	Slate Blue	Muted UI, disabled text on dark backgrounds, dividers
BG Alt	`#F0EBE4`	Warm Stone	Alternating card rows, subtle section separation, input field backgrounds
Caption	`#9597A9`	Pewter	Placeholder text, timestamps, metadata, captions (large text only — does not pass AA for small text)

2.3 Semantic Colors

These are tuned to not clash with our copper accent.

State	Hex	Name	Usage
Success	`#2D6A4F`	Forest	Match confirmed, profile complete, successful save
Warning	`#E09F3E`	Amber	Incomplete profiles, expiring offers, approaching limits
Error	`#C1292E`	Brick Red	Validation errors, failed actions, destructive confirmations
Info	`#1748A0`	Royal Blue	Tips, onboarding hints, informational banners

Rule: Never use semantic colors as decorative elements. They’re reserved for communicating status.

2.4 Gradients

Use sparingly — hero sections and key feature callouts only.

Gradient	CSS	Where
Hero	`linear-gradient(135deg, #020532 0%, #091652 65%, #C47A3D 130%)`	Landing hero, login background, feature highlight sections
Subtle	`linear-gradient(180deg, #FEF9F1 0%, #F0EBE4 100%)`	Long page sections, bottom fade-out
Card Hover	`linear-gradient(135deg, #091652 0%, #374273 100%)`	Dark card hover states

2.5 Dark Mode (Future)

When implementing dark mode, invert the background/text relationship while keeping accent copper as-is:

Role	Light Mode	Dark Mode
Background	`#FEF9F1`	`#0B1020`
Text	`#111827`	`#F0EBE4`
Card BG	`#FFFFFF`	`#131B2E`
Primary	`#020532`	`#F0EBE4` (used as text)
Accent	`#C47A3D`	`#C47A3D` (unchanged)

3. Typography

3.1 Font Stack

Updated March 2026. Fonts now match the Solanasis logo and brand assets. See solanasis-brand-kit.md for the canonical reference.

Role	Font	Fallback	Weight	Why
Display / Headings	Playfair Display	Georgia, ‘Times New Roman’, serif	400, 600, 700	Transitional serif with high contrast. Reads “established, sophisticated, wealth management.” Used in the Solanasis logo.
Body / UI	Montserrat	’Helvetica Neue’, Arial, sans-serif	300–700	Geometric sans-serif. Clean readability for body text and UI. Wide character set, versatile weights.
Accent / Subtitles	Libre Baskerville	Georgia, serif	400, 400i, 700	Old-style serif optimized for screen. In italic, adds refined accent for subtitles and pull quotes.
Code / Data	JetBrains Mono	’Courier New’, monospace	400	For any hex codes, API references, or data displays in the product.

3.2 Type Scale

Based on a 1.25 ratio (major third), starting from 16px base.

Level	Font	Size	Line Height	Weight	Letter Spacing	Use
Display	Playfair Display	40px / 2.5rem	1.15	700	-0.02em	Landing page hero headline, pitch deck cover
H1	Playfair Display	32px / 2rem	1.2	700	-0.01em	Page titles, slide titles
H2	Playfair Display	25px / 1.563rem	1.3	600	-0.005em	Section headers
H3	Montserrat	20px / 1.25rem	1.4	600	0	Subsections, card titles
Subtitle	Libre Baskerville	18px / 1.125rem	1.5	400i	0	Slide subtitles, pull quotes, accent text
Body	Montserrat	16px / 1rem	1.6	400	0	Paragraphs, form labels
Body Small	Montserrat	14px / 0.875rem	1.5	400	0.005em	Captions, helper text, metadata
Caption	Montserrat	12px / 0.75rem	1.4	500	0.01em	Timestamps, tags, fine print

3.3 Typography Rules

Maximum line length: 65–75 characters for body text. Beyond this, readability drops sharply.
Paragraph spacing: Use 1rem (16px) between paragraphs. Never use double line breaks to create spacing — use proper margin.
Heading proximity: Headings should be closer to the content they introduce than to the content above them. 2rem above, 0.75rem below.
No all-caps except for small labels/tags (12px or below) and button text. All-caps at body size or above reads as shouting.
Bold sparingly: Use font-weight 600 for emphasis in body text. Reserve 700 for headings only.

4. Spacing & Layout

4.1 Spacing Scale

Built on a 4px base unit. Use these values consistently — no “eyeballing.”

Token	Value	Common Use
`--space-1`	4px	Tight internal padding (badge padding, icon gap)
`--space-2`	8px	Inline element gaps, compact list items
`--space-3`	12px	Default internal padding for small components
`--space-4`	16px	Standard padding, paragraph spacing, form field gaps
`--space-6`	24px	Card internal padding, section content spacing
`--space-8`	32px	Between related content blocks
`--space-12`	48px	Between major sections
`--space-16`	64px	Page-level section separation
`--space-24`	96px	Hero section vertical padding

4.2 Layout Grid

Max content width: 1200px, centered.
Page gutter: 24px on mobile, 48px on tablet, 64px on desktop.
Card grid: Use CSS Grid with auto-fill, minmax(320px, 1fr) for responsive card layouts.
Form width: Max 480px for single-column forms. Never let a text input stretch the full 1200px.

4.3 Border Radius

Element	Radius	Token
Buttons	6px	`--radius-button`
Cards	12px	`--radius-card`
Modals	16px	`--radius-modal`
Tags / Badges	999px (pill)	`--radius-pill`
Input fields	6px	`--radius-input`
Avatars	50% (circle)	`--radius-circle`

5. Buttons & CTAs

5.1 Button Hierarchy

Every screen should have one clear primary action. Don’t put two primary buttons next to each other.

Primary (Copper CTA)

Background: #C47A3D
Text: #0B1220
Hover: #D4945E
Active: #A86230
Disabled: #C47A3D at 40% opacity
Padding: 12px 24px
Font: 14px / 500 / uppercase / 0.03em letter-spacing
Radius: 6px
Min width: 120px

Secondary (Outlined)

Background: transparent
Border: 2px solid #091652
Text: #091652
Hover: Background #091652, Text #FEF9F1
Active: Background #020532, Text #FEF9F1
Same padding/radius as primary

Tertiary (Ghost / Text)

Background: transparent
Text: #091652
Hover: Text #C47A3D, underline
No border, no background change
Use for “Learn more”, “Cancel”, “Skip” actions

Destructive

Background: #C1292E
Text: #FFFFFF
Hover: #A82024
Only for delete/remove/disconnect actions
Always require confirmation for destructive actions

5.2 Button Rules

Minimum touch target: 44px height (mobile accessibility).
Icon + text buttons: icon left, 8px gap, icon sized 16px.
Loading state: Replace text with a spinner, maintain button width to prevent layout shift.
Never put more than 3 buttons in a row. If you have more options, use a dropdown menu.

6. Cards & Containers

6.1 Standard Card

Cards are the workhorse of Matchkeyz — every offer, request, and member profile is a card.

Background: #FFFFFF
Border: 1px solid #F0EBE4
Radius: 12px
Shadow (rest): 0 1px 3px rgba(2, 5, 50, 0.06)
Shadow (hover): 0 4px 12px rgba(2, 5, 50, 0.10)
Padding: 24px
Transition: box-shadow 0.2s ease, transform 0.2s ease
Hover transform: translateY(-2px)

6.2 Card Variants

Variant	Difference from Standard	When
Highlighted	Left border 4px `#C47A3D`	AI-suggested match, featured offer
Dark	BG `#020532`, text `#F0EBE4`	Hero feature cards, testimonial cards
Flat	No shadow, border only	Inside panels, nested cards, table rows
Interactive	Cursor pointer, full-card click target	Match results, member cards

6.3 Containers

Section: Max-width 1200px, centered, padding --space-16 vertical.
Panel: Background #F0EBE4, radius 12px, padding 24px. Use for grouped content (settings groups, filter panels).
Modal: Background #FFFFFF, radius 16px, shadow 0 8px 32px rgba(2, 5, 50, 0.2), overlay rgba(2, 5, 50, 0.6). Max-width 560px for standard modals, 800px for complex modals.

7. Icons & Imagery

7.1 Icon System

Library: Use Lucide icons (open source, consistent, works great with Blazor via SVG injection).
Sizes: 16px (inline), 20px (buttons), 24px (navigation), 32px (feature callouts).
Stroke width: 1.5px at 24px size. Scale proportionally.
Color: Inherit from parent text color. Accent color icons only for active/selected states.
Never mix icon libraries. Pick one, stick with it. Mixing Lucide with Font Awesome or Material icons looks amateur.

7.2 Imagery Guidelines

Photography: Prefer real, candid photos over stock. If using stock, choose images where people look like they’re actually doing something, not posing at a laptop with a fake smile.
Illustrations: If you go this route, keep them simple and line-based. The Ink Navy primary and Copper accent work well as illustration colors. Avoid cartoon-style illustrations — they undercut the “professional” message.
Patterns/Textures: Your existing triangle motif works well at 10-20% opacity over navy backgrounds. Use as section dividers or hero texture, never as a primary background.
Screenshots: When showing the product, use a subtle device frame (laptop or phone mockup) with a light drop shadow. Never show raw browser chrome with tabs visible.

7.3 Avatar System

Shape: Circle, always.
Size: 32px (lists), 40px (cards), 48px (profiles), 64px (profile header), 96px (edit profile).
Fallback: When no photo, show initials on a copper-to-navy gradient background. Text color white.
Border: 2px solid #F0EBE4 when on white backgrounds. No border on dark backgrounds.

8. Forms & Input Fields

8.1 Text Input

Height: 44px
Padding: 12px 16px
Background: #FFFFFF
Border: 1.5px solid #F0EBE4
Radius: 6px
Font: 16px (prevents zoom on iOS)
Placeholder color: #9597A9
Focus: Border #091652, shadow 0 0 0 3px rgba(9, 22, 82, 0.1)
Error: Border #C1292E, shadow 0 0 0 3px rgba(193, 41, 46, 0.1)
Label: 14px, weight 500, color #111827, 6px margin below

8.2 Form Layout

Single column for most forms. Two-column only for short related fields (first name / last name, city / state).
Label above input, never inside (floating labels cause usability issues).
Error messages directly below the field, 12px font, color #C1292E.
Required indicator: asterisk in #C1292E after label text.
Group related fields with a subtle divider or panel background, not with heavy borders.

Same height, padding, and border styling as text inputs.
Dropdown panel: White background, 8px border radius, shadow 0 4px 16px rgba(2, 5, 50, 0.12).
Selected option: Background #F0EBE4.
Hover option: Background #FEF9F1.

8.4 Checkboxes & Toggles

Checkbox: 20px square, rounded 4px. Checked state: background #091652, checkmark #FFFFFF.
Toggle: 44px wide, 24px tall. Active: #C47A3D. Inactive: #9597A9. Thumb: white circle.

9.1 Top Nav

Background: #020532
Height: 64px
Logo: Left-aligned, max height 36px
Nav links: #F0EBE4, 14px, weight 500. Hover: #C47A3D.
Active page: Underline 2px #C47A3D with 4px offset below text.
CTA button in nav: Use secondary style (outlined) in white. border: 2px solid #FEF9F1; color: #FEF9F1. Hover inverts.
Mobile: Hamburger icon at 768px breakpoint. Slide-out panel from right, full-height, background #020532.

Width: 240px (desktop), collapsed 64px (tablet), hidden (mobile).
Background: #020532
Items: 14px, weight 400, color #9597A9. Hover: color #F0EBE4, background rgba(255,255,255,0.05).
Active item: color #C47A3D, left border 3px #C47A3D, background rgba(196, 122, 61, 0.08).

9.3 Breadcrumbs

Font: 13px, weight 400
Separator: / in #9597A9
Current page: weight 500, color #111827
Previous pages: color #091652, hover #C47A3D

10. Tone of Voice

10.1 Core Principles

Be direct, not corporate. Say “Here’s what we found” not “We are pleased to present the results of our matching algorithm.” Strip the filler, keep the meaning.

Be warm, not cheesy. Say “We’ll help you find the right people” not “Unlock the power of human connection!” No buzzword bingo.

Be confident, not arrogant. Say “Our AI matches you based on what you actually need” not “Our revolutionary cutting-edge AI engine.” Let the product speak.

Be human, not robotic. It’s okay to use contractions (“you’ll” not “you will”), casual phrasing, and even humor when it fits. We’re a tool people use, not an enterprise procurement portal.

10.2 Writing Guidelines

Headlines: Short, active, benefit-focused. “Find your next collaborator” beats “Collaborative Network Discovery Platform.”
Body copy: 2-3 sentences per paragraph max. If a paragraph is longer, it probably has two ideas in it — split it.
CTAs: Action verbs. “Get matched”, “Post an offer”, “Join this group” — never “Submit” or “Click here.”
Error messages: Tell them what happened AND what to do. “That email’s already taken — try another or sign in” beats “Error: duplicate email.”
Empty states: Never show a blank screen. Use the space to guide: “No matches yet — complete your profile to get started.”
Success messages: Brief and warm. “You’re in! Check your matches.” Not “Your request has been successfully submitted and is now being processed.”

10.3 Words We Use vs. Words We Don’t

We say	We don’t say
Match, connect, find	Leverage, utilize, synergize
Members, people	Users, resources, stakeholders
Group, community	Organization, entity
Offer, request	Listing, asset, inventory
Simple, clear	Seamless, frictionless
Help, guide	Empower, enable
Fast, quick	Real-time, instantaneous
AI-powered	Revolutionary, cutting-edge, disruptive

11. Logo Usage

11.1 Clear Space

Maintain a minimum clear space around the logo equal to the height of the “M” in Matchkeyz on all sides. No other elements (text, icons, borders) should encroach into this space.

11.2 Logo Variants

Variant	Background	When
Full color	Light/parchment backgrounds	Default, preferred
White (knockout)	Navy or dark backgrounds	Dark hero sections, footer, dark cards
Single color (navy)	White/light backgrounds	When printing in limited colors

11.3 Logo Don’ts

Don’t stretch, rotate, or skew the logo.
Don’t change the logo colors to off-brand colors.
Don’t place the logo on busy/patterned backgrounds without sufficient contrast.
Don’t add drop shadows, outlines, or effects to the logo.
Don’t make the logo smaller than 80px wide on screen or 0.75 inches in print.

12. Accessibility

12.1 Color Contrast Requirements

All text must meet WCAG 2.1 AA at minimum.

Pair	Ratio	Verdict
Charcoal `#111827` on Parchment `#FEF9F1`	16.9:1	AAA pass
Deep Navy `#091652` on Parchment `#FEF9F1`	13.8:1	AAA pass
Copper `#C47A3D` on dark `#0B1220`	5.5:1	AA pass
Pewter `#9597A9` on Parchment `#FEF9F1`	3.2:1	Large text only

Rule: The Pewter/caption color fails AA for regular text. Only use it for text 18px+ or 14px bold+. For small captions that need better contrast, use Navy Mid #374273.

12.2 Interaction Accessibility

All interactive elements need visible focus indicators (not just outline — use our box-shadow focus style).
Minimum touch target: 44x44px on mobile.
Color must never be the only way to convey information. Pair it with an icon or text label (especially for status indicators).
Forms must have proper labels — don’t rely on placeholder text alone.
Modals must trap focus and be dismissible by Escape key.
Images must have alt text. Decorative images: alt="".

12.3 Motion

Respect prefers-reduced-motion. Provide a CSS check and disable animations/transitions for users who request it.
No auto-playing animations. Hover transitions are fine, but keep them under 300ms.

13. Implementation Reference

13.1 CSS Custom Properties

:root {
  /* Core palette */
  --color-primary: #020532;
  --color-secondary: #091652;
  --color-accent: #C47A3D;
  --color-bg: #FEF9F1;
  --color-text: #111827;
 
  /* Extended */
  --color-accent-hover: #D4945E;
  --color-accent-active: #A86230;
  --color-navy-mid: #374273;
  --color-bg-alt: #F0EBE4;
  --color-caption: #9597A9;
 
  /* Semantic */
  --color-success: #2D6A4F;
  --color-warning: #E09F3E;
  --color-error: #C1292E;
  --color-info: #1748A0;
 
  /* Links */
  --color-link: #091652;
  --color-link-hover: #C47A3D;
 
  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #020532 0%, #091652 65%, #C47A3D 130%);
  --gradient-subtle: linear-gradient(180deg, #FEF9F1 0%, #F0EBE4 100%);
 
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
 
  /* Radius */
  --radius-button: 6px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-pill: 999px;
  --radius-input: 6px;
  --radius-circle: 50%;
 
  /* Shadows */
  --shadow-card: 0 1px 3px rgba(2, 5, 50, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(2, 5, 50, 0.10);
  --shadow-dropdown: 0 4px 16px rgba(2, 5, 50, 0.12);
  --shadow-modal: 0 8px 32px rgba(2, 5, 50, 0.2);
  --shadow-focus: 0 0 0 3px rgba(9, 22, 82, 0.1);
 
  /* Typography */
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-display: 'Fraunces', Georgia, serif;
}

13.2 Blazor C# Constants

public static class BrandColors
{
    // Core
    public const string Primary = "#020532";
    public const string Secondary = "#091652";
    public const string Accent = "#C47A3D";
    public const string Background = "#FEF9F1";
    public const string Text = "#111827";
 
    // Extended
    public const string AccentHover = "#D4945E";
    public const string AccentActive = "#A86230";
    public const string NavyMid = "#374273";
    public const string BgAlt = "#F0EBE4";
    public const string Caption = "#9597A9";
 
    // Semantic
    public const string Success = "#2D6A4F";
    public const string Warning = "#E09F3E";
    public const string Error = "#C1292E";
    public const string Info = "#1748A0";
 
    // Links
    public const string Link = "#091652";
    public const string LinkHover = "#C47A3D";
}
 
public static class BrandSpacing
{
    public const string S1 = "4px";
    public const string S2 = "8px";
    public const string S3 = "12px";
    public const string S4 = "16px";
    public const string S6 = "24px";
    public const string S8 = "32px";
    public const string S12 = "48px";
    public const string S16 = "64px";
    public const string S24 = "96px";
}
 
public static class BrandRadius
{
    public const string Button = "6px";
    public const string Card = "12px";
    public const string Modal = "16px";
    public const string Pill = "999px";
    public const string Input = "6px";
}

13.3 Blazor Codebehind Usage Example

// In your codebehind, generating a CTA button:
private string RenderCtaButton(string text, string onClickHandler)
{
    return $@"<button
        style=""background:{BrandColors.Accent};
               color:#0B1220;
               padding:12px 24px;
               border:none;
               border-radius:{BrandRadius.Button};
               font-weight:500;
               font-size:14px;
               letter-spacing:0.03em;
               text-transform:uppercase;
               cursor:pointer;""
        onclick=""{onClickHandler}"">
        {text}
    </button>";
}
 
// Using JSInterop for hover state:
await JSRuntime.InvokeVoidAsync("addHoverStyle", elementId,
    BrandColors.AccentHover, BrandColors.AccentActive);

14. Quick Reference Card

When in doubt, here’s the cheat sheet:

Decision	Answer
What color is my CTA button?	Copper `#C47A3D`
What color are links?	Deep Navy `#091652`, copper on hover
What background for the page?	Parchment `#FEF9F1`
What font for everything?	Inter (headings 600-700, body 400-500)
How round are buttons?	6px
How round are cards?	12px
What’s my nav bar color?	Ink Navy `#020532`
Error color?	Brick Red `#C1292E`
Success color?	Forest `#2D6A4F`
Can I use all-caps?	Only for small tags (12px) and button text
Min button height?	44px (accessibility)
Max content width?	1200px

Solanasis Docs

Explorer

Brand_Style_Guide