00
Design System
Charify’s source of truth for text styles, colours, imagery and components. Type /design-system in the Framer Agent to build new pages with this system.
One system for every new page.
Build every new page from the styles and components below. Reuse the section layouts on the Home page, apply the shared Template layout so the navigation and footer stay consistent, and keep orange as the main accent.
01
Typography
Archivo for every role. Always apply a text style; never set inline type.
Heading 1 · 67 / 77 · Bold · h1 — Page hero title. One per page.
Empowering communities
Heading 3 · 47 / 57 · Bold · h3 — Top-level section titles.
Donate to our campaigns
Heading 5 · 32 / 32 · Bold — Statistic values and footer headings.
$160k raised
Heading 6 · 21 / 33 · Bold — Card titles, names and sub-headings.
Become a volunteer
H6 Heading 19 · 19 / 28 · Bold — Hero supporting line and category labels.
In a world where challenges abound, the power of compassion can transform lives.
H6 Heading 19 Regular · 19 / 37 — Testimonial quotes.
“Working with this organization has been a truly transformative experience.”
Body-16px-Regular · 16 / 32 — Paragraphs and supporting copy.
Our charity is dedicated to uplifting communities and individuals by providing essential resources, support, and opportunities for a brighter future.
Body-14px · 14 / 25 · Bold — Eyebrows above section titles and statistic labels.
RECENT CAMPAIGNS
Body-12px-Semibold · 12 / 12 — Navigation menu items only.
CONTACT US
02
Colours
Use colour styles only. Orange is the primary accent; yellow, green, blue and pink are secondary accents.
Orange Color · #F75024
Primary accent: main CTAs, eyebrows, active and hover links.
Yellow Color · #FFAD04
Secondary CTA (Explore More, Join Now) and statistic labels.
Heading Color · #232323
Headings on light backgrounds.
Text Color · #686868
Body copy on light backgrounds.
White · #FFFFFF
Page background and text on dark or orange surfaces.
Shape Bg · #232323
Dark surfaces: hero, header, donation and footer areas.
Facts Border · #F1EBE0
Card and divider borders on light backgrounds.
Border Color · White 15%
Dividers and outlines on dark surfaces.
Form Bg · White 5%
Input and glass panels on dark surfaces.
Text Color Two · #232323 20%
Muted text and FAQ borders.
Green Color · #31D389
Category accent only, for example the second join button.
Blue Color · #38BAE4
Category accent only, for example statistics and dates.
Pink Color · #C75CD9
Category accent only.
03
Imagery
Warm documentary photography of real people and communities. Reuse these project images; crop with 15px radius.
04
Components
Reusable components. Use these instances instead of rebuilding buttons, headers, FAQs or social links.
Button
Primary pill button. theme-button for the main orange CTA (Donate Now), Hero-btn and Hero-btn 2 as the hero pair, join and join now inside cards. Set the label with the title control and the fill with the background control.
donate now
explore more
our volunteers
join volunteer
join now
Button Two
Form submit button with Default, Loading, Disabled, Success and Error states. Use Subscribe now for newsletter forms and Send Message for contact forms.
Page-title
Header banner with breadcrumb for every inner page. Set the page name with the text control. Do not use on Home.
About Us
Accordion Open
Single FAQ item with question and answer controls. Closed and Open variants toggle on tap.
1. What is the mission of the charity?
1. What is the mission of the charity?
Our mission is to [insert mission statement], which aims to [describe the specific goals and causes supported by the charity]. We focus on [key areas of impact like education, health, environment, etc.] and work to make a lasting difference in the lives of those in need.
Accordion
FAQ list used on the FAQ page. Reuse it for any FAQ block.
1. What is the mission of the charity?
Our mission is to [insert mission statement], which aims to [describe the specific goals and causes supported by the charity]. We focus on [key areas of impact like education, health, environment, etc.] and work to make a lasting difference in the lives of those in need.
2. How can I donate to the charity?
3. Is my donation tax-deductible?
4. How does the charity use donations?
5. How can I get involved with the charity?
Social
Footer social icon. One variant per platform: Facebook, Twitter, LinkedIn, Instagram.
Nav
Site header with top contact bar, menu and Donate Now button. Lives in the Template layout; never rebuild it on a page.
Footer
Site footer with newsletter, donors, quick links and social icons. Lives in the Template layout; never rebuild it on a page.