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
Product Cards
Product cards use a subtle border container with no background or shadow. The thin border provides structure while keeping the design minimal and dark.
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.
Key Components
What Not to Do
These are the most common mistakes. Every "DON'T" breaks the industrial brand identity.