# SAMUELS INSURANCE GROUP

## Complete Brand Kit & Visual Identity Guidelines

**Brand:** Samuels Insurance Group\
**Primary concept:** Stronger People. Safer Tomorrows.\
**Core symbol:** Geometric "S" built from interlocking directional
bands\
**Version:** 1.0\
**Prepared for:** Digital, print, signage, presentations, and marketing
applications

------------------------------------------------------------------------

# 1. Brand Overview

## 1.1 Brand Purpose

Samuels Insurance Group exists to communicate **confidence, protection,
progress, and human connection**.

Insurance is often represented through generic symbols such as shields,
houses, umbrellas, or locks. The Samuels identity takes a more
contemporary approach: it uses an abstract geometric symbol that
communicates protection and forward movement without relying on
conventional insurance imagery.

The visual system is designed to feel:

-   Established but modern
-   Professional without feeling cold
-   Human without becoming informal
-   Bold enough for digital platforms
-   Flexible enough for print and environmental applications

## 1.2 Brand Promise

> **People. Protection. Progress.**

These three concepts provide the foundation for the identity.

  -----------------------------------------------------------------------
  Brand Pillar            Meaning                 Visual Expression
  ----------------------- ----------------------- -----------------------
  **People**              Clients, families,      Connected lines and
                          employees, and          approachable
                          communities             compositions

  **Protection**          Security, trust,        Structured geometry and
                          reliability, and        strong containment
                          guidance                

  **Progress**            Growth, planning, and a Forward directional
                          safer future            movement and layered
                                                  paths
  -----------------------------------------------------------------------

## 1.3 Recommended Tagline

**Stronger People. Safer Tomorrows.**

Alternative supporting line:

**People \| Protection \| Progress**

------------------------------------------------------------------------

# 2. Logo Concept

## 2.1 What the Symbol Represents

The primary symbol is an abstract interpretation of the letter **"S"**
for **Samuels**.

It is constructed from multiple geometric bands arranged in an isometric
directional form.

The symbol communicates several ideas simultaneously:

### The Letter S

The negative space and directional bands create an abstract **S-shaped
pathway**.

### Multiple Paths

The layered bands represent different people, policies, coverage
options, and life journeys converging within one trusted organization.

### Protection

The overall geometric structure creates a contained, shield-like
silhouette without directly using a traditional shield.

### Progress

The directional bands visually move forward and inward, suggesting
planning, momentum, and long-term security.

### Connection

The colors and repeated parallel forms represent different individuals
and services working together as one system.

## 2.2 Why the Logo Uses Multiple Colors

The multicolor system represents the diversity of insurance needs while
maintaining one consistent structure.

The colors should not be interpreted as separate companies or
departments unless the organization intentionally assigns meaning to
them later.

The structure remains constant. This allows the identity to work in:

-   Full color
-   Dark environments
-   Light environments
-   Single-color printing
-   Embroidery
-   Favicon and app icon formats
-   Signage

------------------------------------------------------------------------

# 3. Logo Architecture

The identity consists of the following elements.

## 3.1 Primary Symbol

The standalone geometric **S symbol**.

Use when:

-   Space is limited
-   The brand is already recognized
-   Creating an app icon
-   Social media avatars
-   Favicons
-   Small promotional materials

## 3.2 Primary Vertical Logo

Recommended structure:

``` text
        [ SYMBOL ]

        SAMUELS
     INSURANCE GROUP

PEOPLE | PROTECTION | PROGRESS
```

Use for:

-   Presentations
-   Social media graphics
-   Posters
-   Landing page hero sections
-   Signage with vertical space

## 3.3 Horizontal Logo

Recommended structure:

``` text
[ SYMBOL ]  SAMUELS
            INSURANCE GROUP
            PEOPLE | PROTECTION | PROGRESS
```

Use for:

-   Website headers
-   Navigation bars
-   Letterheads
-   Email signatures
-   Wide banners
-   Business cards

## 3.4 Wordmark

The wordmark contains:

**SAMUELS**

with supporting text:

**INSURANCE GROUP**

The wordmark should always remain highly legible and should not compete
with the symbol.

------------------------------------------------------------------------

# 4. Logo Versions

A complete logo package should contain the following exports.

## 4.1 Full Color --- Light Background

**Symbol:** Blue, green, red, and gold\
**Wordmark:** Deep navy\
**Background:** White or very light neutral

Recommended use:

-   Primary website
-   Documents
-   Proposals
-   Light marketing materials
-   Social media

## 4.2 Full Color --- Dark Background

**Symbol:** Full color\
**Wordmark:** White or off-white\
**Background:** Deep navy or charcoal

Recommended use:

-   Dark website sections
-   Presentations
-   Video
-   Signage
-   Premium marketing materials

## 4.3 Monochrome Dark

**Symbol:** Deep navy or near-black\
**Background:** White or light neutral

Recommended use:

-   Single-ink printing
-   Newspaper advertising
-   Fax-compatible documents
-   Embroidery
-   Minimal applications

## 4.4 Monochrome Light

**Symbol:** White or soft white\
**Background:** Navy, charcoal, or dark photography

Recommended use:

-   Dark hero sections
-   Window decals
-   Video overlays
-   Dark apparel
-   Event backdrops

## 4.5 Symbol Only

Use only when the audience already understands the brand or when the
context is extremely small.

------------------------------------------------------------------------

# 5. Logo Clear Space

Maintain clear space around the logo equal to at least:

**1/2 the width of the internal central band**

For practical digital implementation:

-   Minimum desktop padding: `24px`
-   Comfortable website header padding: `32px–48px`
-   Large presentation usage: `64px+`

Never allow text, borders, images, or UI elements to crowd the symbol.

------------------------------------------------------------------------

# 6. Minimum Size

## Digital

  Logo Type                 Recommended Minimum
  ----------------------- ---------------------
  Symbol only                             24 px
  Symbol + wordmark                 120 px wide
  Horizontal logo                   180 px wide
  Detailed primary logo             220 px wide

## Print

  Logo Type           Recommended Minimum
  ----------------- ---------------------
  Symbol only                        8 mm
  Horizontal logo                   30 mm
  Primary logo                      40 mm

For very small usage, use the simplified symbol rather than the complete
lockup.

------------------------------------------------------------------------

# 7. Incorrect Logo Usage

Do not:

-   Stretch or compress the logo
-   Rotate the symbol
-   Change the geometric structure
-   Rearrange the colored bands
-   Add outlines around the symbol
-   Add excessive shadows
-   Place the logo on visually busy backgrounds without contrast
-   Use low-contrast text
-   Recolor individual bands with random colors
-   Apply gradients unless using an approved digital gradient variant
-   Add decorative effects that reduce legibility

------------------------------------------------------------------------

# 8. Primary Brand Colors

The original full-color identity is built around four directional colors
and one structural dark color.

## 8.1 Core Colors

  -----------------------------------------------------------------------
  Name              Hex               RGB               Primary Role
  ----------------- ----------------- ----------------- -----------------
  **Samuels Navy**  `#0F172A`         15, 23, 42        Primary dark
                                                        foundation

  **Trust Blue**    `#60A5FA`         96, 165, 250      Trust, clarity,
                                                        technology

  **Progress        `#10B981`         16, 185, 129      Growth,
  Green**                                               wellbeing,
                                                        progress

  **Protection      `#FF4444`         255, 68, 68       Action, strength,
  Red**                                                 urgency

  **Confidence      `#FCCD40`         252, 205, 64      Optimism, value,
  Gold**                                                confidence
  -----------------------------------------------------------------------

## 8.2 Recommended Dark Text

``` css
--sam-navy-950: #0B1220;
--sam-navy-900: #0F172A;
--sam-navy-800: #172033;
```

## 8.3 Recommended Light Backgrounds

``` css
--sam-white: #FFFFFF;
--sam-cloud: #F8FAFC;
--sam-mist: #F1F5F9;
--sam-slate-light: #E2E8F0;
```

------------------------------------------------------------------------

# 9. Extended Color System

The brand should not rely on only three or four colors. The following
extended system provides enough flexibility for a complete website,
dashboard, marketing system, and design library.

------------------------------------------------------------------------

# 10. Palette A --- Signature Corporate

This is the default palette for most public-facing brand applications.

## Navy Scale

``` css
--navy-950: #08111F;
--navy-900: #0F172A;
--navy-800: #17233A;
--navy-700: #24334D;
--navy-600: #33445F;
--navy-500: #4A5D78;
--navy-400: #6B7C96;
--navy-300: #94A3B8;
--navy-200: #CBD5E1;
--navy-100: #E2E8F0;
--navy-50:  #F8FAFC;
```

## Blue Scale

``` css
--blue-950: #0A2A4A;
--blue-900: #0D3D6E;
--blue-800: #155A9C;
--blue-700: #2376C9;
--blue-600: #3B8FE0;
--blue-500: #60A5FA;
--blue-400: #7DB8FA;
--blue-300: #A5D0FC;
--blue-200: #CBE4FE;
--blue-100: #E5F1FF;
--blue-50:  #F3F8FF;
```

## Green Scale

``` css
--green-950: #063D32;
--green-900: #075A49;
--green-800: #087A61;
--green-700: #0A9A78;
--green-600: #10B981;
--green-500: #34C99A;
--green-400: #63D9B4;
--green-300: #8FE7CB;
--green-200: #B8F0DD;
--green-100: #D8F8EC;
--green-50:  #F0FCF7;
```

## Red Scale

``` css
--red-950: #5E1016;
--red-900: #8F1720;
--red-800: #B91F2A;
--red-700: #D92D39;
--red-600: #F04452;
--red-500: #FF4444;
--red-400: #FF6B6B;
--red-300: #FF9292;
--red-200: #FFB8B8;
--red-100: #FFD6D6;
--red-50:  #FFF2F2;
```

## Gold Scale

``` css
--gold-950: #5C4200;
--gold-900: #806000;
--gold-800: #A67B00;
--gold-700: #C99600;
--gold-600: #E5B819;
--gold-500: #FCCD40;
--gold-400: #FDD65E;
--gold-300: #FDE184;
--gold-200: #FEEBAA;
--gold-100: #FFF4CD;
--gold-50:  #FFFBEA;
```

------------------------------------------------------------------------

# 11. Palette B --- Premium Financial

Use this palette when the brand needs to feel more established,
conservative, and premium.

``` css
--premium-midnight: #0A1628;
--premium-navy: #132A45;
--premium-slate: #425466;
--premium-steel: #7B8A97;
--premium-ivory: #F7F4ED;

--premium-gold-dark: #A87918;
--premium-gold: #D4A72C;
--premium-gold-light: #EAC96A;

--premium-blue: #315D7C;
--premium-teal: #2E7D78;
```

### Best for

-   Executive presentations
-   Commercial insurance
-   Wealth and financial protection
-   Premium print
-   Corporate reports

------------------------------------------------------------------------

# 12. Palette C --- Modern Digital

Use this palette for web applications, portals, dashboards, and
technology-focused services.

``` css
--digital-950: #070B14;
--digital-900: #101827;
--digital-800: #1E293B;
--digital-700: #334155;

--digital-blue: #3B82F6;
--digital-cyan: #06B6D4;
--digital-green: #22C55E;
--digital-purple: #8B5CF6;
--digital-amber: #F59E0B;
--digital-red: #EF4444;

--digital-bg: #F8FAFC;
--digital-surface: #FFFFFF;
```

### Best for

-   Client dashboards
-   AI-powered tools
-   Data visualization
-   Mobile applications
-   Digital marketing

------------------------------------------------------------------------

# 13. Palette D --- Calm Protection

A softer palette for personal insurance, family coverage, and
wellbeing-focused communication.

``` css
--calm-navy: #17324D;
--calm-blue: #4F86C6;
--calm-sky: #A9D6E5;
--calm-teal: #4CA6A8;
--calm-sage: #A8C5A0;
--calm-sand: #EADCC8;
--calm-cream: #FAF7F2;
--calm-charcoal: #263238;
```

### Best for

-   Family insurance
-   Health-related coverage
-   Community campaigns
-   Educational content
-   Customer onboarding

------------------------------------------------------------------------

# 14. Palette E --- Growth & Community

A more energetic palette for campaigns and community engagement.

``` css
--community-navy: #102A43;
--community-blue: #2F80ED;
--community-green: #27AE60;
--community-lime: #84CC16;
--community-orange: #F97316;
--community-gold: #FBBF24;
--community-coral: #F05252;
--community-white: #FFFFFF;
```

### Best for

-   Campaigns
-   Events
-   Community initiatives
-   Social media
-   Youth and family outreach

------------------------------------------------------------------------

# 15. Palette F --- Monochrome Editorial

Use this palette where a highly refined, minimal visual system is
required.

``` css
--mono-black: #111111;
--mono-charcoal: #242424;
--mono-graphite: #404040;
--mono-gray: #737373;
--mono-silver: #A3A3A3;
--mono-mist: #D4D4D4;
--mono-paper: #F5F5F5;
--mono-white: #FFFFFF;
```

### Best for

-   Legal documents
-   Print applications
-   Editorial layouts
-   Minimal campaigns
-   Embossing and engraving

------------------------------------------------------------------------

# 16. Palette G --- Dark Interface

Designed specifically for dark websites and application interfaces.

``` css
--dark-bg-950: #070D18;
--dark-bg-900: #0B1220;
--dark-bg-850: #101A2B;
--dark-surface: #142033;
--dark-surface-raised: #1B2A41;

--dark-text-primary: #F8FAFC;
--dark-text-secondary: #CBD5E1;
--dark-text-muted: #94A3B8;
--dark-border: #26364F;

--dark-blue: #60A5FA;
--dark-green: #34D399;
--dark-gold: #FCD34D;
--dark-red: #FB7185;
```

------------------------------------------------------------------------

# 17. Palette H --- Light Interface

Designed specifically for clean, high-clarity web experiences.

``` css
--light-bg: #F8FAFC;
--light-surface: #FFFFFF;
--light-surface-alt: #F1F5F9;
--light-border: #E2E8F0;

--light-text-primary: #0F172A;
--light-text-secondary: #475569;
--light-text-muted: #64748B;

--light-blue: #2563EB;
--light-green: #059669;
--light-gold: #D99A00;
--light-red: #DC2626;
```

------------------------------------------------------------------------

# 18. Palette I --- Data Visualization

Use these colors for charts and analytics. Do not rely on logo colors
alone for large datasets.

``` css
--chart-1: #2563EB;
--chart-2: #16A34A;
--chart-3: #F59E0B;
--chart-4: #DC2626;
--chart-5: #7C3AED;
--chart-6: #0891B2;
--chart-7: #DB2777;
--chart-8: #65A30D;
--chart-9: #EA580C;
--chart-10: #64748B;
--chart-11: #14B8A6;
--chart-12: #9333EA;
```

Recommended semantic chart assignment:

  Meaning         Color
  --------------- --------
  Primary         Blue
  Positive        Green
  Attention       Gold
  Negative        Red
  Secondary       Purple
  Informational   Cyan
  Neutral         Slate

------------------------------------------------------------------------

# 19. Website Color Strategy

The website should use a **70 / 20 / 10 visual balance**, not equal
amounts of every brand color.

## 70% --- Foundation

Use:

-   White
-   Cloud
-   Navy
-   Deep background colors

## 20% --- Supporting Surfaces

Use:

-   Soft blue
-   Light slate
-   Subtle green or gold backgrounds

## 10% --- Accent

Use:

-   Blue
-   Green
-   Red
-   Gold

The multicolor logo should remain the strongest concentration of
multiple colors. The rest of the interface should be more restrained.

------------------------------------------------------------------------

# 20. Recommended Website Themes

## Theme 1 --- Corporate Light

``` css
background: #FFFFFF;
surface: #F8FAFC;
primary: #0F172A;
accent-blue: #2563EB;
accent-green: #10B981;
accent-gold: #FCCD40;
```

Best for the main public website.

## Theme 2 --- Executive Dark

``` css
background: #0B1220;
surface: #142033;
text: #F8FAFC;
primary-blue: #60A5FA;
gold: #FCD34D;
green: #34D399;
```

Best for premium landing pages and presentations.

## Theme 3 --- Family & Personal

``` css
background: #FAF7F2;
text: #17324D;
blue: #4F86C6;
teal: #4CA6A8;
sage: #A8C5A0;
```

Best for personal insurance campaigns.

## Theme 4 --- Digital Portal

``` css
background: #F8FAFC;
sidebar: #0F172A;
card: #FFFFFF;
primary: #2563EB;
success: #16A34A;
warning: #F59E0B;
danger: #DC2626;
```

Best for dashboards and customer portals.

------------------------------------------------------------------------

# 21. Semantic UI Colors

These colors should be used consistently across the website and
applications.

``` css
--success: #16A34A;
--success-bg: #DCFCE7;

--warning: #D97706;
--warning-bg: #FEF3C7;

--error: #DC2626;
--error-bg: #FEE2E2;

--info: #2563EB;
--info-bg: #DBEAFE;

--neutral: #475569;
--neutral-bg: #F1F5F9;
```

Do not use the logo's red purely as an error color everywhere. Brand
color and semantic UI color may serve different purposes.

------------------------------------------------------------------------

# 22. Typography

## 22.1 Recommended Primary Typeface

### Inter

Use for:

-   Website
-   Dashboards
-   Presentations
-   Body text
-   UI components

Recommended weights:

-   400 --- Regular
-   500 --- Medium
-   600 --- Semibold
-   700 --- Bold
-   800 --- ExtraBold

## 22.2 Alternative Typeface

### Manrope

Use when a slightly more premium and contemporary appearance is desired.

## 22.3 Headline Style

Recommended:

-   Bold
-   Clean
-   Wide but controlled
-   Strong contrast
-   Minimal decorative styling

Example:

``` text
Protect What
Matters Most.
```

## 22.4 Body Style

Keep body copy highly readable.

Recommended:

-   Font size: `16px–18px`
-   Line height: `1.5–1.7`
-   Maximum reading width: `65–75 characters`

------------------------------------------------------------------------

# 23. Typography Scale for Website

``` css
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
```

Suggested usage:

  Element      Size
  ------------ -----------
  Caption      12--13 px
  Small UI     14 px
  Body         16 px
  Large body   18 px
  H4           20--24 px
  H3           28--32 px
  H2           36--48 px
  H1           48--72 px

------------------------------------------------------------------------

# 24. UI Component Direction

## Buttons

### Primary

-   Background: Samuels Navy or Trust Blue
-   Text: White
-   Border radius: `8px–12px`

### Secondary

-   Background: Transparent or white
-   Border: Navy or light slate
-   Text: Navy

### Accent CTA

Use Gold sparingly for high-value actions.

Examples:

-   Get a Quote
-   Speak With an Advisor
-   Review Your Coverage

Do not use all four logo colors in a single button.

------------------------------------------------------------------------

# 25. Cards and Surfaces

Recommended card styling:

``` css
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
```

Dark mode:

``` css
background: #142033;
border: 1px solid #26364F;
```

Avoid excessive glassmorphism or heavy gradients. The brand's geometric
logo already provides sufficient visual complexity.

------------------------------------------------------------------------

# 26. Iconography

Icons should be:

-   Simple
-   Geometric
-   Consistent stroke width
-   Rounded slightly, but not playful
-   Easy to understand

Recommended insurance icon categories:

-   Shield
-   Family / people
-   Home
-   Vehicle
-   Business
-   Document
-   Medical
-   Umbrella
-   Growth
-   Support

Use the multicolor palette sparingly. Most icons should use one color.

------------------------------------------------------------------------

# 27. Photography Direction

Photography should communicate:

-   Confidence
-   Real relationships
-   Preparedness
-   Professional guidance
-   Modern workplaces
-   Families and communities

Avoid:

-   Overly staged stock imagery
-   Excessively dramatic disaster imagery
-   Fear-based visual messaging
-   Generic handshake photography as the primary visual language

Preferred visual treatment:

-   Natural lighting
-   High clarity
-   Neutral or warm backgrounds
-   Authentic expressions
-   Navy overlays when required for text contrast

------------------------------------------------------------------------

# 28. Graphic Elements

The logo's parallel bands can be expanded into supporting graphic
motifs.

Approved concepts:

-   Directional line patterns
-   Layered corner accents
-   Isometric pathways
-   Subtle geometric frames
-   Section dividers inspired by the logo

These elements must never recreate the complete logo in a confusing or
distorted way.

------------------------------------------------------------------------

# 29. Gradient System

Gradients are optional and should primarily be used for digital
marketing.

## Blue Gradient

``` css
linear-gradient(135deg, #60A5FA, #2563EB)
```

## Green Gradient

``` css
linear-gradient(135deg, #34D399, #059669)
```

## Gold Gradient

``` css
linear-gradient(135deg, #FDE184, #F59E0B)
```

## Dark Brand Gradient

``` css
linear-gradient(135deg, #07111F, #142B45)
```

Do not apply gradients to the official logo unless an approved logo
asset was specifically created for that purpose.

------------------------------------------------------------------------

# 30. Accessibility

All website implementations should target **WCAG 2.2 AA** contrast
requirements where applicable.

Key rules:

-   Do not place light gray text on white
-   Do not rely only on color to communicate status
-   Use labels and icons alongside status colors
-   Ensure button text has sufficient contrast
-   Test chart colors for distinguishability
-   Provide visible keyboard focus states

Recommended focus ring:

``` css
outline: 3px solid rgba(96, 165, 250, 0.45);
outline-offset: 2px;
```

------------------------------------------------------------------------

# 31. Favicon and App Icon

Use the symbol-only version.

Recommended exports:

``` text
favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
```

For dark browser environments:

-   Use the full-color symbol on navy

For light browser environments:

-   Use the full-color symbol on white

------------------------------------------------------------------------

# 32. Social Media

## Profile Image

Use:

-   Symbol only
-   Full color
-   High contrast background

Recommended:

``` text
LinkedIn: Navy background
Facebook: Navy or white
Instagram: Navy background
YouTube: Navy background
```

## Social Posts

Use the following hierarchy:

1.  Strong headline
2.  Supporting image or illustration
3.  Small logo placement
4.  One primary accent color

Do not place a large multicolor logo on every post unless it is a brand
announcement.

------------------------------------------------------------------------

# 33. Print Guidelines

## Preferred Files

For print:

-   SVG
-   PDF
-   EPS

For digital:

-   SVG
-   PNG
-   WebP

Never use a screenshot as the master logo file.

## Print Color

For professional offset printing, create approved CMYK conversions from
the final master artwork before production.

Do not assume HEX-to-CMYK conversions are visually identical across
print systems.

------------------------------------------------------------------------

# 34. Recommended Logo File Package

``` text
Samuels-Brand/
│
├── 01-Logos/
│   ├── Full-Color/
│   │   ├── samuels-logo-light.svg
│   │   ├── samuels-logo-dark.svg
│   │   ├── samuels-logo-light.png
│   │   └── samuels-logo-dark.png
│   │
│   ├── Monochrome/
│   │   ├── samuels-logo-navy.svg
│   │   ├── samuels-logo-white.svg
│   │   ├── samuels-symbol-navy.svg
│   │   └── samuels-symbol-white.svg
│   │
│   └── Symbol/
│       ├── samuels-symbol-color.svg
│       ├── samuels-symbol-dark.svg
│       └── samuels-symbol-light.svg
│
├── 02-Colors/
│   ├── colors.css
│   ├── colors.json
│   └── color-guide.pdf
│
├── 03-Typography/
│   └── typography-guide.md
│
├── 04-Social/
│   ├── profile-icons/
│   └── post-templates/
│
├── 05-Website/
│   ├── design-tokens.css
│   └── theme-tokens.json
│
└── BRAND-KIT.md
```

------------------------------------------------------------------------

# 35. Design Tokens --- Recommended CSS

``` css
:root {
  /* Core */
  --brand-navy: #0F172A;
  --brand-blue: #60A5FA;
  --brand-green: #10B981;
  --brand-red: #FF4444;
  --brand-gold: #FCCD40;

  /* Background */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-muted: #F1F5F9;

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-inverse: #F8FAFC;

  /* Borders */
  --border-light: #E2E8F0;
  --border-medium: #CBD5E1;

  /* Semantic */
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
  --info: #2563EB;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}
```

------------------------------------------------------------------------

# 36. Recommended Brand Usage Matrix

  Application          Recommended Palette    Logo Version
  -------------------- ---------------------- ---------------------------
  Main website         Corporate Light        Full color light
  Dark website         Dark Interface         Full color dark
  Client portal        Digital Portal         Symbol + wordmark
  Executive proposal   Premium Financial      Monochrome or full color
  Social media         Signature Corporate    Symbol only
  Print documents      Monochrome Editorial   Navy monochrome
  Family campaign      Calm Protection        Full color
  Data dashboard       Data Visualization     Restrained symbol
  Office signage       Signature Corporate    Full color or dimensional
  Embroidery           Monochrome Editorial   Single color

------------------------------------------------------------------------

# 37. Brand Personality

The Samuels Insurance Group identity should consistently feel:

### Confident

Clear decisions, strong typography, controlled composition.

### Protective

Structured layouts, dependable color contrast, reassuring communication.

### Progressive

Modern technology, clean interfaces, forward-looking imagery.

### Human

Real people, understandable language, approachable customer experiences.

### Professional

No unnecessary decoration. Every visual element should have a purpose.

------------------------------------------------------------------------

# 38. Final Brand Rules

1.  **The geometric S symbol is the primary visual asset.**
2.  **The logo structure should never be altered.**
3.  **Use full color for recognition; use monochrome for functional
    applications.**
4.  **Use navy as the primary visual anchor.**
5.  **Use multiple palette families depending on the application, not
    randomly within one screen.**
6.  **Keep website interfaces more restrained than the logo.**
7.  **Use red carefully in UI contexts because users commonly associate
    red with errors.**
8.  **Use gold as an accent, not a dominant page background.**
9.  **Use semantic colors separately from brand colors when building
    applications.**
10. **Prioritize readability and accessibility over decorative
    effects.**

------------------------------------------------------------------------

# 39. Recommended Default Website Stack

## Public Website

**Theme:** Corporate Light\
**Primary:** Samuels Navy\
**CTA:** Trust Blue\
**Supporting accent:** Progress Green\
**Highlight:** Confidence Gold\
**Alert:** Semantic Red

## Dark Sections

**Background:** `#0B1220`\
**Surface:** `#142033`\
**Primary text:** `#F8FAFC`\
**Muted text:** `#94A3B8`

## Recommended Logo Usage

-   Light pages → Full-color logo + navy wordmark
-   Dark pages → Full-color logo + white wordmark
-   Tiny spaces → Symbol only
-   Single-color production → Navy or white monochrome

------------------------------------------------------------------------

# 40. Brand Summary

The Samuels Insurance Group identity is built around a single central
idea:

> **Many paths. One trusted direction.**

The geometric S symbol represents the people and decisions that move
through life, while the structured form communicates protection and
stability.

The multicolor identity adds energy and distinction. The extended
palette system provides enough flexibility for a modern website,
customer portal, dashboard, social media system, print collateral, and
future digital products without diluting the core brand.

**Primary identity:** Bold, structured, modern\
**Primary foundation:** Navy\
**Signature expression:** Multicolor geometric S\
**Core message:** People. Protection. Progress.

------------------------------------------------------------------------

## Asset Checklist

Before final delivery, ensure the brand package contains:

-   [ ] Full-color light logo
-   [ ] Full-color dark logo
-   [ ] Monochrome navy logo
-   [ ] Monochrome white logo
-   [ ] Symbol-only color logo
-   [ ] Symbol-only navy logo
-   [ ] Symbol-only white logo
-   [ ] Horizontal lockup
-   [ ] Vertical lockup
-   [ ] SVG master files
-   [ ] PNG exports at multiple resolutions
-   [ ] Favicon package
-   [ ] Color token file
-   [ ] Typography specification
-   [ ] Website design token file
-   [ ] Brand guidelines document
