Skip to content

Change the brand accent to #DA5CC7 #157

Description

@ifahimreza

Fahim: "we change brand color: do quick change to this: #da5cc7" — replaces Saddle Violet #6D3BF5 from #153.

What the new colour can and cannot do

#DA5CC7 measures 3.31:1 on white. That is above the 3:1 needed for a mark or a fill, and below the 4.5:1 needed for text — so it cannot carry a label, and it cannot be the ground under a white button label (also 3.31:1).

This is the split the palette is already built around: a bright value for fills, a darker same-hue value for text. Violet happened to clear both (5.84:1) so the two were nearly interchangeable; this colour makes the distinction load-bearing.

token value role
--pp-accent #DA5CC7 the brand colour, exactly as given — dots, focus ring, active nav, bar fills
--pp-accent-text #BD2BA7 links and labels
--pp-accent-hover #A82595 hover / active
--pp-accent-tint #FDF4FC soft background
--pp-action #BD2BA7 primary buttons
--pp-focus #DA5CC7 focus ring

The tint is #FDF4FC rather than a more saturated wash because an accent dot on the accent tint needs 3:1 and a #FBECF9 tint gave 2.91.

Verified

pair need measured
white on the primary button 4.5 5.16
white on button hover 4.5 6.24
link on the page 4.5 4.99
link on the tint 4.5 4.80
focus ring on the page 3.0 3.20
accent dot on the tint 3.0 3.08

Note

If you'd rather the primary button be literally #DA5CC7, it can be — but only with a near-black label (#111111 on it is 5.70:1), not white. That is a real design choice rather than a token swap, so it is not in this change.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions