Scruggs Tire & Alignment guidelines
Color
Canonical palette values and semantic roles.
HEX is the canonical screen reference. Formal identity colors belong to approved brand applications; interface cues communicate actions and states with words, icons, outlines, or attributes as well as color.
Formal identity colors
A color used in artwork is not automatically a warning or action cue.
| Color | HEX | Source | Use |
|---|---|---|---|
| Tire Red | #ED1B24 | brand.accent.bright | Tire artwork and accessible emphasis on black |
| Readable Red | #7D0B13 | brand.accent.deep | Accessible red text and actions on white |
| Black Ink | #000000 | brand.legacy_palette.2 | Logo wording on white |
Approved combinations and artwork
| Application | Formal colors | Artwork | Use |
|---|---|---|---|
| Full mark on white | Tire Red, Black Ink | logo.full | Primary logo on a true white square |
| Readable digital accent | Readable Red | brand.applications | Text and controls on light surfaces |
Correct: use Tire Red (#ED1B24) in its approved identity application; pair the warning cue (#ED1B24) with warning text and icon. Misuse: a lone identity swatch as the only warning signal.
Interface cues on dark surfaces
A shared HEX value does not merge identity and interface roles. State meaning also requires the listed non-color cue.
| Cue | HEX | Meaning | Measured pairing | Non-color cue |
|---|---|---|---|---|
| Action | #7D0B13 | Primary interactive action | #FFFFFF foreground, 10.88:1; 1.93:1 against #000000 | A descriptive button or link label |
| Warning | #ED1B24 | Attention or recoverable risk | #000000 foreground, 4.78:1; 4.78:1 against #000000 | Warning text and icon |
| Error | #E9505F | Failure or destructive action | #000000 foreground, 5.78:1; 5.78:1 against #000000 | Error text and icon |
| Success | #ED1B24 | Completed operation | #000000 foreground, 4.78:1; 4.78:1 against #000000 | Success text and icon |
| Information | #7D0B13 | Neutral information or help | #FFFFFF foreground, 10.88:1; 1.93:1 against #000000 | Information label and icon |
| Focus | #ED1B24 | Keyboard focus ring | #000000 foreground, 4.78:1; 4.78:1 against #000000 | Visible outline and keyboard focus order |
| Selection | #ED1B24 | Selected control or item | #000000 foreground, 4.78:1; 4.78:1 against #000000 | Selected label or checked state |
| Disabled | #C0C0C0 | Unavailable control | #000000 foreground, 11.54:1; 11.54:1 against #000000 | Disabled attribute and text |
Interface cues on light surfaces
A shared HEX value does not merge identity and interface roles. State meaning also requires the listed non-color cue.
| Cue | HEX | Meaning | Measured pairing | Non-color cue |
|---|---|---|---|---|
| Action | #7D0B13 | Primary interactive action | #FFFFFF foreground, 10.88:1; 10.88:1 against #FFFFFF | A descriptive button or link label |
| Warning | #7D0B13 | Attention or recoverable risk | #FFFFFF foreground, 10.88:1; 10.88:1 against #FFFFFF | Warning text and icon |
| Error | #C0293A | Failure or destructive action | #FFFFFF foreground, 5.80:1; 5.80:1 against #FFFFFF | Error text and icon |
| Success | #7D0B13 | Completed operation | #FFFFFF foreground, 10.88:1; 10.88:1 against #FFFFFF | Success text and icon |
| Information | #7D0B13 | Neutral information or help | #FFFFFF foreground, 10.88:1; 10.88:1 against #FFFFFF | Information label and icon |
| Focus | #7D0B13 | Keyboard focus ring | #FFFFFF foreground, 10.88:1; 10.88:1 against #FFFFFF | Visible outline and keyboard focus order |
| Selection | #7D0B13 | Selected control or item | #FFFFFF foreground, 10.88:1; 10.88:1 against #FFFFFF | Selected label or checked state |
| Disabled | #C0C0C0 | Unavailable control | #000000 foreground, 11.54:1; 1.82:1 against #FFFFFF | Disabled attribute and text |
Dark palette
Background
backgroundAlso: primary-foreground, sidebar-primary-foreground#000000See more color values
- RGB
rgb(0 0 0)- HSL
hsl(0.0 0.0% 0.0%)- OKLCH
oklch(0.0000 0.0000 0.0)- Lab D50
lab(0.00% 0.00 0.00)
CMYK: output profile required
Foreground
foregroundAlso: card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground, brand-cta-foreground, brand-cta-outline-foreground#FFFFFFSee more color values
- RGB
rgb(255 255 255)- HSL
hsl(0.0 0.0% 100.0%)- OKLCH
oklch(1.0000 0.0000 0.0)- Lab D50
lab(100.00% 0.00 0.00)
CMYK: output profile required
Card
cardAlso: popover, sidebar#414141See more color values
- RGB
rgb(65 65 65)- HSL
hsl(0.0 0.0% 25.5%)- OKLCH
oklch(0.3753 0.0000 0.0)- Lab D50
lab(27.53% 0.00 0.00)
CMYK: output profile required
Primary
primaryAlso: ring, chart-1, sidebar-primary, sidebar-ring, brand-emphasis#ED1B24See more color values
- RGB
rgb(237 27 36)- HSL
hsl(357.4 85.4% 51.8%)- OKLCH
oklch(0.6026 0.2351 26.9)- Lab D50
lab(51.54% 74.19 53.72)
CMYK: output profile required
Secondary
secondaryAlso: muted#5F5F5FSee more color values
- RGB
rgb(95 95 95)- HSL
hsl(0.0 0.0% 37.3%)- OKLCH
oklch(0.4855 0.0000 0.0)- Lab D50
lab(40.32% 0.00 0.00)
CMYK: output profile required
Muted Foreground
muted-foreground#D9D9D9See more color values
- RGB
rgb(217 217 217)- HSL
hsl(0.0 0.0% 85.1%)- OKLCH
oklch(0.8853 0.0000 0.0)- Lab D50
lab(86.70% 0.00 0.00)
CMYK: output profile required
Accent
accentAlso: sidebar-accent, brand-accent-deep, brand-cta#7D0B13See more color values
- RGB
rgb(125 11 19)- HSL
hsl(355.8 83.8% 26.7%)- OKLCH
oklch(0.3772 0.1449 25.5)- Lab D50
lab(26.28% 45.94 30.55)
CMYK: output profile required
Destructive
destructive#E9505FSee more color values
- RGB
rgb(233 80 95)- HSL
hsl(354.1 77.7% 61.4%)- OKLCH
oklch(0.6437 0.1882 18.6)- Lab D50
lab(56.66% 60.52 26.02)
CMYK: output profile required
Border
borderAlso: input, sidebar-border#262626See more color values
- RGB
rgb(38 38 38)- HSL
hsl(0.0 0.0% 14.9%)- OKLCH
oklch(0.2686 0.0000 0.0)- Lab D50
lab(15.16% -0.00 0.00)
CMYK: output profile required
Chart 2
chart-2#C93CB3See more color values
- RGB
rgb(201 60 179)- HSL
hsl(309.4 56.6% 51.2%)- OKLCH
oklch(0.6025 0.2168 334.9)- Lab D50
lab(50.65% 64.77 -33.10)
CMYK: output profile required
Chart 3
chart-3#A97600See more color values
- RGB
rgb(169 118 0)- HSL
hsl(41.9 100.0% 33.1%)- OKLCH
oklch(0.6024 0.1254 78.5)- Lab D50
lab(53.83% 14.73 59.66)
CMYK: output profile required
Chart 4
chart-4#7564FBSee more color values
- RGB
rgb(117 100 251)- HSL
hsl(246.8 95.0% 68.8%)- OKLCH
oklch(0.6026 0.2161 282.9)- Lab D50
lab(50.62% 37.79 -74.81)
CMYK: output profile required
Chart 5
chart-5#5D9300See more color values
- RGB
rgb(93 147 0)- HSL
hsl(82.0 100.0% 28.8%)- OKLCH
oklch(0.6020 0.1639 130.7)- Lab D50
lab(55.43% -33.09 57.01)
CMYK: output profile required
Light palette
Background
backgroundAlso: card, popover, primary-foreground, sidebar, sidebar-primary-foreground, brand-cta-foreground#FFFFFFSee more color values
- RGB
rgb(255 255 255)- HSL
hsl(0.0 0.0% 100.0%)- OKLCH
oklch(1.0000 0.0000 0.0)- Lab D50
lab(100.00% 0.00 0.00)
CMYK: output profile required
Foreground
foregroundAlso: card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground#111111See more color values
- RGB
rgb(17 17 17)- HSL
hsl(0.0 0.0% 6.7%)- OKLCH
oklch(0.1776 0.0000 0.0)- Lab D50
lab(5.06% 0.00 0.00)
CMYK: output profile required
Primary
primaryAlso: ring, chart-1, sidebar-primary, sidebar-ring, brand-accent-deep, brand-emphasis, brand-cta, brand-cta-outline-foreground#7D0B13See more color values
- RGB
rgb(125 11 19)- HSL
hsl(355.8 83.8% 26.7%)- OKLCH
oklch(0.3772 0.1449 25.5)- Lab D50
lab(26.28% 45.94 30.55)
CMYK: output profile required
Secondary
secondary#F4F4F4See more color values
- RGB
rgb(244 244 244)- HSL
hsl(0.0 0.0% 95.7%)- OKLCH
oklch(0.9672 0.0000 0.0)- Lab D50
lab(96.19% 0.00 0.00)
CMYK: output profile required
Muted
mutedAlso: accent, sidebar-accent#F1E7E8See more color values
- RGB
rgb(241 231 232)- HSL
hsl(354.0 26.3% 92.5%)- OKLCH
oklch(0.9361 0.0109 10.3)- Lab D50
lab(92.46% 3.63 0.78)
CMYK: output profile required
Muted Foreground
muted-foreground#555555See more color values
- RGB
rgb(85 85 85)- HSL
hsl(0.0 0.0% 33.3%)- OKLCH
oklch(0.4495 0.0000 0.0)- Lab D50
lab(36.15% 0.00 0.00)
CMYK: output profile required
Destructive
destructive#C0293ASee more color values
- RGB
rgb(192 41 58)- HSL
hsl(353.2 64.8% 45.7%)- OKLCH
oklch(0.5308 0.1857 20.9)- Lab D50
lab(43.62% 59.48 30.04)
CMYK: output profile required
Border
borderAlso: input, sidebar-border#838383See more color values
- RGB
rgb(131 131 131)- HSL
hsl(0.0 0.0% 51.4%)- OKLCH
oklch(0.6100 0.0000 0.0)- Lab D50
lab(54.76% 0.00 0.00)
CMYK: output profile required
Chart 2
chart-2#681D5FSee more color values
- RGB
rgb(104 29 95)- HSL
hsl(307.2 56.4% 26.1%)- OKLCH
oklch(0.3771 0.1335 333.1)- Lab D50
lab(25.73% 39.54 -21.75)
CMYK: output profile required
Chart 3
chart-3#583B00See more color values
- RGB
rgb(88 59 0)- HSL
hsl(40.2 100.0% 17.3%)- OKLCH
oklch(0.3762 0.0785 77.7)- Lab D50
lab(27.59% 9.57 36.99)
CMYK: output profile required
Chart 4
chart-4#393385See more color values
- RGB
rgb(57 51 133)- HSL
hsl(244.4 44.6% 36.1%)- OKLCH
oklch(0.3779 0.1327 281.3)- Lab D50
lab(25.88% 22.09 -46.22)
CMYK: output profile required
Chart 5
chart-5#304B00See more color values
- RGB
rgb(48 75 0)- HSL
hsl(81.6 100.0% 14.7%)- OKLCH
oklch(0.3766 0.1003 129.3)- Lab D50
lab(28.65% -19.38 35.72)
CMYK: output profile required
Scruggs Tire & Alignment is an independent third-party client brand. Scruggs Tire & Alignment owns its trademarks. Scruggs Tire & Alignment is responsible for its products, services, and applicable terms.