Style Guide

Colour

Corporate palette and tints. White text only on Mahogany, Mahogany 80%, Cyan and Cyan 80%. Everything else takes black text and is never a text colour on white.

Mahogany

• mahogany --zd4t-mahogany White text
• mahogany-80 --zd4t-mahogany-80 White text
• mahogany-40 --zd4t-mahogany-40 Black text
• mahogany-20 --zd4t-mahogany-20 Black text

Gold

• gold --zd4t-gold Black text
• gold-80 --zd4t-gold-80 Black text
• gold-60 --zd4t-gold-60 Black text
• gold-40 --zd4t-gold-40 Black text

Orange

• orange --zd4t-orange Black text
• orange-80 --zd4t-orange-80 Black text
• orange-40 --zd4t-orange-40 Black text
• orange-20 --zd4t-orange-20 Black text

Cyan

• cyan --zd4t-cyan White text
• cyan-80 --zd4t-cyan-80 White text
• cyan-60 --zd4t-cyan-60 Black text
• cyan-40 --zd4t-cyan-40 Black text

Gray

• gray --zd4t-gray Black text
• gray-60 --zd4t-gray-60 Black text
• gray-40 --zd4t-gray-40 Black text
• gray-20 --zd4t-gray-20 Black text

Typography

Lato 400 and 700 with italics, self-hosted; Arial is the fallback for the whole stack.

Heading 1: Empowering women through service and advocacy --zd4t-text-4xl

Heading 2: Empowering women through service and advocacy --zd4t-text-3xl

Heading 3: Empowering women through service and advocacy --zd4t-text-2xl

Heading 4: Empowering women through service and advocacy --zd4t-text-xl

Large: Empowering women through service and advocacy --zd4t-text-lg

Body: Empowering women through service and advocacy --zd4t-text-base

Small: Empowering women through service and advocacy --zd4t-text-sm

Bold, italic, bold italic, a text link and small print.

Zonta International is a leading global organization of professionals empowering women worldwide through service and advocacy.

Buttons

Primary Secondary Outline Button element

Press Tab to see focus rings: Cyan on light surfaces, Gold on dark ones.

Icons

Lucide subset, inlined with zd4t_icon( 'name' ). Decorative unless given a label.

• arrow-right
• award
• book-open
• calendar-days
• chevron-down
• clock
• download
• external-link
• facebook
• globe
• graduation-cap
• hand-coins
• handshake
• heart-handshake
• info
• instagram
• landmark
• linkedin
• locate-fixed
• mail
• map-pin
• megaphone
• menu
• newspaper
• phone
• search
• sparkles
• trending-up
• user
• users
• x
• youtube

Cards

Spacing

• --zd4t-space-1
• --zd4t-space-2
• --zd4t-space-3
• --zd4t-space-4
• --zd4t-space-5
• --zd4t-space-6
• --zd4t-space-7
• --zd4t-space-8
• --zd4t-space-9

Containers: --zd4t-maxw 1200px, --zd4t-maxw-narrow 760px (reading width).