# 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`.