AEDS Design System — Next.js Platform
Theme
v1.0
Foundation
Design Tokens
All color, type, and spacing values are defined as CSS custom properties in globals.css. These are the single source of truth — never hardcode hex values in components.
Green Scale
950
900
800
700
600
500
400
300
200
100
50
--green-700
#1B6B3A
primary-green (CSS)
--green-500
#2E8B57
secondary-green (CSS)
--green-900
#0D3D24
footer-dark
--neutral-50
#F4F4EF
light-bg / page bg
Gold Scale
800
700
600
500
400
300
200
100
50
--gold-600
#D4A017
gold — CTAs, accents
--gold-400
#F5C842
light-gold — highlights
--gold-700
#A07010
hover state for gold
--gold-100
#FEF5D6
gold tint backgrounds
Neutral Scale
950
800
700
600
500
400
300
200
100
50
CSS Custom Properties
/* globals.css — root tokens */
--primary-green: #1B6B3A;
--secondary-green: #2E8B57;
--gold: #D4A017;
--light-gold: #F5C842;
--light-bg: #F4F4EF;
--nav-bg: #EAEAE4;
--dark-text: #1A1A1A;
--footer-dark: #0D3D24;

/* Tailwind config aliases */
primary-green: #1A5C35  /* slightly darker variant */
secondary-green: #236B40
footer-dark: #0D2B1A
Brand
Site Identities
All six sites share the same Next.js codebase and base green/gold tokens. Each subdomain applies a unique accent color to differentiate its identity while staying within the AEDS brand family.
aeds-usa.org
AEDS National
Parent Site
Full AEDS brand — primary green + gold. The flagship site, source of truth for all shared components. No accent deviation.
mn.aeds-usa.org
AEDS Minnesota
Chapter
Minnesota Blue #003865 replaces green as the primary accent. Green retained as secondary. Gold unchanged.
or.aeds-usa.org
AEDS Oregon
Chapter
Pacific Teal #1A5C52 — inspired by Oregon's coastal forests. Shares gold, shifts green toward teal.
museum.aeds-usa.org
African Museum
Initiative
Terracotta #8B3A14 primary — warm, cultural, earthy. Warm gold #C9882A replaces standard gold.
festival.aeds-usa.org
Little Africa Festival
Initiative
Vibrant Orange #D94F0A primary. Bold, celebratory energy. Light gold #F5C842 as accent. Most distinctive identity.
conference.aeds-usa.org
NALC Conference
Initiative
Deep Navy #0C1E3A primary — authoritative, professional leadership conference feel. Gold unchanged.
Foundation
Typography
Font family: Inter (Google Fonts). Used exclusively across all six sites. Weight range: 300–900.
Type Scale
display
48px / 800 / -0.02em
Empowering Communities
h1
36px / 800 / -0.01em
Building Economic Opportunity
h2
28px / 700 / -0.01em
Our Programs & Services
h3
22px / 700
Business Development Lending
h4
18px / 700
Upcoming Community Events
h5
15px / 700
Staff & Leadership Team
body-lg
16px / 400 / 1.75
AEDS-MN serves the Twin Cities African immigrant and refugee community through business development, homeownership programs, and economic empowerment initiatives.
body
14px / 400 / 1.65
Our loan programs provide affordable capital to small business owners who may not qualify for traditional bank financing. We offer flexible terms and personalized support throughout the process.
caption
12px / 500
Last updated May 11, 2026 · African Economic Development Solutions
label
11px / 700 / uppercase
Community Programs
Link Styles
Foundation
Spacing Scale
Base unit is 4px. All spacing uses multiples of 4. Tailwind spacing utilities (p-4, gap-6, etc.) map to this scale.
Scale Reference
1 (4px)
4px
2 (8px)
8px
3 (12px)
12px
4 (16px)
16px
5 (20px)
20px
6 (24px)
24px
8 (32px)
32px
10 (40px)
40px
12 (48px)
48px — section padding
16 (64px)
64px — section gap
20 (80px)
80px — hero padding
Border Radius
rounded
4px
rounded-md
6px
rounded-lg
8px — buttons
rounded-xl
12px — cards
rounded-2xl
16px — sections
rounded-full
badges, pills
Brand
Layout Patterns
Reusable page-level patterns used across all six sites.
Hero Section
African Economic Development Solutions
Building Stronger
Communities Together
Empowering African immigrant entrepreneurs, homeowners, and community leaders across Minnesota and beyond.
500+
Businesses Supported
$2M+
Loans Issued
20+
Years of Service
6
Sites & Chapters
Section Header Pattern
Our Impact
Programs That Change Lives
From small business lending to homeownership counseling, every program is designed to remove barriers and create lasting economic opportunity for the communities we serve.
Components
Buttons
Four variants matching the Button.tsx component. Three sizes: sm, md, lg.
Variants
All variants — md size variant="primary|secondary|outline|gold|ghost"
On dark background footer / hero surfaces
Sizes
size="sm | md | lg"
With Icons
Components
Form Elements
Used in contact forms, loan applications, volunteer signups, event registrations, and the admin dashboard.
Input States
Text inputs — default, focus, error, success
As it appears on your ID
We'll send your confirmation here
⚠ Business name must be at least 3 characters
Select, Textarea & Checkboxes
Weekday mornings
Weekday afternoons
Weekends
Email
Phone call
Text message
Components
Cards
Four card types matching existing components: EventCard, ProgramCard, staff/team, and blog/news.
Event Card
🏘 Community
15
Jun
Annual AEDS Community Celebration
🕐6:00 PM – 9:00 PM
📍Roy Wilkins Auditorium, St. Paul
🏢 Workshop
22
Jun
Small Business Loan Application Workshop
🕐10:00 AM – 12:00 PM
📍AEDS Office, Suite S-145
🎤 Conference
10
Aug
National African Leadership Conference 2026
🕐8:00 AM – 6:00 PM
📍Minneapolis Convention Center
Program Card
💼
Business Development
One-on-one consulting, business planning, and access to capital for entrepreneurs at every stage.
Learn More →
🏠
Homeownership
Down payment assistance, credit counseling, and homebuyer education for first-time buyers.
Learn More →
🤝
Community Building
Events, networking, mentorship, and civic engagement programs connecting the African diaspora.
Learn More →
Staff & Blog Cards
JB
Jalene Burka
Executive Director
jalene@aeds-mn.org
AM
Abdi Mohamed
Lending Officer
abdi@aeds-mn.org
📰
News & Updates
AEDS Secures $500K Grant for Small Business Lending Program
The grant will expand our microloan program, allowing us to serve an additional 50 small business owners in the Twin Cities this year...
May 5, 2026
Components
Badges & Alerts
Badges are used for event categories, program tags, and status labels. Alerts appear in forms and admin dashboard notifications.
Badges
Category badges
Community Workshop Conference Business Urgent Archived Open
Status badges — admin dashboard
● Active ● Pending Review ● Closed ● Draft ● Published
Alerts
✓
Application submitted successfully
Your loan inquiry has been received. A lending officer will contact you within 2 business days.
✕
Submission failed
Please check the highlighted fields and try again. All required fields must be completed.
⚠
Action required
Your volunteer application is missing a phone number. Please update your profile to continue.
ℹ
Event registration closes soon
Registration for the Small Business Workshop closes June 20. Reserve your spot today.
AEDS Design System · Next.js Platform · v1.0
Revamp Digital LLC · gorevamp.ai · May 2026