# Empowered Women Alliance — Design System

A brand & UI design system for **Empowered Women Alliance (EWA)**, a nonprofit organization
dedicated to uplifting women of all backgrounds through **connection, education, and leadership**.

> *"Empowered Women. Stronger Together. Limitless Impact."*

The brand voice is warm, dignified, and aspirational — an elegant editorial feel (high-contrast
serif display type + a clean humanist sans) anchored by a signature palette of **deep aubergine
plum** and **metallic gold** on warm cream.

---

## Sources

This system was built from the brand assets provided by the client:

- `assets/reference/website-concept.png` — full homepage concept mockup (desktop + mobile). The
  primary source of truth for layout, color, type and component styling.
- `assets/logos/` — four logo lockups:
  - `ewa-logo-stacked.jpg` — vertical mark + wordmark (primary)
  - `ewa-logo-horizontal.jpg` — mark + wordmark side-by-side (headers)
  - `ewa-logo-round.jpg` — circular badge with curved "EMPOWERED WOMEN ALLIANCE" lettering
  - `ewa-mark.jpg` — the symbol only (four women in a circle)

No codebase or Figma file was provided — the website concept image is the canonical reference.

> **Font substitution:** the logo lettering is a bespoke high-contrast serif. No font binaries
> were supplied, so the nearest Google Fonts matches are used (**Cormorant Garamond** for display,
> **Mulish** for body/UI). Swap in licensed brand fonts when available — see `tokens/fonts.css`.

---

## CONTENT FUNDAMENTALS

**Voice & tone.** Warm, uplifting, communal, and confident — never corporate or clinical. Copy
speaks *to* and *about* a community ("a community built on strength, unity, and real impact").
It is encouraging and movement-oriented: belonging, momentum, and shared purpose.

**Person.** Mixes inclusive **"we"** (the organization and its members as one body — *"We believe
that when women are empowered…"*) with direct invitations in the **imperative** ("Join the
Alliance," "Learn More," "Donate Today," "RSVP Now"). Second-person "you" appears in calls to
action ("Ready to be part of something bigger?").

**Casing.**
- Headlines & section titles: **Title Case**, set in the serif ("Built on Unity. Driven by Impact.",
  "Programs That Empower", "Join Us at Our Next Events").
- Eyebrows / kickers: **ALL CAPS** with wide letter-spacing, in gold ("ABOUT US", "WHAT WE DO",
  "UPCOMING EVENTS", "COMMUNITY VOICES").
- Buttons: **ALL CAPS**, wide tracking ("JOIN THE ALLIANCE", "LEARN MORE").
- Body: sentence case.

**Sentence style.** Short, declarative, and often built from punchy fragments separated by periods
for rhythm ("Empowered Women. Stronger Together. Limitless Impact."). Descriptions are one or two
plain sentences. Stats are framed as outcomes ("1,500+ Women Empowered", "120+ Events Hosted",
"30+ Community Partnerships").

**Vocabulary.** *empower, uplift, community, sisterhood, connection, growth, confidence, impact,
movement, belonging, leadership, together, strength, unity.* Avoids jargon and hype.

**Emoji:** none. The brand is elegant and editorial — emoji would undercut the tone. Use the
line-icon set instead.

**Example microcopy**
- Hero: *"A community built on strength, unity, and real impact."*
- About: *"Empowered Women Alliance is a nonprofit organization dedicated to uplifting women of
  all backgrounds through connection, education, and leadership."*
- Program card: *"One-on-one and group mentorship to inspire growth and confidence."*
- Testimonial: *"This community changed my life. I found support, confidence, and a sisterhood I
  never knew I needed."* — Maria S., Community Member
- Footer CTA: *"Join a movement of women creating stronger communities and limitless impact."*

---

## VISUAL FOUNDATIONS

**Color.** Two brand colors do the heavy lifting:
- **Aubergine plum** (`--plum-800` `#3A1631`) — hero background, footer, stats band, headings, and
  the symbol silhouettes. Deep, rich, dignified.
- **Metallic gold** (`--gold-600` `#C49245`) — primary buttons, eyebrows, icons, stat numbers,
  underlines, and the "WOMEN" word in the logo. Used as a warm accent, never as large fills.

Supporting neutrals are **warm**: a near-white **cream** page background (`#F8F7F5`), white cards,
and a **soft blush** band (`#F6E9E5`) used once (the testimonial section) for gentle contrast. Text
is a warm near-black (`#2B1A26`) with muted plum-grey for secondary copy. There are no cool greys
and no blue/purple tech gradients.

**Type.** High-contrast serif (Cormorant Garamond) for all headings, hero, and pull-quotes — elegant,
editorial, slightly condensed at large sizes. Clean humanist sans (Mulish) for body, labels, nav, and
buttons. Eyebrows and buttons are uppercase with wide tracking (`0.18em`). Headlines use tight leading
and balanced wrapping.

**Backgrounds.** Solid color blocks, not gradients. Sections alternate between cream (default), white
(cards), plum (hero / stats / footer / final CTA), and a single blush band. Photography is used
full-bleed in the hero (right half) and as framed rectangles elsewhere. No textures, no patterns, no
hand-drawn illustration. The only "decoration" is the gold logo mark and thin gold hairline rules.

**Imagery.** Authentic, warm-toned documentary photography of diverse women — candid, joyful, real
(not stocky or posed). Warm color grade, natural light, never black-and-white. People are always the
subject. Event thumbnails are small rounded rectangles with a plum date chip overlaid top-left.

**Cards.** White surface, very subtle shadow (`--shadow-sm`), hairline border (`--line-200`), small
radius (`--radius-md` 10px) — restrained and crisp, not pill-soft. Program cards center a circular
**gold outline icon badge** (thin ring, gold line icon inside) above a serif title, short sans
description, and a gold "LEARN MORE →" link.

**Borders & radii.** Hairline 1px borders in warm grey. Radii are modest: buttons ~6px, cards ~10px,
images ~12px, icon badges and avatars are full circles. Nothing is heavily rounded.

**Shadows.** Soft, low, warm-tinted (plum-tinted rgba), used sparingly to lift cards and the hero
buttons. No hard drop shadows, no neumorphism, no glow.

**Hover states.** Buttons darken slightly (gold → deeper gold; plum → deeper plum) and lift with a
slightly larger shadow. Links reveal an underline or slide their trailing arrow `→` a few px right.
Cards lift (raise shadow, ~2px translateY).

**Press / active.** Subtle scale-down (~0.98) and shadow reduction. No color inversion.

**Focus.** Gold focus ring (`--shadow-focus`, a 3px soft gold halo) — accessible and on-brand.

**Motion.** Quiet and graceful. Fades and short upward slides on scroll-in (`--ease-out`, 220–360ms).
No bounces, no spin, no parallax. Carousels cross-fade. Respect `prefers-reduced-motion`.

**Transparency / blur.** Minimal. The hero photo meets the plum block with a soft horizontal
gradient overlay so white text stays legible — that protective gradient is the main use of
transparency. No glassmorphism / backdrop-blur in the core brand.

**Layout.** Centered max-width container (~1200px) with generous side padding. Section vertical
rhythm is large and airy (`--section-y`). 3–4 column card grids on desktop collapse to single column
on mobile. The sticky top nav is white with the horizontal logo left, text links center, and a gold
"JOIN THE ALLIANCE" button right.

---

## ICONOGRAPHY

**Style.** Thin, single-weight **line icons** (outline, ~1.5–2px stroke, rounded joins) in **gold**,
each centered inside a **thin circular gold ring badge** on the program cards and stats band. The
look is delicate and elegant, matching the serif type. Icons are never filled solid and never
multicolor.

**Source / substitution.** No icon assets were provided in the brand files. The closest CDN match to
the concept's thin rounded outline style is **[Lucide](https://lucide.dev)** (1.5px stroke, rounded
line caps). UI kits and cards load Lucide from CDN and color it gold via `currentColor`. *(Flagged
substitution — replace with the brand's own icon set if one exists.)* Observed icons in the concept:
users/people (mentorship), open book (workshops), calendar (events), star (leadership), heart-handshake
(partnerships), map-pin, clock, social glyphs (Facebook, Instagram, LinkedIn, X) in the footer.

**Emoji / unicode:** not used. The only repeated glyph is a trailing arrow `→` on links and a
quotation mark on testimonials. Logo silhouettes are brand artwork, not icons.

---

## INDEX — what's in this system

**Root**
- `styles.css` — global entry point (import this one file). `@import`s everything below.
- `readme.md` — this guide.
- `SKILL.md` — Agent-Skills wrapper so the system can be used in Claude Code.

**`tokens/`** — design tokens (CSS custom properties)
- `colors.css` · `typography.css` · `spacing.css` · `fonts.css` · `base.css`

**`assets/`**
- `logos/` — the four EWA logo lockups · `reference/` — the website concept image

**`components/`** — reusable React UI primitives (see cards in the Design System tab)
- `core/` — `Button`, `Eyebrow`, `Card`, `ProgramCard`, `Badge`, `StatBlock`, `EventCard`, `Input`, `Logo`

**`ui_kits/`**
- `website/` — high-fidelity click-through recreation of the EWA marketing site

**Foundation specimen cards** — small tagged `.html` files throughout (Type, Colors, Spacing, Brand)
populate the **Design System** tab.

> Compiler namespace for card/kit scripts: `window.EmpoweredWomenAllianceDesignSystem_b1c769`.
