Color system
Our color system is built on Primer color tokens with FacioQuo brand extensions for identity elements.
Primer system colors
Primer provides semantic color roles for consistent UI states. These emphasis colors use background/foreground pairings for accessible contrast. Refer to the Primer color documentation and Primer Primitives Storybook for the complete color system.
Accent
bgColor-accent-emphasisfgColor-onEmphasis
Links, selected, active, and focus states, and neutral information
Accent Muted
bgColor-accent-mutedfgColor-accent
Subtle accent backgrounds for low emphasis
Success
bgColor-success-emphasisfgColor-onEmphasis
Primary buttons, positive messaging and successful states
Success Muted
bgColor-success-mutedfgColor-success
Subtle success backgrounds for low emphasis
Attention
bgColor-attention-emphasisfgColor-onEmphasis
Warning states, active processes such as queued PRs and tests in progress
Attention Muted
bgColor-attention-mutedfgColor-attention
Subtle warning backgrounds for low emphasis
Danger
bgColor-danger-emphasisfgColor-onEmphasis
Danger buttons and error states
Danger Muted
bgColor-danger-mutedfgColor-danger
Subtle danger backgrounds for low emphasis
Open
bgColor-open-emphasisfgColor-onEmphasis
Open tasks, PRs or workflows
Closed
bgColor-closed-emphasisfgColor-onEmphasis
Closed tasks, PRs or workflows
Done
bgColor-done-emphasisfgColor-onEmphasis
Completed tasks, PRs or workflows
Sponsors
bgColor-sponsors-emphasisfgColor-onEmphasis
Text and icons related to GitHub Sponsors
Brand colors
FacioQuo brand colors are for brand identity and visual recognition. Use Primer semantic colors for UI elements with text content to ensure proper contrast and accessibility.
orange
#ED7D31fq-brand.orange
Primary brand color for FacioQuo - used for key CTAs and brand elements
blue
#4472C4fq-brand.blue
Secondary brand color for FacioQuo - used for accents and highlights
yellow
#FFC000fq-brand.yellow
Highlights and attention
gray
#404040fq-brand.gray
Text and subtle elements
green
#70AD47fq-brand.green
Success and positive state color
accent
#E6C74Cfq-brand.accent
Special elements and decorative purposes