Blue Haven Studio — Brand Guide

Brand Identity

Company: Blue Haven Studio Website: bluehavenstudio.com Contact: ben@bluehavenstudio.com Tagline: *(to be defined — add here when finalized)*

Colors

Primary Palette

NameHexRGBUsage ----------------------- Teal`#9DC8CB`157, 200, 203Primary brand color — buttons, links, accents, eyebrow labels Charcoal`#22211E`34, 33, 30Primary text, headings, nav bar background, button background Cream`#F9F8F3`249, 248, 243Page background (NOT pure white)

Secondary Palette

NameHexRGBUsage ----------------------- Light Teal`#D8E8E6`216, 232, 230Borders, dividers, light backgrounds Pale Blue`#E6F4F7`230, 244, 247Secondary backgrounds, tinted panels White`#FFFFFF`255, 255, 255Content card backgrounds Muted`#7a8a90`122, 138, 144Secondary text, labels, placeholders

Status Colors

NameHexUsage ------------------ Green`#2ecc71`Success, passing, positive Amber`#f39c12`Warning, caution Orange`#e67e22`Secondary warning Red`#e74c3c`Error, critical, danger

CSS Variables

:root {

--dk:     #22211E;


--teal:   #9DC8CB;


--light:  #D8E8E6;


--bg:     #F9F8F3;


--white:  #ffffff;


--border: #d8edf3;


--muted:  #7a8a90;


--red:    #c0392b;


--green:  #27ae60;


--warn:   #e67e22;


}

Typography

Font Families

RoleFontWeightsSource ----------------------------- Display / HeadingsCormorant GaramondRegular (400), SemiBold (600)Google Fonts / local TTF Body / UIInterRegular (400), Medium (500), SemiBold (600), Bold (700)Google Fonts / local TTF

Font Files

Located in `assets/fonts/`:

  • `CormorantGaramond-Regular.ttf`
  • `CormorantGaramond-SemiBold.ttf`
  • `Inter-Regular.ttf`
  • `Inter-SemiBold.ttf`
  • `Inter-Bold.ttf`

    • Type Scale

    ElementFontSizeWeightColor ------------------------------------ Page heading (h1)Cormorant Garamond56px600#22211E Section heading (h2)Cormorant Garamond32px600#22211E Subheading (h3)Inter20px700#22211E Body textInter15px400#7a8a90 Eyebrow labelInter10px700#9DC8CB Small / footerInter11px400#9ab5bd

    Eyebrow Labels

    .eyebrow {

    font-family: Inter, sans-serif;
    

    font-size: 10px;
    

    font-weight: 700;
    

    letter-spacing: 0.18em;
    

    text-transform: uppercase;
    

    color: #9DC8CB;
    

    }

    Logo

    Variants

    FileUse Case ---------------- `bhs-logo.png`Default — light/cream backgrounds `bhs-logo-white.png`Dark backgrounds (nav, overlays) `bhs-logo-black.png`High-contrast / print `bhs-logo-teal.png`Teal-on-cream accent use `bhs-logo-cream.png`Cream variant `bhs-submark.png`Favicon, small icon contexts `bhs-social-card.png`OG image / social media sharing `bhs-logo.b64`Base64 for embedding in PDFs/emails

    Logo Rules

  • Always provide adequate clear space around the logo
  • Never stretch, rotate, or recolor the logo
  • On dark backgrounds: use `bhs-logo-white.png`
  • On light/cream backgrounds: use `bhs-logo.png`
  • For social/OG tags: use `bhs-social-card.png`

    • UI Components

    Buttons

    .btn-primary {

    background: #22211E;
    

    color: #fff;
    

    text-transform: uppercase;
    

    font-family: Inter, sans-serif;
    

    font-weight: 700;
    

    padding: 14px 28px;
    

    border-radius: 6px;
    

    border: none;
    

    }
  • Primary buttons: charcoal background, white text, uppercase
  • NOT teal background — teal is for accents, not button fills

    • Navigation

  • Background: `#22211E` (charcoal)
  • Text/links: `#9DC8CB` (teal)
  • Logo: use `bhs-logo-white.png` on dark nav

    • Cards / Panels

    .card {

    background: #ffffff;
    

    border: 1px solid #D8E8E6;
    

    border-radius: 12px;
    

    padding: 24px;
    

    }

    Tables

  • Borderless design
  • Header row with light teal background (`#D8E8E6`)
  • Zebra-striped alternating rows
  • No vertical borders

    • Page Background

  • Always cream (`#F9F8F3`), never pure white or dark
  • Content cards sit on cream as white panels

    • PDF Design System

    Design Tokens (Python / ReportLab)

    BHS = {

    "BLUE":        "#9DC8CB",
    

    "BLUE_LIGHT":  "#E6F4F7",
    

    "BLUE_TINT":   "#D8E8E6",
    

    "CHARCOAL":    "#22211E",
    

    "WHITE":       "#ffffff",
    

    "PAGE_BG":     "#FFFFFF",
    

    "MUTED":       "#7a8a90",
    

    "BORDER":      "#D8E8E6",
    

    "BORDER_MID":  "#D8E8E6",
    

    "GREEN":       "#2ecc71",
    

    "AMBER":       "#f39c12",
    

    "ORANGE":      "#e67e22",
    

    "RED":         "#e74c3c",
    

    }

    PDF Principles

  • Dark, clean cover with logo dominant
  • One value prop line per section
  • Insight-first section titles (state conclusion, not topic)
  • Cormorant Garamond for large headings on white background
  • Borderless tables with header row and zebra rows
  • Single accent color (teal) deployed architecturally
  • Consistent footer on every page
  • Score rings and visual indicators use teal/green/amber/red

    • Voice & Tone

    Brand Voice

  • Professional but approachable — not corporate stiff, not casual sloppy
  • Confident and clear — make recommendations, don't hedge
  • Educational — explain the "why" behind findings and recommendations
  • Action-oriented — every section should lead to a clear next step

    • Writing Guidelines

  • Use "you/your" (second person) when addressing clients
  • Lead with the insight, then the detail
  • Avoid jargon unless the audience is technical — then define it briefly
  • Keep sentences short. Break up long paragraphs.
  • CTAs should be specific: "Get My Fix Plan" not "Learn More"

    • Email Design

  • From: ben@bluehavenstudio.com
  • Logo at top: `bhs-logo.png`
  • Background: cream (`#F9F8F3`)
  • CTA button: charcoal bg, white text, uppercase
  • Footer: `(c) Blue Haven Studio · bluehavenstudio.com`

    • Do NOT Use

  • SimpleTech colors: `#1D97F1`, `#C4F50F`, `#0f1117`, `#131313`
  • SimpleTech logos or "SimpleTech" branding
  • Dark theme UI (that's SimpleTech's design system)
  • Pure white page backgrounds (use cream #F9F8F3)
  • Teal as button fill color (teal is accent only)