Brand & design system
Version 1.0.1 · Canon 2.0.0 · scruggstires.com/
Scruggs Tire & Alignment | Brand System01
Use Scruggs Tire & Alignment as the formal brand name. Do not redraw the lettering, change the tire motif, or treat a text rendering as a replacement logo.
Use the exact delivered masters described on the Logo system sheet. Formal colors and their measured uses are on the Color sheet. Display Poppins, body Source Sans 3, and mono Courier Prime are the declared type families.
Where each asset belongs: The Asset catalog lists verified marks, lockups, icons, and platform deliveries by intended surface and size.
Keep delivered artwork geometry unchanged. The Usage limits sheet lists every source rule.
Do not recreate the embedded Scruggs lettering with a substitute font.
Mark: Use the exact white-square Full lockup for light surfaces, the black-square Full lockup for dark surfaces, and the unchanged tire-only motif for small icons. Preserve the lettering and tire shape in every output.
Color: The tire motif uses bright red. True white and black are the primary logo grounds; bright red provides dark-surface emphasis and deep red provides readable light-surface actions. Neutral surfaces support clear service information.
Use the exact white-square Full lockup for light surfaces, the black-square Full lockup for dark surfaces, and the unchanged tire-only motif for small icons. Preserve the lettering and tire shape in every output. Mark means symbol; wide and stacked lockups are separate. Clear means transparent; light and dark name the viewing surface. See Asset Language in the main manual.
One clear-space unit on every side: 32 units on the 512 × 512 canvas, 7.1 percent of artwork width. No text, border, icon or crop enters that band.
| mark | 128 px |
| horizontal | 160 px |
| stacked | 128 px |
Below 128 px the reduced master takes over. It ships as its own file. Do not rasterize the full mark down at runtime.
| Lockup | Mark height | Gap | Alignment |
|---|---|---|---|
| Horizontal | 160 units | 34 units | Optical center |
| Stacked | 1.80C | 0.45C | Centered on wordmark ink width |
The horizontal row records its approved master composition. C is the outlined wordmark cap height used by the stacked lockup. X is the clear-space unit declared above. Keep one X clear around every master and never resize the mark and wordmark independently.
These are the exact source usage rules for this identity. The preceding Logo system sheet gives measured sizes and clear space.
Use deep red #7D0B13 for ordinary text and actions on white. Bright tire red #ED1B24 is also readable on a true black base and serves dark-surface emphasis. Never use bright red as ordinary text on white. Maintain WCAG 2.1 AA contrast for all actual combinations.
Delivered horizontal lockup
Delivered reduced mark
The tire motif uses bright red. True white and black are the primary logo grounds; bright red provides dark-surface emphasis and deep red provides readable light-surface actions. Neutral surfaces support clear service information.
The bright accent #ED1B24 measures 4.39:1 on the light reading surface and is never text there. The light token block substitutes #7D0B13 at 10.88:1 automatically. The legal foreground on an accent fill is #000000 at 4.78:1. Every fill token in brand.json carries its measured foreground.
| Color | Means |
|---|---|
| Accent | Primary value, selection, links, focus |
| Emphasis | Needs attention, threshold exceeded |
| Destructive | Failed or timed out. Always with text. |
The emphasis and failure colors may not be reliably separable under deuteranopia. That is acceptable only because state is never carried by color alone: every state ships a written label.
Chart colors serve data visualization. Brand applications use the identity accent and the neutral surfaces. Each chart color is derived from the identity accent and measured against its surface so every entry clears 4.5:1.
Lightness is calculated separately for dark and light surfaces. Data charts also use labels or shapes; hue alone does not carry meaning.
| Series | Dark | Light |
|---|---|---|
| chart-1 | #ED1B24 | #7D0B13 |
| chart-2 | #C93CB3 | #681D5F |
| chart-3 | #A97600 | #583B00 |
| chart-4 | #7564FB | #393385 |
| chart-5 | #5D9300 | #304B00 |
Series order is fixed: chart-1 is always the primary measurement. Never reorder to make a chart look better. Never introduce a sixth color; past five series, switch to a form that does not depend on hue. A series never uses the semantic emphasis or failure colors, because those carry state.
Scruggs Tire & Alignment uses three approved type families. Poppins handles display text, Source Sans 3 handles interface and reading text, and Courier Prime is reserved for literal command blocks.
| Function | Typeface | Weights |
|---|---|---|
| Display, headings | Poppins | 700 |
| Body, interface | Source Sans 3 | 400, 600 |
| Literal code blocks | Courier Prime | 400 |
| Axis | Value |
|---|---|
| Radii | 6 / 8 / 12 / 16 / pill |
| Spacing | 4 8 12 16 24 32 48 64 96 120 |
| Focus | 2px ring at 2px offset |
Only the listed local faces are approved. Any other weight makes the renderer synthesize a faux bold, which prints badly and forces outlined glyphs into exported PDFs. Courier Prime is used only for literal command blocks.
| Token | Size | Tracking |
|---|---|---|
| display-xl | 72 | -0.030em |
| display-lg | 56 | -0.025em |
| display-md | 40 | -0.020em |
| display-sm | 28 | -0.015em |
| display-xs | 20 | -0.010em |
| Token | Size | Leading |
|---|---|---|
| body-lg | 18.4 | 1.6 |
| body-md | 16 | 1.7 |
| body-sm | 14 | 1.6 |
| body-xs | 12 | 1.5 |
| eyebrow | 12 | 0.12em caps |
This brand has no ShruggieTech parent or ownership endorsement.
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.
The catalog lists installable theme and component items. For offline fonts, copy nextjs/fonts.ts and fonts/ together from the kit.
| Path | Contents | n |
|---|---|---|
| logos/svg/ | Vector masters, every lockup and colorway | 18 |
| icons/ | Web, Android, Apple, macOS, and Windows application suites | 122 |
| favicons/ | Compatibility aliases for the authoritative web suite | 20 |
| tokens/ | CSS and JSON with measured contrast | 6 |
| Path | Contents | n |
|---|---|---|
| nextjs/ | globals.css, shadcn registry, fonts, provider | 12 |
| enforcement/ | AGENTS.md, ESLint, stylelint | 21 |
| qc/ | Contact sheets. Proof somebody looked. | 162 |
| guidelines/ | The system rendered from itself | 2 |
| Decision | Declaration |
|---|---|
| Ownership | Third party |
| Parent | None |
| Palette | Brand-specific emphasis and action |
| Typography | Declared local faces |
Colors for actions and states are distinct from formal identity artwork. A shared HEX is a deliberate choice; meaning also uses words, icons, outlines, or state attributes.
| 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 |
| Application | Colors and artwork | Use |
|---|---|---|
| Full mark on white | tire-red, ink in logo.full | Primary logo on a true white square |
| Readable digital accent | readable-red in brand.applications | Text and controls on light surfaces |
Correct: use Tire Red (#ED1B24) in approved identity work; pair the Warning cue (#ED1B24) with warning text and icon. Misuse: a lone identity swatch as the only warning signal.
| Cue | Purpose | Dark and light pairing | Additional cue |
|---|---|---|---|
| Action | Primary interactive action | Dark: #7D0B13, #FFFFFF text 10.88:1; surface 1.93:1 Light: #7D0B13, #FFFFFF text 10.88:1; surface 10.88:1 Source: semantic.action / semantic.action | A descriptive button or link label |
| Warning | Attention or recoverable risk | Dark: #ED1B24, #000000 text 4.78:1; surface 4.78:1 Light: #7D0B13, #FFFFFF text 10.88:1; surface 10.88:1 Source: semantic.emphasis / semantic.action | Warning text and icon |
| Error | Failure or destructive action | Dark: #E9505F, #000000 text 5.78:1; surface 5.78:1 Light: #C0293A, #FFFFFF text 5.80:1; surface 5.80:1 Source: canon.color.immutable.fault.hex / canon.color.immutable.fault-deep.hex | Error text and icon |
| Success | Completed operation | Dark: #ED1B24, #000000 text 4.78:1; surface 4.78:1 Light: #7D0B13, #FFFFFF text 10.88:1; surface 10.88:1 Source: brand.accent.bright / brand.accent.accessible | Success text and icon |
| Information | Neutral information or help | Dark: #7D0B13, #FFFFFF text 10.88:1; surface 1.93:1 Light: #7D0B13, #FFFFFF text 10.88:1; surface 10.88:1 Source: brand.accent.deep / brand.accent.accessible | Information label and icon |
| Focus | Keyboard focus ring | Dark: #ED1B24, #000000 text 4.78:1; surface 4.78:1 Light: #7D0B13, #FFFFFF text 10.88:1; surface 10.88:1 Source: brand.accent.bright / brand.accent.accessible | Visible outline and keyboard focus order |
| Selection | Selected control or item | Dark: #ED1B24, #000000 text 4.78:1; surface 4.78:1 Light: #7D0B13, #FFFFFF text 10.88:1; surface 10.88:1 Source: brand.accent.bright / brand.accent.accessible | Selected label or checked state |
| Disabled | Unavailable control | Dark: #C0C0C0, #000000 text 11.54:1; surface 11.54:1 Light: #C0C0C0, #000000 text 11.54:1; surface 1.82:1 Source: brand.accent.dim / brand.accent.dim | Disabled attribute and text |