SDSUG Visual Identity and Color System

Purpose

This page documents the official Sonoran Desert Security User Group (SDSUG) color palette and visual identity system. It exists to ensure consistency, accessibility, and continuity across leadership transitions, website updates, and community materials. The sections include:

• Purpose / Philosophy
• Core Palette
• Accent and Neutral Colors
• Link and CTA Behavior
• Header Treatment
• Typography
• Text Semantics and Accessibility Rules
• Developer Implementation (CSS variables, etc.)
• Governance Notes / Future-Proofing

Visual Identity Direction

SDSUG’s visual identity is designed to be:

• accessible
• future‑proof
• institutional
• minimal
• regionally grounded
• warm and human

The palette reflects SDSUG’s culture: serious in its mission, warm in its community, and grounded in the Sonoran Desert.

Philosophy Behind the Palette | SDSUG Visual Identity

SDSUG’s visual identity follows the principle:

“Like the cover of a good book — warm and inviting — but the interior pages are black and white.”

• The desert image header is the cover
• The black/white/charcoal interior is the content
• The orange accent is the bookmark
• The charcoal utilities keep the UI calm and professional

This system balances seriousness with warmth, and institutional continuity with community energy.

SDSUG Color Palette

The SDSUG color palette defines the core colors, accent tones, and neutral supports that create a consistent, accessible, and regionally grounded visual identity across all digital materials. These colors establish the institutional tone of the site, reinforce the Sonoran Desert theme, and ensure long‑term continuity as the organization grows and leadership evolves.

1. Core Palette (Primary Colors)

Black — #000000

Used for structural anchors, header/footer bars, and strong dividers.

Charcoal — #1A1A1A

Primary text color. Used for body text, headings, UI icons, and social sharing buttons.

White — #FFFFFF

Primary background color. Represents clarity, openness, and readability.

2. Secondary Palette (Accent Colors)

Hyper Orange — #CD5E23

Accent color used sparingly for hover states, event CTAs, and small highlights. Represents energy, warmth, and community invitation.

Graphite — #2E2E2E

Used for borders, card outlines, and subtle UI elements.

3. Neutral Support Colors

Mid Gray — #D9D9D9

Used for dividers, table lines, and subtle UI.

Soft Gray — #F2F2F2

Used for section backgrounds and subtle contrast blocks.

4. Link and CTA Behavior

Default Link Color

Charcoal (#1A1A1A)

Event CTAs

Hyper Orange (text or button)

Hover State

Hyper Orange (#CD5E23)

Social Sharing Buttons

Charcoal (#1A1A1A)

5. Header Treatment

Background

Sonoran Desert imagery (fixed or curated)

Header Text

White (#FFFFFF), bold or semi‑bold

Overlay

Optional: rgba(0,0,0,0.35) for readability

SDSUG Typography

SDSUG’s typography system defines the fonts, weights, and usage rules that ensure consistency, readability, and institutional tone across all digital materials.

Primary Font: Arial

Fallbacks: Helvetica, system-ui, sans-serif

This ensures:

• no dependency on Google Fonts
• no “design drift”
• no licensing issues
• no risk of future breakage
• perfect rendering on every device

Arial is the right choice for an organization that values governance over aesthetics.

2. Allowed Font Weights

To keep the site clean and institutional, SDSUG should use only two weights:

Regular (400)

For all body text, paragraphs, lists, and long-form content.

Bold (700)

For:

• emphasis
• headings
• name in a signature block
• section titles
• subheadings

Do not use extra-bold, light, thin, or semi-bold. Those introduce visual noise and break the institutional tone.

3. Italics Policy

This is important.

Italics should be used sparingly and only for:

• foreign words or phrases
• occasional emphasis in long-form text
• titles of books, reports, or publications

Italics should NOT be used for:

• buttons
• CTAs
• headings
• labels
• navigation
• UI elements

Italics render inconsistently across devices and feel “editorial,” not institutional.

4. Capitalization Rules

Headings:

Use Title Case Example: Visual Identity and Color System

Navigation Items:

Use Title Case Example: Site and Transparency

Buttons / CTAs:

Use Sentence Case Example: Register now

Body Text:

Use Sentence Case Example: This page documents the official SDSUG color palette…

Never use ALL CAPS

It feels aggressive and breaks the tone.

5. Heading Hierarchy (Clean, Simple, Institutional)

H1 — Page Titles

• Arial Bold
• 32–36px
• Charcoal (#1A1A1A)

H2 — Section Titles

• Arial Bold
• 24–28px
• Charcoal

H3 — Subsections

• Arial Bold
• 20–22px
• Charcoal

Body Text

• Arial Regular
• 16–18px
• Charcoal

Small Text / Notes

• Arial Regular
• 14px
• Graphite (#2E2E2E)

This hierarchy is clean, readable, and future-proof.

Text Semantics and Accessibility Rules

SDSUG follows semantic HTML standards to ensure accessibility, screen‑reader compatibility, and long‑term maintainability. These rules prevent visual styling from being confused with structural meaning.

1. Use <strong> instead of <b>

• <strong> conveys semantic emphasis
• <b> conveys visual styling only
• Screen readers announce <strong> with emphasis
• <b> provides no accessibility benefit

Rule: Use <strong> for all bold emphasis in body text.

2. Use <em> instead of <i>

• <em> conveys semantic emphasis
• <i> conveys visual styling only
• Screen readers announce <em> with vocal emphasis

Rule: Use <em> for italics when allowed (titles, foreign words, rare emphasis).

3. Never use <br> for spacing

Spacing must be controlled by CSS, not line breaks.

4. Use proper heading hierarchy

• Only one <h1> per page
• Use <h2> for major sections
• Use <h3> for subsections
• Never skip heading levels

This ensures screen readers can navigate the page correctly.

5. Do not use headings for visual styling

Headings must reflect structure, not appearance.

6. Avoid ALL CAPS for accessibility

Screen readers may spell out words letter‑by‑letter. Use bold or strong instead of caps for emphasis.

7. Links must be descriptive

Avoid “click here” or “read more.” Use meaningful anchor text that describes the destination.

8. Buttons must be <button> or <a> with role=”button”

Never use <div> or <span> styled as buttons.

Text Conjunction Rules (“and” vs “&”)

SDSUG uses “and” in all written content except where brevity and scannability are required. The ampersand (&) is reserved exclusively for menu labels and navigation items. This rule improves clarity for non‑English speakers, supports screen‑reader accessibility, and keeps the interface concise.

1. Use “and” in all body text

• descriptions
• documentation
• emails and announcements
• event pages
• headings
• governance notes
• paragraphs
• subheadings

Reason: “And” is clearer for non‑native English speakers and is pronounced correctly by screen readers.

2. Use “&” only in menu labels

• dropdown items
• footer navigation
• sidebar menus
• top‑level navigation

Reason: The ampersand keeps menu labels short, scannable, and visually balanced without sacrificing meaning.

3. Never mix “and” and “&” within the same context

For example, avoid:

• “Design & Branding and Governance”
• “Mission & Values and Principles”

Choose one form based on the rule above.

4. Screen‑reader and accessibility considerations

• Screen readers may read “&” as “ampersand,” which disrupts flow in body text.
• Screen readers pronounce “and” naturally.
• Using “&” only in menus minimizes this disruption while preserving UI brevity.

5. Internationalization considerations

Non‑English speakers often learn “and” early, but may not recognize “&” as equivalent. Using “and” in prose improves comprehension across the community.

Image Usage & Photography Rules

SDSUG uses imagery sparingly and intentionally. Images must support clarity, accessibility, and the Sonoran Desert theme without introducing visual noise or competing with content.

Allowed:

• curated Sonoran Desert photography for headers
• simple, high‑contrast images that reinforce context
• images with alt text and accessible contrast

Not allowed:

• decorative stock photography
• abstract illustrations or icons that introduce new colors
• images with text baked in
• images that conflict with the SDSUG palette or tone

Header images must be:

• regionally grounded
• consistent in tone
• optionally overlaid with rgba(0,0,0,0.35) for readability

This section prevents future leaders from adding random clipart, icons, or stock photos that break the identity.

Logo Usage Rules

SDSUG does not currently use a standalone logo. The organization’s identity is expressed through:

• the Sonoran Desert header
• the SDSUG wordmark in Arial
• the established color palette

No alternate logos, marks, icons, or symbols may be created or used without formal governance approval. If a logo is introduced in the future, it must be added to this page and governed by the same change‑control rules.

This prevents someone in 2028 from deciding “we need a cactus logo” and uploading clipart.

Content Tone & Voice Rules

SDSUG’s written voice reflects the organization’s culture: serious in mission, warm in community, and grounded in practitioner experience. Content should be:

• clear and direct
• free of marketing language
• welcoming but not casual
• professional without being corporate
• accessible to non‑native English speakers
• focused on clarity, not persuasion

Avoid:

• hype language (“exciting,” “innovative,” “cutting‑edge”)
• corporate jargon
• overly technical phrasing without explanation
• humor in official pages (reserved for community spaces only)

This ensures the site remains consistent even as authors change.

Content Structure Rules

SDSUG content must be structured for clarity, readability, and accessibility. These rules ensure that pages remain consistent across authors and leadership transitions, and that non‑native English speakers and screen‑reader users can navigate content easily.

1. Keep paragraphs short

• Aim for 1–4 sentences per paragraph.
• Break long ideas into multiple paragraphs.
• Avoid walls of text.

Short paragraphs improve readability and reduce cognitive load.

2. Use lists for clarity

Use bulleted or numbered lists when presenting:

• steps
• rules
• examples
• definitions
• multi‑part concepts

Lists help readers scan and understand content quickly.

3. Use headings to create a clear hierarchy

• Only one H1 per page.
• Use H2 for major sections.
• Use H3 for subsections.
• Never skip heading levels.
• Headings must describe the content that follows.

This ensures screen‑reader navigability and structural clarity.

4. Avoid decorative formatting

Do not use:

• colored text
• underlined text (except links)
• random bolding
• excessive italics
• emojis in governance pages

Formatting must convey meaning, not decoration.

5. Keep sentences clear and direct

• Prefer simple sentence structures.
• Avoid jargon unless necessary — and define it when used.
• Avoid marketing language (“innovative,” “cutting‑edge,” “exciting”).
• Write for a global audience.

Clarity is more important than style.

6. Use consistent spacing

• Do not use <br> for spacing.
• Use CSS or theme spacing rules.
• Keep consistent spacing before and after headings.

This prevents layout drift over time.

7. Avoid nested formatting

Do not combine:

• bold + italics
• bold inside headings
• multiple emphasis styles in the same sentence

This keeps the visual system clean and predictable.

8. Keep pages scannable

Readers should be able to understand the structure of a page at a glance. Use:

• headings
• lists
• short paragraphs
• consistent patterns

Avoid:

• long unbroken text blocks
• meandering narrative
• unnecessary storytelling in governance pages

9. Maintain consistency across pages

All SDSUG pages should follow the same structural patterns so users know what to expect. This includes:

• heading hierarchy
• paragraph length
• list usage
• tone
• spacing
• link behavior

Consistency is part of the identity system.

2. Developer‑Ready CSS Block: Typography

/* Font Family */
body {
  font-family: Arial, Helvetica, system-ui, sans-serif;
  font-weight: 400;
  color: var(--sdsug-charcoal);
}

/* Headings */
h1 {
  font-size: 36px;
  font-weight: 700;
  color: var(--sdsug-charcoal);
}

h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--sdsug-charcoal);
}

h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--sdsug-charcoal);
}

/* Body Text */
p, li {
  font-size: 16px;
  font-weight: 400;
  color: var(--sdsug-charcoal);
}

/* Small Text */
.small-text {
  font-size: 14px;
  color: var(--sdsug-graphite);
}

/* Emphasis */
strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

Governance Notes and Future-Proofing

The SDSUG Visual Identity and Color System is a governance artifact, not a design preference. It exists to preserve continuity, accessibility, and institutional tone across leadership transitions, website updates, and community growth. The following rules ensure the system remains stable and interpretable over time.

1. Authority and Change Control

• All revisions must be documented with a date, rationale, and approval.
• Any proposed changes must be reviewed by the current SDSUG leadership team.
• Changes should be rare, intentional, and justified by accessibility, clarity, or organizational evolution — not personal preference.
• This identity system is part of SDSUG’s Web Governance Guidelines.

2. Versioning and Documentation

• Deprecated elements must be clearly marked and removed only after a transition period.
• Major updates (color changes, typography changes, structural changes) require a new version number.
• Minor updates (clarifications, examples, accessibility notes) may be added without versioning but must be logged.

3. Accessibility as a Non‑Negotiable Standard

• All colors must maintain WCAG‑compliant contrast ratios.
• Any future visual changes must be evaluated for accessibility impact before approval.
• Semantic HTML rules (e.g., <strong> over <b>, <em> over <i>) must be followed to ensure assistive technology support.
• Typography rules must remain aligned with readability and screen‑reader compatibility.

4. Consistency Across Platforms

• This identity system applies to all SDSUG digital properties, including:
  • digital documents and PDFs
  • email templates
  • event pages
  • partner pages
  • registration forms
  • website

• External partners and sponsors must not alter SDSUG colors or typography when referencing the organization.

5. Protection Against Drift

• Accent colors must remain limited and used sparingly.
• No new colors may be introduced without governance approval.
• Typography must remain restricted to the approved font family and weights.
• Visual experimentation should occur only in controlled prototypes, not in production.

6. Stewardship Expectations

• Future maintainers should treat this page as a continuity artifact.
• The goal is not to “refresh the brand” but to preserve SDSUG’s identity as a stable, practitioner‑first institution.
• Updates should reflect organizational maturity, not trends.

7. Archiving and Historical Integrity

• Archived versions must not be used in active materials.
• Previous versions of the identity system should be archived in the Website Archive section.
• This ensures transparency and provides historical context for future leadership.

Why Governance and Future-Proofing Matters

This page is important because it tells future leadership:

• This is institutional memory.
• This is not a design playground.
• This is not optional.
• This is how SDSUG protects itself from drift.

It’s the difference between a “style guide” and a governance standard. It fits our philosophy: serious in mission, warm in community, disciplined in stewardship.

Version 1.0 — Adopted February 2026
Revisions require SDSUG leadership approval and must be logged in the Website Archive.