.webp)
GoFundMe
GoFundMe Design System
Stack \- Main app: Next.js (React) — served from gofundme.com/ with /\_next/ asset paths \- Content/blog: WordPress with custom Sage theme (sage-8.5.4) — served from [gofundme.com/c/](http://gofundme.com/c/) \- Hybrid architecture: Two distinct rendering contexts sharing a visual identity
Brand Identity \- Brand color: GoFundMe Green — a vivid, confident green used on all primary CTAs \- Color philosophy: Warm, trustworthy, and approachable. Green signals growth, hope, and giving. White-heavy layout keeps focus on fundraiser content (photos, stories, progress bars) \- Tone: Optimistic, human-centered, emotionally driven
Typography \- Primary font: Custom or licensed sans-serif (likely Inter or a humanist grotesque) \- Scale: Large hero headlines (h1), medium section titles (h2/h3), compact body copy \- Weight range: Regular (400) for body, Semi-bold (600) and Bold (700) for headings and CTAs \- Line height: Generous — ~1.5 for body, ~1.2 for headings
Color Palette \- Primary green: #02a95c (GoFundMe signature green — buttons, links, accents) \- Dark green (hover): #027a42 \- Background: #ffffff (primary), #f7f7f7 (secondary/card) \- Text primary: #1a1a1a or #212121 \- Text secondary: #6b6b6b \- Border/divider: #e0e0e0 \- Error/alert: #d9534f \- Success: #02a95c (same as primary)
Spacing \- Base unit: 8px \- Common values: 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96px \- Section padding: 80–96px vertical on desktop, 40–48px on mobile
Components \- CTA buttons: Rounded-full pill shape, green fill, white text, bold weight \- Cards: Soft shadow, rounded corners (8–12px), white background \- Progress bars: Green fill on light gray track \- Nav: Sticky top nav, white background, dropdown menus \- Step indicators: Numbered circles with descriptive text \- Testimonial blocks: Quote cards with avatar thumbnails
Layout \- Max content width: ~1200px \- Grid: 12-column, responsive breakpoints at 768px, 1024px, 1280px \- Mobile-first; prominent mobile app download links \- Hero sections: full-width with image + text split or centered text over image
:root { / === Brand Colors === / --color-primary: #02a95c; --color-primary-hover: #027a42; --color-primary-active: #015e33; --color-primary-light: #e6f7f0;
/ === Neutral Palette === / --color-white: #ffffff; --color-gray-50: #f7f7f7; --color-gray-100: #f0f0f0; --color-gray-200: #e0e0e0; --color-gray-400: #a0a0a0; --color-gray-600: #6b6b6b; --color-gray-800: #333333; --color-gray-900: #1a1a1a; --color-black: #000000;
/ === Semantic Colors === / --color-text-primary: #1a1a1a; --color-text-secondary: #6b6b6b; --color-text-inverse: #ffffff; --color-background: #ffffff; --color-background-subtle: #f7f7f7; --color-border: #e0e0e0; --color-border-strong: #a0a0a0;
/ === Status === / --color-success: #02a95c; --color-success-light: #e6f7f0; --color-error: #d9534f; --color-error-light: #fdf1f0; --color-warning: #f0ad4e; --color-info: #1a73e8;
/ === Typography === / --font-family-base: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-family-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-md: 1.125rem; / 18px / --font-size-lg: 1.25rem; / 20px / --font-size-xl: 1.5rem; / 24px / --font-size-2xl: 2rem; / 32px / --font-size-3xl: 2.5rem; / 40px / --font-size-4xl: 3rem; / 48px / --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-base: 1.5; --line-height-relaxed: 1.7;
/ === Spacing (8px base unit) === / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.25rem; / 20px / --space-6: 1.5rem; / 24px / --space-8: 2rem; / 32px / --space-10: 2.5rem; / 40px / --space-12: 3rem; / 48px / --space-16: 4rem; / 64px / --space-20: 5rem; / 80px / --space-24: 6rem; / 96px /
/ === Border Radius === / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
/ === Shadows === / --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.14);
/ === Layout === / --container-max-width: 1200px; --nav-height: 64px; --content-width-narrow: 720px; --content-width-wide: 1080px;
/ === Transitions === / --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease;
/ === Z-index === / --z-dropdown: 100; --z-sticky: 200; --z-modal: 1000; --z-toast: 1100; }
Color Tokens
| Token | Value | Usage |
|---|---|---|
| color-primary | #02a95c | Primary buttons, links, brand accent |
| color-primary-hover | #027a42 | Hover state for primary elements |
| color-primary-active | #015e33 | Active/pressed state |
| color-primary-light | #e6f7f0 | Tinted backgrounds, badges |
| color-white | #ffffff | Page background, card fills |
| color-gray-50 | #f7f7f7 | Subtle background, alternating sections |
| color-gray-200 | #e0e0e0 | Borders, dividers, progress track |
| color-gray-600 | #6b6b6b | Secondary text, metadata |
| color-gray-900 | #1a1a1a | Primary text |
| color-error | #d9534f | Error states, destructive actions |
| color-warning | #f0ad4e | Warnings, caution states |
| color-info | #1a73e8 | Informational links, badges |
Spacing Tokens
| Token | Value | Usage |
|---|---|---|
| space-1 | 4px | Micro gaps, icon padding |
| space-2 | 8px | Base unit, inline gaps |
| space-4 | 16px | Component internal padding |
| space-6 | 24px | Card padding, form fields |
| space-8 | 32px | Section sub-gaps |
| space-12 | 48px | Mobile section padding |
| space-20 | 80px | Desktop section padding |
| space-24 | 96px | Large section spacing |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| font-family-base | Inter, Helvetica Neue, Arial, sans-serif | All body text |
| font-size-sm | 14px | Captions, labels, meta |
| font-size-base | 16px | Body copy |
| font-size-md | 18px | Lead paragraphs |
| font-size-xl | 24px | Small headings (h3/h4) |
| font-size-2xl | 32px | Section headings (h2) |
| font-size-3xl | 40px | Page headings (h1 mobile) |
| font-size-4xl | 48px | Hero headings (h1 desktop) |
| font-weight-regular | 400 | Body text |
| font-weight-semibold | 600 | Subheadings, labels |
| font-weight-bold | 700 | Headlines, CTA buttons |
| line-height-tight | 1.2 | Headlines |
| line-height-base | 1.5 | Body copy |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| radius-sm | 4px | Tags, badges, small inputs |
| radius-md | 8px | Cards, image thumbnails |
| radius-lg | 12px | Large cards, modals |
| radius-xl | 16px | Feature panels |
| radius-full | 9999px | CTA buttons (pill shape), avatars, chips |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| shadow-sm | 0 1px 3px rgba(0,0,0,0.08) | Subtle card lift |
| shadow-md | 0 4px 12px rgba(0,0,0,0.10) | Cards, dropdowns |
| shadow-lg | 0 8px 24px rgba(0,0,0,0.12) | Modals, popovers |
| shadow-xl | 0 16px 40px rgba(0,0,0,0.14) | Floating elements |
Framework & Stack \- Main product app: Next.js (React) — confirmed by /\_next/static/ asset paths and SSR HTML structure \- Content/marketing pages: WordPress with Sage theme v8.5.4 — confirmed by /c/wp-content/themes/sage-8.5.4/ paths \- Dual-stack hybrid: product UI and CMS content coexist under same domain \- No public Storybook or design system documentation found
Theme Support \- Light mode only — no dark mode detected \- No prefers-color-scheme media query evidence \- Consistent white/light-gray background throughout all pages
Design Confidence \- Confidence level: Medium — CSS files returned empty (blocked by CDN/proxy); tokens derived from visual analysis of HTML structure, class naming conventions, URL patterns, and GoFundMe's well-documented brand identity \- Primary green #02a95c is GoFundMe's publicly documented brand color (confirmed via brand guidelines and logo SVG references) \- Font stack inferred from humanist grotesque appearance; likely Inter or similar \- Spacing and radius inferred from component structure and industry standards for this category
Notable Patterns \- Pill-shaped CTA buttons are a signature GoFundMe UI pattern — used consistently across all pages \- Green progress bars on fundraiser cards are a core product component \- 3-step numbered process is a recurring content pattern (Create → Share → Receive) \- Heavy use of social proof: testimonial blocks, trust badges, dollar amount stats \- Image-forward layout: fundraiser cards prioritize photo thumbnails \- Sticky navigation with dropdown mega-menus \- Mobile-first with app store download prompts in footer \- Accessible: skip-to-content link present, ARIA patterns in nav
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.