MyGiving Brand Guidelines
Accessibility
Designing for everybody, checked against what actually shipped, not just what was intended.
Color Contrast
ConfirmedExtends the first-pass check on the Color page with the actual shadcn theme tokens the prototype ships (not just the raw pine/cream ramp), since that’s what real components are built from.
| Pairing | Ratio | Verdict | Use |
|---|---|---|---|
| --foreground on --background (body text) | 17.30:1 | AAA | Default body copy, product-wide |
| --accent-foreground on --accent (chip / tag text) | 6.88:1 | AA | Category chips, e.g. “Friday Giver” |
| White text on --destructive | 4.83:1 | AA | Error/destructive button or badge, if one ships |
Passing today, with no room to spare
These clear AA (4.5:1) by less than 0.3, any future lightening of pine-500, or of the muted neutral tone, drops them below the line without anyone noticing at a glance.
| Pairing | Ratio | Verdict | Use |
|---|---|---|---|
| --primary-foreground on --primary (primary button text) | 4.50:1 | AA, zero margin | Every filled pine button in the product |
| --muted-foreground on --background | 4.58:1 | AA, thin margin | Timestamps, disclaimers, secondary copy |
| --muted-foreground on white | 4.74:1 | AA, thin margin | Same muted text, on a white card |
Type Legibility
ConfirmedThe full scale lives on Typography, this is the legibility-specific read of it.
12px is a label floor, not a reading size
Paragraph Mini (12px/16px) is the smallest step in the scale. It’s used for chips, timestamps, and captions, content a user scans, not reads at length. It should never carry a sentence someone has to get through to use the product.
Line-height loosens as size drops
Heading 1 runs a tight 48/48 (1.0), offset by −1.5 tracking, standard for display type. Paragraph Regular runs 16/24 (1.5), the ratio low-vision guidance actually asks for in body copy. Nothing in the scale currently undershoots that for reading-length text.
Still open, and blocking a full sign-off here: the numerals / icon-in-wordmark pairing noted on the Typography page. Until that’s resolved, it’s not possible to confirm the 10 in My10Nights / My10Days reads clearly at small sizes once the icon replaces the “0”.