Brand and Design Standards

SDSUG Brand and Design Standards

Purpose

This page documents the official Sonoran Desert Security User Group (SDSUG) brand and design standards, including color palette and visual identity system. It was created as part of the 2026 Website Architecture and Modernization Project.

It exists to ensure consistency, accessibility, and continuity across leadership transitions, website updates, and community materials. The sections include:

• Purpose / Philosophy
• Color Palette
• Typography
• Text Semantics and Accessibility Rules
• Text Conjunction Rules
• Image Use and Photography Rules
• Logo Usage Rules
• Content Tone and Voice Rules
• Content Structure Rules
• Favicon and Site Icon Rules
• Developer Implementation (CSS variables, etc.)
• Governance Notes / Future-Proofing

---

Visual Identity Direction

SDSUG’s visual identity and color system 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.

1. Primary Font: Arial

Fallbacks: Helvetica, system-ui, sans-serif

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

This ensures:

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

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 render inconsistently across devices and feel “editorial,” not institutional.

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

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)

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

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)

---

Spacing and Vertical Rhythm

SDSUG uses a consistent vertical spacing system to maintain clarity, readability, and visual stability across all pages. This spacing establishes a predictable rhythm that supports accessibility and reinforces the organization’s professional identity.

Global Vertical Spacing

• The standard vertical spacer is 20px.
• This value is applied consistently across sections, paragraphs, and layout blocks to create a clean, breathable structure.

Footer Spacing

The footer contains multiple conceptual layers. These values ensure the footer remains readable and structured without visual crowding.

Each layer uses intentional spacing to maintain separation and hierarchy:

• Navigation → Identity Block: 20px
• Identity Block → Sponsor Block: 20–30px
• Sponsor Block → Copyright: 15–20px

Call‑to‑Action (CTA) Spacing

• CTAs (such as event buttons) use the global 20px rhythm.
• Excessive padding or isolated whitespace around CTAs should be avoided to prevent them from appearing as standalone sections.

Section Spacing

• Major page sections follow the 20px rhythm unless additional spacing is required for clarity.
• Larger spacing (25–30px) may be used sparingly to separate conceptually distinct blocks, such as transitions between content and footer.

Consistency

Spacing should remain uniform across all pages to preserve SDSUG’s institutional tone and prevent visual drift. Deviations from the standard rhythm should be intentional and documented.

---

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 and 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
• images with alt text and accessible contrast
• simple, high‑contrast images that reinforce context

Not allowed:

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

Header images must be:

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

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 and 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.

---

Favicon and Site Icon Rules

Purpose

The SDSUG favicon is a required identity element that ensures the organization is recognizable across browser tabs, bookmarks, mobile home screens, and social previews.

Approved Icon

• The SDSUG favicon is the official site icon.
• No alternate icons, colors, or shapes may be used without governance approval.

Required Formats

WordPress generates the required formats automatically, including:

• favicon.ico
• 32×32 PNG
• 192×192 PNG
• 512×512 PNG
• Apple touch icon
• Web manifest

Placement

• Must be set via Appearance → Editor → Styles → Site Identity → Site Icon.
• Must be present on every SDSUG page.

Governance

• Changes require SDSUG leadership approval.
• All updates must be logged in the version footer at the bottom of this page.

Developer Implementation (CSS Variables)

1. Developer‑Ready CSS Block: Color Palette

---

Governance Notes and Future-Proofing

The SDSUG Brand and Designs Standards 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 Web Content Accessibility Guidelines (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.

8. Why Governance and Future-Proofing Matters | Protecting SDSUG from Institutional Drift

This page is important because it protects SDSUG from institutional drift. It tells future leadership that it is:

• Institutional memory.
• Not a design playground.
• Not optional.

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 entered into the Website Archive.

---

---

---

Last updated: March 2026