MyGiving Brand Guidelines

Color

Pine, cream, and a palette per spoke, felt mostly through gradient, not flat fills.

500 is the brand colour

Every brand palette is built around its 500 step, marked Base in each ramp below. When someone asks for “the MyFridays orange”, that’s the one. Lighter steps are for backgrounds and tints, darker steps for text and pressed states.

Primary Palette

Confirmed

Pine and cream, each a full 50–950 ramp. Both match what already ships in globals.css exactly, confirmed against Figma’s System Colours board.

Pine

MyGiving primary

50

#F6F8F9

100

#DAE7E3

200

#BED6CD

300

#99C0AF

400

#6AA48A

500 · Base

#34835F

600

#2E7354

700

#28654A

800

#21543D

900

#1A4230

950

#102B1F

Cream

Warm neutral ground

50

#FCFCFE

100

#FBFBF9

200

#FAFAF5

300

#F8F8EF

400

#F6F6E7

500 · Base

#F3F4DE

600

#D6D7C3

700

#BCBDAC

800

#9C9D8F

900

#7A7A70

950

#393934

The hub gradient

Per the Logo page’s Primary Mark rationale, colour in this system is felt through gradient, not flat fill: “the gradient itself is the entire idea... night into day into night again, not depicted, just felt through colour.” MyGiving’s own gradient runs Cream-500 into Pine-700.

Neutral Palette

Confirmed

Plain UI grays for body copy, borders, and muted states, not a brand hue. A full 50–950 ramp matching Figma’s System Colours board, with no base step marked since it exists to stay out of the way of pine, cream, and the spoke colours.

Neutral

Text & borders

50

#FAFAFA

100

#F5F5F5

200

#E5E5E5

300

#D4D4D4

400

#A3A3A3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0A0A0A

Spoke Palettes

Confirmed

Six ramps across the four confirmed spokes, two each for MyTenDays and MyFajr. Only the base (500) tone shipped in code before now; the full ramps below are sourced from Figma’s System Colours board and added to globals.css alongside it.

MyTenNights Blue

MyTenNights

50

#F4F7FE

100

#D1E1F9

200

#AECAF4

300

#80ADEE

400

#4688E6

500 · Base

#025DDD

600

#0252C2

700

#0248AB

800

#023C8E

900

#022F6F

950

#001635

MyTenDays Blue

MyTenDays

50

#FBFCFF

100

#F5F8FD

200

#EEF5FC

300

#E6F1FB

400

#DCEBF9

500 · Base

#D0E4F7

600

#B7C9D9

700

#A1B1BF

800

#86939F

900

#69737C

950

#3F464B

MyTenDays Yellow

MyTenDays

50

#FCFAF8

100

#FBF1DE

200

#FAE8C3

300

#F8DCA0

400

#F6CD74

500 · Base

#F4BB41

600

#D7A539

700

#BD9132

800

#9D782A

900

#7A5E21

950

#403111

MyFajr Teal

MyFajr

50

#FAFCFE

100

#F2F9FB

200

#E9F5F8

300

#DEF1F5

400

#D0EBF0

500 · Base

#C0E4EA

600

#A9C9CE

700

#95B1B5

800

#7B9396

900

#607275

950

#3A4547

MyFajr Peach

MyFajr

50

#FCFAFB

100

#FCF2F1

200

#FDE9E6

300

#FDDDD7

400

#FDCEC4

500 · Base

#FEBCAE

600

#E0A599

700

#C59287

800

#A37970

900

#7F5E57

950

#4D3935

MyFridays Orange

MyFridays

50

#FCF7F7

100

#FAE3D8

200

#F8CEB9

300

#F6B390

400

#F3905C

500 · Base

#EF6820

600

#D25C1C

700

#B95119

800

#B95119

900

#9A4315

950

#562409

The five system gradients

Figma’s Gradients board pairs each entity with its own two-stop gradient rather than a flat swatch, the same five used on the Family of Products cards.

MyGiving

Pine

MyTenNights

MyTenNights Blue

MyFridays

MyFridays Orange

MyTenDays

MyTenDays Blue

MyFajr

MyFajr Teal → MyFajr Peach

Named Palette Groupings

Open, proposed

Not sourced in Figma. A Headspace-style name per ramp (their “Core / Sleep / Care” equivalent) hasn’t been decided. Proposed below, borrowing the night-into-day language from the primary mark’s own rationale, pending sign-off.

RampEntityProposed name
PineMyGiving, the hubGround
MyTenNights BlueMyTenNightsNight
MyFridays OrangeMyFridaysDawn
MyTenDays BlueMyTenDaysSky
MyFajr Teal + MyFajr PeachMyFajrHorizon

Accessibility

Open, proposed

No formal accessibility documentation exists in Figma yet. Below is a first-pass WCAG contrast check against the pairings this system actually uses, not a final sign-off.

PairingRatioVerdictUse
Pine-950 on Cream-10014.6:1AAABody text on light surfaces
White on Pine-90011.3:1AAAText on dark, brand-colour surfaces
Neutral-600 on White7.8:1AAASecondary copy
Pine-950 on MyTenDays Blue-50011.6:1AAAText on the MyTenDays card
Pine-950 on MyTenDays Yellow-5008.7:1AAAText on the MyTenDays yellow accent
Pine-950 on MyFajr Teal-50011.2:1AAAText on the MyFajr card, top
Pine-950 on MyFajr Peach-5009.4:1AAAText on the MyFajr card, bottom

White on MyFridays Orange-500 , 3.1:1

Fails for normal body text (needs 4.5:1). Large/bold text (≥19px) only, or swap to Pine-950 text on this background.

Neutral-400 on White , 2.5:1

Fails outright. Fine for decorative or disabled-state use, never for anything a user needs to read.

← LogoTypography →