# Secure Pride Design System

**Secure Pride** is a privacy-first cybersecurity organization building tools and standards for LGBTQ+ communities and high-risk groups, operating under adversarial threat models where exposure has real consequences.

- **Website / Mission**: https://securepride.org
- **GitHub Org**: https://github.com/mazze93
- **Primary Repo**: https://github.com/mazze93/Secure-Pride
- **Icon Pack Repo**: https://github.com/mazze93/secure-pride-aegis-icons
- **Blog Platform**: https://github.com/mazze93/mazze93-leczzare-blog (Astro + Cloudflare Pages)

---

## Product Context

Secure Pride is not a single app — it is a **sovereignty stack** of tools:

| Product | Description |
|---|---|
| **Audit Toolkit** | Privacy/security audit tool for LGBTQ+ orgs. Scans DNS, TLS, email auth (SPF/DKIM/DMARC), CSP, secrets exposure. Generates prioritized remediation reports. |
| **Ally Web App** | Client-side web app (browser-only) with E2EE chat and identity tools. Privacy-first, no telemetry. |
| **Document Engine** | Branded PDF generator from structured markdown content. Four templates: Brand Guide, Report, Technical Docs, One-Pager. |
| **Blog / Editorial** | Astro-based editorial platform for essays and security writing. |
| **Praxis Stack** | Larger sovereignty architecture: DAEDALUS (identity switcher), ContextSynapse, Secure Pride as components. |

---

## CONTENT FUNDAMENTALS

### Brand Voice — Five Principles

1. **Calm confidence** — competence without alarm. Never alarmist; never dismissive.
2. **Culturally competent** — speaks as a community member, not an outsider. Uses correct LGBTQ+ terminology naturally.
3. **Approachable professional** — expert-level without jargon. If jargon is needed, it's defined.
4. **Protection-first framing** — leads with what we protect, not what we prevent. "Your organization is protected" not "Threats detected."
5. **Honest about limitations** — explicitly states what the tool does and does not do.

### Tone & Voice

- **First person**: "We build tools..." / "We protect..." — organizational first person
- **Second person**: "Your organization", "you receive" — addresses users directly
- **Not**: "Our platform leverages synergistic..." — no enterprise jargon
- **Not**: Alarmist framing ("You're under attack!", "Your data is at risk!")
- **Not**: Minimizing framing ("Just run a scan", "Simple security")
- **Casing**: Sentence case for body copy. Title Case for section headers. ALL CAPS used sparingly for status labels and code.
- **Emoji**: Not used in product UI. Used sparingly in documentation/GitHub (🏗️, 🔒, etc.)
- **Oxford comma**: Yes.
- **Contractions**: Allowed in conversational contexts; avoided in formal documentation.

### Copy Examples

> "Security is stewardship, not software theater."

> "Your organization is protected. Scanner active, 3 threats blocked this week."

> "Targeting is asymmetric: small orgs get hit because they're exposed, not because they're 'important.'"

> "What this is not: Not surveillance. Not tracking scripts. Not a SaaS dashboard that holds your data."

> "Where we draw the line online." *(brand tagline)*

### Key Terminology

- **SOGI** — Sexual Orientation & Gender Identity (highest-risk data class)
- **Protection** not "detection"
- **Resilience** not "compliance"
- **Hardening** not "locking down"
- **Community** not "users"

---

## VISUAL FOUNDATIONS

### Color System

**Dark-first UI.** The primary background is near-black (`#0a0a1a`). Light mode exists only for print/docs contexts.

| Role | Value | Notes |
|---|---|---|
| Background | `#0a0a1a` | Main app bg |
| Void | `#05050f` | Deepest black, overlays |
| Surface | `#111128` | Card surfaces |
| Elevated | `#1a1a35` | Raised elements |
| Border | `#2a2a50` | Subtle borders |
| Border Glow | `#3a3a6a` | Hover borders |

**Brand Core:**
| Name | Hex | Use |
|---|---|---|
| Teal (Primary) | `#0a7e74` | Anchor brand color |
| Deep Purple (Accent) | `#3a2a5e` | Secondary brand |
| Cyan (Electric) | `#06d6e0` | Primary neon / CTA |
| Hot Pink | `#ff2d95` | Neon energy / danger |
| Violet | `#b24bf3` | Neon identity |

**Neon Spectrum** (pride-coded, not decoration):
`#ff3d00` → `#ff9100` → `#ffd600` → `#00e676` → `#448aff` → `#b24bf3` → `#ff2d95`

**Status Colors:**
| Status | Hex | Meaning |
|---|---|---|
| Protected | `#06d6e0` | Active, healthy |
| Warning | `#ffd600` | Needs attention |
| Blocked | `#ff2d95` | Threat stopped |
| Info | `#448aff` | Informational |

### Typography

| Role | Font | Fallback | Files |
|---|---|---|---|
| Display / Hero | Orbitron (700, 900) | Rajdhani, sans-serif | `fonts/orbitron-latin.woff2` |
| Heading / UI | Rajdhani (600, 700) | Inter, sans-serif | `fonts/rajdhani-{600,700}-latin{-ext}.woff2` |
| Body / Prose | Inter (400–700) | system-ui, sans-serif | `fonts/inter-{latin,latin-ext,cyrillic,...}.woff2` |
| Code / Data / Mono | JetBrains Mono (400, 500) | SF Mono, monospace | CDN (no local file provided) |

Orbitron, Rajdhani and Inter are self-hosted via `@font-face` in `colors_and_type.css`. JetBrains Mono still loads from Google Fonts CDN — provide a local `.woff2` to go fully offline.

**Type Scale:**
`xs` (12px) → `sm` (14px) → `base` (16px) → `lg` (18px) → `xl` (20px) → `2xl` (24px) → `3xl` (32px) → `4xl` (44px) → `5xl` (56px)

**Letter spacing**: Display fonts use `0.05em` uppercase tracking. Headings use `0.01–0.02em`.

### Backgrounds & Patterns

- **Circuit board SVG overlay** — subtle cyan/violet/pink trace lines at 3–8% opacity. Always behind content, `pointer-events: none`.
- **Ambient glow orbs** — radial gradients at fixed viewport positions. Violet top-right, cyan bottom-left. 6–15% opacity.
- **No photography** — no stock images in the product UI. Data and shields dominate.
- **Gradients**: Linear `135deg` for rainbow and neon fills. Radial for glow orbs and card washes.

### Cards

- **NeonCard**: Dark surface (`#111128`), 1.5px border with neon color at 27% opacity, inner radial wash, `border-radius: 16px`, `box-shadow` glow at 5% opacity.
- **RainbowCard**: 2px rainbow gradient border (as `padding` trick), same dark interior. Used for CTAs and featured moments.
- **Accent Edge**: NeonCard with heavier colored left border — for callouts/warnings.

### Glow System

Neon glow is applied via `box-shadow` and `text-shadow`. Formula:
```
0 0 20px rgba(color, 0.4), 0 0 60px rgba(color, 0.15)
```
Glows are *always subtle* — ambient, not blinding. Neon energy is implied, not aggressive.

### Motion & Animation

- **Fast**: `150ms cubic-bezier(0.4, 0, 0.2, 1)` — hover transitions, opacity
- **Base**: `250ms cubic-bezier(0.4, 0, 0.2, 1)` — card reveals, button presses
- **Slow**: `500ms cubic-bezier(0.4, 0, 0.2, 1)` — page transitions, section entries
- **Glow pulse**: `1.5s ease-in-out infinite alternate` — status indicator breathing
- **Reduced motion**: All animations respect `prefers-reduced-motion`. Glows disable gracefully.

### Hover / Press States

- **Hover**: border lightens to `borderGlow`, box-shadow intensifies slightly, cursor changes
- **Press/Active**: subtle scale down (`scale(0.98)`), color deepens
- **Focus**: visible neon outline (cyan, 2px offset) — never hidden

### Spacing System

4px base unit: `4 8 12 16 20 24 32 40 48 64 80` (px)

### Border Radius

`sm` 6px · `md` 8px · `lg` 12px · `xl` 16px · `2xl` 20px · `full` 9999px

### Elevation / Shadows

No traditional drop shadows. Elevation is conveyed through:
1. Background color depth (void → surface → elevated)
2. Neon border glow intensity
3. Radial gradient washes (lighter at top-center = simulated light source)

### Imagery Vibe

No warm photography. When imagery is used (blog editorial): dark, high-contrast, cool-toned. Circuit boards, digital textures, abstract geometry. No faces or identifiable people in product UI.

### Corner Radii in Practice

Cards: `16px`. Buttons: `8px`. Badges: `9999px` (pill). Code blocks: `8px`. Large hero containers: `20px`.

---

## ICONOGRAPHY

### Approach

Secure Pride uses **no external icon font** in v2. Icons are expressed via:
1. **Unicode symbols** in status badges (`◈` protected, `◆` warning, `✕` blocked, `○` info)
2. **Inline SVG** for the shield-padlock logo marks
3. **Aegis Icon Pack** (`mazze93/secure-pride-aegis-icons`) — WCAG AA accessible, dark-mode, low-stimulation palette. **Status**: Repo exists, SVG files not yet exported as importable assets (CLAUDE.md only present). Flag to user: request SVG exports from this repo.

### Logo System

Located in `identity-kit/`:
| File | Use |
|---|---|
| `01_primary/brass_master.svg` | Master vector, full detail |
| `02_scaled/medium_256.svg` | 256px context |
| `02_scaled/small_64.svg` | 64px context |
| `02_scaled/micro_32.svg` | 32px minimum |
| `03_mono/mono_dark.svg` | Dark bg monochrome |
| `03_mono/mono_light.svg` | Light bg monochrome |
| `04_social/favicon_32.svg` | Browser favicon |
| `04_social/linkedin_1024.svg` | Social sharing |

### Usage Rules (from `identity-kit/06_guidelines/`)

- Always use the point-down shield orientation
- Never rotate, skew, or stretch the mark
- Minimum clear space: equal to the padlock height on all sides
- On dark backgrounds: use rainbow or neon variant
- On light backgrounds: use mono_light only
- Never place on a busy texture without a clear zone

---

## FILE INDEX

```
README.md                  ← This file
SKILL.md                   ← Agent skill definition
colors_and_type.css        ← CSS variables: colors, type, spacing, motion
editorial.css              ← Prose/blog styles (scoped .prose)
design-system-v2.jsx       ← Living design system React artifact (source)

identity-kit/              ← Official logo assets
  01_primary/              ← Master SVG
  02_scaled/               ← Sized variants (256, 64, 32)
  03_mono/                 ← Monochrome variants
  04_social/               ← Favicon, LinkedIn
  06_guidelines/           ← Logo usage rules (markdown)

assets/                    ← Brand assets for use in designs
  logos/                   ← Copied logo SVGs (ready to embed)

preview/                   ← Design System tab cards
  colors-brand.html
  colors-neon.html
  colors-surfaces.html
  colors-status.html
  type-specimens.html
  type-scale.html
  spacing-tokens.html
  components-buttons.html
  components-badges.html
  components-cards.html
  components-hero.html
  brand-logos.html
  brand-patterns.html

ui_kits/
  web/                     ← Secure Pride web UI kit
    index.html             ← Interactive prototype
    README.md
```

---

## Sources

- **Primary codebase**: `mazze93/Secure-Pride` (GitHub) — design tokens, brand assets, landing copy, editorial CSS, document engine
- **Icon pack**: `mazze93/secure-pride-aegis-icons` (GitHub) — README only; SVG exports not yet available
- **Related repos explored**: `mazze93/mazze93-leczzare-blog`, `mazze93/praxis`, `mazze93/daedalus`
- **No Figma provided** — all design context derived from code