Brand Colors

IT Help San Diego Inc.

Canonical palette and token reference for design, engineering, and vendor handoff. The brand is led by the Athenian owl medallion with a gold IT+HELP wordmark; blue is the action / link family. This page is public for sharing and is marked noindex, nofollow.

Logo Gold #D2B56FPlus Red #FF0066Gold Highlight #E0C58AGold Shadow #A8843EAction Blue #3F86D8Primary Blue #58A6FF

Brand Mark — Athenian Owl

Primary identity element. Pairs with the IT+HELP wordmark across hero, topbar, polos, and collateral.

Athenian owl medallion — IT Help San Diego brand mark
Greek-key border, gold owl on dark ground. Source: /img/brand/owl-720.webp (WebP) and /img/brand/owl-720.png (PNG fallback). Reference: Athena's owl, classical iconography.

Core Brand Colors

Primary identity colors only.

Primary Blue Anchor

--brand-blue

#58A6FF

Primary hue anchor across identity and action states.

Plus Red

.logo-plus

#FF0066

Reserved for the plus symbol only.

Gold Accent

--accent-gold

#C2A15A

Premium utility accent in controlled usage.

Gold Stroke

--accent-gold-solid

#D2B56F

Stroke/perimeter gold for logo and hero pill border match.

Logo Authority Gold Ramp (Athenian-Owl Banner)

IT+HELP wordmark fill and topbar banner gold tones. --brand-logo-gold-mid is the dark-mode letter color of .logo-it and .logo-help; in light mode (html.switch) the letters drop one luminance step to --brand-gold (#C2A15A) for contrast against the off-white surface.

Logo Gold Top

--brand-logo-gold-top

#E0C58A

Highlight tone for wordmark dimensionality.

Logo Gold Mid

--brand-logo-gold-mid

#D2B56F

Dark-mode IT+HELP letter fill. Light mode steps down to --brand-gold (#C2A15A). Same value as --brand-gold-solid (different role).

Logo Gold Bottom

--brand-logo-gold-bottom

#A8843E

Shadow tone for banner depth and weight.

Legacy Logo Blue Ramp retained as token aliases only

The IT+HELP wordmark used this blue ramp before the gold transition. Tokens remain in tokens.css for back-compat but are no longer consumed by any selector. Do not use for new components.

Legacy Logo Blue Top

--brand-logo-blue-top

#327ED6

Legacy Logo Blue Mid

--brand-logo-blue-mid

#2662AA

Legacy Logo Blue Bottom

--brand-logo-blue-bottom

#13437A

Schedule and Nav Blue Family

Action blues kept one step below logo luminance hierarchy.

Schedule Ramp Top

--schedule-blue-top

#6CAFEF

Schedule Ramp Mid

--schedule-blue-mid

#3F86D8

Schedule Ramp Bottom

--schedule-blue-bottom

#2359A9

CTA Base Top

--schedule-cta-top

#3D659A

CTA Base Mid

--schedule-cta-mid

#244A79

CTA Base Bottom

--schedule-cta-bottom

#123055

CTA Border

--schedule-cta-border

rgba(88, 131, 187, 0.40)

CTA Hover Top

--schedule-cta-hover-top

#4673AA

CTA Hover Mid

--schedule-cta-hover-mid

#2D5A8D

CTA Hover Bottom

--schedule-cta-hover-bottom

#1C436F

CTA Hover Border

--schedule-cta-hover-border

rgba(104, 151, 211, 0.52)

Theme-safe link and background references.

Dark Link

$a1d

#79B8FF

Dark Link Hover

$a2d

#A5D0FF

Light Link

$a1

#2B6FCD

Light Link Hover

$a2

#4A8EDF

Dark Background Primary

$c1d

#0D1117

Dark Background Secondary

$c2d

#161B22

Light Background Primary

$c1

#FAFBFC

Light Background Secondary

$c2

#F5F5F7

Text and Lockup Neutrals

Support tones and structural text values.

Light Text

#FFFFFF

Secondary Text

#B2BAC5

San Diego (Dark)

.location

#566376

San Diego (Light)

html.switch .location

#404D5B

Brand Accent Ink

--brand-accent-ink

#16120A

Effect Channel References

RGB channel pairs used for glow and lighting effects.

Brand Blue RGB

--brand-blue-rgb

88, 166, 255

Brand Blue Glow

--brand-blue-glow

176, 218, 255

Gold RGB

--accent-gold-rgb

194, 161, 90

Gold Glow

--accent-gold-glow

224, 197, 138

Brand Rules

  1. The Athenian owl medallion is the primary brand mark; the IT+HELP wordmark is its lockup partner.
  2. IT+HELP letters render in the owl-banner gold ramp: --logo-gold-mid (#D2B56F) in dark mode, stepping down to --brand-gold (#C2A15A) in light mode for surface contrast. The legacy logo-blue ramp is retained as token aliases only and is not used on the wordmark in either theme.
  3. Red is reserved for the plus symbol — never for body text, links, or other accents.
  4. Action / link / schedule blues sit one luminance step below the wordmark gold so the lockup remains the dominant signal.
  5. Gold accent (--brand-gold) and gold stroke (--brand-gold-solid) are used in restrained doses on hero pill border and CTA trim; they share hue with the logo gold ramp by design.
  6. san diego stays subordinate steel-blue gray (#566376 dark / #404D5B light).
  7. Do not mint ad hoc colors without updating STYLE_GUIDE.md and static/css/tokens.css in the same PR; scripts/check-token-parity.sh enforces no-hex-in-component-CSS.