Brand Identity

Colors, typography, iconography, spacing, and component patterns for the Sigon Group brand.

01

Color Palette

A restrained palette anchored by rose tones, with service-specific accents used sparingly for visual differentiation.

Primary Rose

Pale Rose
#A64D79
Primary CTAs, links, accents
Deep Rose
#741B47
Hover states
Dull Rose
#4C1130
Dark accents

Service Colors

Sandstone
#D4895E
AI Advisory
10%
25%
50%
80%
Cornflower
#6B8EC1
Controls
10%
25%
50%
80%
Sage
#7BAF8E
Audit
10%
25%
50%
80%
Dusty Mauve
#B08BA8
Reserved accent
10%
25%
50%
80%

Text Colors

Near Black
#131314
Primary text
Muted Gray
#6B6B6B
Secondary text
Warm Cream
#FAF9F0
Text on dark backgrounds
Light Muted
#9A9A9A
Secondary text (dark mode)

Background Colors

White
#FFFFFF
Primary background
Light Gray
#F5F5F5
Card background
Near Black
#1A1A1A
Dark mode background
Dark Gray
#2A2A2A
Dark mode card background

Borders

Light Border
#E0DCD7
Dividers (light mode)
Dark Border
#3A3A3A
Dividers (dark mode)
02

Color Identity Rules

A disciplined 70/20/10 color proportion ensures visual consistency across all pages and modes.

70 / 20 / 10 Proportion

70% Neutrals
20% Rose
10%
70% Neutrals
White, Light Gray, Near Black backgrounds. Primary and secondary text colors.
20% Rose
Buttons, links, CTAs, section accents, hover states. The action color.
10% Service Color
Icon tiles, accent lines, bullet dots, nav indicators. Decorative only.

Color Hierarchy

Each color has a specific job. They do not overlap. - **Rose** = Action. Buttons, links, CTAs, hover states. The only color that says "click me." - **Service colors** = Identity. Icon tiles, accent lines, bullet dots, nav active indicator. Never on buttons or body text. - **Neutrals** = Everything else. Backgrounds, text, borders, cards.

Tint/Shade System

Use opacity-based variants from the base service hex. Two levels per color: - **Subtle background**: 10% opacity (e.g., `rgba(212, 137, 94, 0.1)` for a light Sandstone wash) - **Hover/emphasis**: 80% opacity or darken via overlay No extra hex tokens needed. Base color + opacity handles everything.

Accessibility

Service colors are decorative only. All readable text uses Near Black (`#131314`), Muted Gray (`#6B6B6B`), or Rose (`#A64D79`) which passes WCAG AA at 4.6:1 on white. | Color | Contrast on White | Notes | |-------|-------------------|-------| | Rose `#A64D79` | 4.6:1 | Passes AA for all text sizes | | Sandstone `#D4895E` | ~2.8:1 | Decorative use only | | Cornflower `#6B8EC1` | ~3.1:1 | Decorative use only | | Sage `#7BAF8E` | ~2.9:1 | Decorative use only |

Do & Don't

Correct Usage
  • Use Rose for all interactive elements (buttons, links, CTAs)
  • Service colors on icon tiles, card top borders, bullet dots
  • Create tints via opacity: 10% for subtle backgrounds, 80% for emphasis
  • Neutrals dominate the layout: backgrounds, text, dividers
  • Same service hex in both light and dark mode
Avoid
  • Service colors on buttons or body text
  • Large blocks of service color as backgrounds
  • Mixing multiple service colors on the same element
  • Creating alternate dark mode variants for service colors
03

Icon Tile System

Service icons use a solid color tile with white stroke icons. 1:1 aspect ratio, generous corner radius, and subtle hover lift. All icon artwork must stay within a 6px safe zone inset from each edge (on the 48×48 viewBox), keeping content within the 6–42 range on both axes. Account for stroke width and circle radii.

AI Advisory
80px
48px
Code brackets </>
Controls
80px
48px
Shield with checkmark
Audit
80px
48px
Certificate / ribbon

Tile Specifications

Aspect Ratio
1 : 1
Corner Radius (Large)
20px
Corner Radius (Small)
12px
Safe Zone
6px inset
Icon Fill Area
~55%
Stroke Width
2.5px
Hover Lift
-4px Y
| Service | Icon | Tile Color | |---------|------|------------| | AI Advisory | Code brackets `</>` | Sandstone `#D4895E` | | Controls | Shield with checkmark | Cornflower `#6B8EC1` | | Audit | Certificate/ribbon | Sage `#7BAF8E` |
04

Typography

Söhne by Kris Sowersby (Klim Type Foundry) in three weights. Clean, geometric, with a warm humanist quality. Fallback: Inter, system sans-serif.

Söhne Leicht
Weight: 300
CSS: font-weight: 300
Role: Headlines, display text
H1 — clamp(2.5rem, 5vw, 3.5rem)
Built on Expertise. Focused on Outcomes.
H2 — clamp(2rem, 4vw, 2.5rem)
Technology Risk Advisory
H3 — clamp(1.25rem, 2.5vw, 1.5rem)
AI Governance & Compliance
Söhne Buch
Weight: 400
CSS: font-weight: 400
Role: Body text
Body — 1rem / 16px
Sigon Group is a technology risk advisory firm that partners with organizations navigating AI governance, internal controls, and audit readiness. We combine deep domain expertise with a modern, technology-forward approach.
Small — 0.875rem / 14px
Our advisors bring decades of experience across enterprise risk management, SOC reporting, and emerging technology frameworks. Every engagement is led by a partner, not delegated to juniors.
Caption — 0.75rem / 12px
Sigon Group · 848 Brickell Ave PH 5-I94 · Miami, FL 33131
Söhne Kräftig
Weight: 500
CSS: font-weight: 500
Role: Emphasis, subheads, nav, buttons
Subhead — 1.125rem / 18px
Expert-Led. AI-Native. Outcome-Driven.
Nav / Button — 0.9375rem / 15px
Services   Company   Connect   Get Started
Label — 0.8125rem / 13px
AI Advisory  ·  Controls  ·  Audit

Typographic Rules

Heading Letter-Spacing
-0.02em
Tighter tracking for large text
Body Line-Height
1.6
Generous leading for readability
### Font Stack ```css font-family: 'Söhne', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; ``` | Weight | File | CSS Value | Usage | |--------|------|-----------|-------| | Light | `soehne-leicht.woff2` | 300 | Headlines, display text | | Book | `soehne-buch.woff2` | 400 | Body text | | Kräftig | `soehne-kraftig.woff2` | 500 | Emphasis, subheads |
05

Spacing & Radius

A proportional spacing scale based on rem units (1rem = 16px). Consistent use creates visual rhythm across all components.

Spacing Scale

xs
0.25rem / 4px
sm
0.5rem / 8px
md
1rem / 16px
lg
1.5rem / 24px
xl
2rem / 32px
2xl
3rem / 48px
3xl
4rem / 64px
4xl
6rem / 96px

Border Radius Scale

sm
4px
md
8px
lg
16px
tile
20px
tile-sm
12px
pill
50px
06

Component Patterns

Reusable building blocks that compose the interface. Cards, buttons, hero layouts, and footer patterns.

Buttons

Primary & Outline Variants
Get Started Contact Us
Buttons always use Rose (#A64D79). Hover darkens to Deep Rose (#741B47). Never use service colors on buttons.

Service Cards

Default State
AI Development Advisory
Partner with our team to build responsible AI systems. We embed governance into your development lifecycle from day one.
Hover State (3px service-color top border)
AI Development Advisory
Partner with our team to build responsible AI systems. We embed governance into your development lifecycle from day one.

Hero Layout

Two-column grid with icon tile
AI Advisory
Navigate the evolving AI landscape with expert guidance. From governance frameworks to validation testing, we help you deploy AI responsibly.
Explore Services

Footer Pattern

Always dark (#1A1A1A), light text
Sigon Group
Built on Expertise. Focused on Outcomes.
848 Brickell Ave PH 5-I94, Miami, FL 33131
info@sigongroup.com
### Component Summary | Component | Background | Radius | Accent | |-----------|-----------|--------|--------| | Cards | `--color-card` | `--radius-md` (8px) | 3px top border in service color on hover | | Icon Tiles | Service color (solid) | `--radius-tile` (20px) / `--radius-tile-sm` (12px) | White stroke icons | | Hero | Default bg | N/A | Two-column grid (9fr / 5fr) | | Footer | `#1A1A1A` always | N/A | Light text `#FAF9F0`, muted `#9A9A9A` | | Buttons | Rose `#A64D79` | `--radius-pill` (50px) | Hover: Deep Rose `#741B47` |
08

Brand Voice

The verbal identity complements the visual system. Confident, precise, and grounded.

“Built on Expertise.
Focused on Outcomes.”
Positioning: Expert-led, AI-native risk advisory. Big Four quality, boutique attention.
Tone: Authoritative but approachable. Technical but not jargon-heavy. Warm but not casual.
Team: Senior professionals only (10+ years experience). Every engagement partner-led.
### Services 1. **AI** — Develop and deploy tailored AI solutions 2. **Controls** — Design, implement, and test IT controls 3. **Audit** — Painless SOC 1 & SOC 2 examinations
09

Contact

- **Address**: 848 Brickell Ave PH 5-I94, Miami, FL 33131 - **Email**: info@sigongroup.com - **LinkedIn**: linkedin.com/company/sigongroup - **Website**: sigongroup.com