Visual Brand System
The definitive guide to implementing the OBSC brand. Industrial. Sharp. Theme-driven. Every pixel, every font weight, every border-radius of zero — and every accent color flows from the active giveaway.
Brand Mark
The OBSC logo is an inline SVG with two modes: full wordmark (icon + "OWN BOSS SUPPLY CO.") and icon only (the OB monogram). The fill color is always currentColor, making it inherit from its container. Three standard treatments exist: white on dark, black on light, and themed (accent color).
Full Wordmark
Icon Only (Monogram)
Usage Rules
fill="currentColor" and control color via the parent's color CSS propertyicon_only mode in compact spaces (mobile nav, favicons, app icons)Implementation
import Logo from '~/components/Logo';// White logo on dark background<Logo className="text-white w-40" />// Themed logo (follows accent color)<Logo className="text-accent w-40" />// Icon only for compact layouts<Logo icon_only className="text-white w-10" />
Core Palette
Three colors define the brand: near-black, white, and the theme accent. The accent changes per giveaway — it could be lime green, red, blue, anything. Use the Theme Tester (top right) to see how the entire brand transforms.
Functional Colors
Brand Gradient
Sanity settingsTheme
→
GROQ .hex
→
root.tsx :root CSS vars
→
Tailwind classes
→
Every element on the page
Never hardcode accent hex values. Use
bg-accent, text-accent, bg-gradient. The gradient, buttons, section highlights, and all accent UI shift together when the giveaway theme changes.
Four Font Faces. Strict Roles.
Saira for headings/buttons (uppercase, heavy). Saira italic for giveaway/prize content. Saira Stencil One for accent moments. AvenirNext for body text (normal case).
Font Weight Reference
| Weight | Font | Usage |
|---|---|---|
| 900 (Black) | Saira | Hero headlines, display text |
| 800 (ExtraBold) | Saira | Section headings, nav links, tab labels |
| 700 (Bold) | Saira / AvenirNext | Buttons, prices, product names |
| 500 (Medium) | Saira | Secondary labels |
| 400 (Regular) | AvenirNext | Body text, paragraphs, footer links |
Letter Spacing Scale
| Value | Context |
|---|---|
-4.8px | Super-sized hero text (96px+) |
-3px | Display headings (60px) |
-0.75px | Section headings (30px) |
0.02em | Tight heading labels |
0.08em | UI labels |
0.14em | Tab items, tags |
2-4px | Section number labels |
9 Variants. 0px Radius.
Every button uses Saira, uppercase, bold weight, and sharp corners. The shimmer effect on primary buttons creates a metallic sweep.
primaryGradient bg + white text
secondaryWhite bg + accent text
secondary_darkGhost on dark
secondary_lightGhost on light
secondary_accentGhost with accent
tertiary_darkUnderline on dark
tertiary_lightUnderline on light
tertiary_accentUnderline with accent
whiteWhite bg + gradient text
The No-Radius Rule
Sharp corners are a core brand signifier. They convey the industrial/construction aesthetic. Rounding corners softens the brand.
OB42 Silver Entry
OB42 Silver Entry
Slanted Badges
Product badges use a skewed parallelogram shape via transform: skewX(-20deg).
Containerless Product Cards
Product cards have zero visual container — no background, no border, no shadow. The image and text sit directly on the page.
Breakpoints
Navigation Height
Grid Patterns
Section Padding
| Direction | Mobile | md (768px) | lg (1024px) |
|---|---|---|---|
| Horizontal (px) | 24px | 32px | 48px |
| Vertical (py) | 24px | 32px | 48px |
Accent Stripe
A 4px accent-colored line runs full-width below the navigation. This is a signature brand element present on every page — its color follows the theme.
Shimmer Button
A diagonal metallic shine sweeps across primary CTA buttons, creating a premium feel.
Stencil Accent Text
Saira Stencil One is used for accent typography — winner names, timer multipliers, and marquee items. It creates an industrial, stamped-metal feel.
Marquee / Ticker
Pure CSS horizontal scroll for announcements and promotional text.
Slanted Badges
Key Components
What Not to Do
These are the most common mistakes. Every "DON'T" breaks the industrial brand identity.