Brand Identity
Wordmark
SVG wordmark · /images/sgf-wordmark.svg
Brand Personality
Navy depth · Green vitality · Gold authority
Colors
Live from src/tokens/tokens.json · run pnpm tokens to regenerate
Background Palette
Accent Palette
Semantic Tints (auto-derived via color-mix)
--accent-dim α 15% --accent-glow α 40% --accent-border α 40% --accent-border-hover α 50% --accent-subtle α 8% --accent-faint α 6% --accent-hairline α 3% Text Colors
Global food markets require a trusted partner.
Global food markets require a trusted partner.
Global food markets require a trusted partner.
Light Palette (used on light-bg sections)
Typography
Font Families
Outfit
Sure Good Foods · Global Food Trade · Quality Products
DM Serif Display
Sourcing the World's Finest Meats
Plus Jakarta Sans
Sure Good Foods is a trusted global partner in food trade.
Heading Scale
clamp(36px,6vw,64px) Global Food Trade
clamp(28px,4vw,48px) Trusted Partner in Food
clamp(22px,3vw,36px) Our Products
clamp(17px,2vw,22px) Pork & Pork By-Products
--text-md / 17px We connect food producers and buyers across 25+ countries, offering quality products with rigorous compliance and trade financing expertise.
Font Size Tokens
--text-xs 12px Ag --text-sm 15px Ag --text-base 16px Ag --text-md 17px Ag --text-lg 19px Ag --text-xl 21px Ag --text-2xl 22px Ag --text-3xl 24px Ag --text-stat 36px Ag Stats bar large numbers --text-display 42px Ag Large display text Line Height Tokens
Sure Good Foods connects global food producers and buyers through trusted, compliant trade networks.
Sure Good Foods connects global food producers and buyers through trusted, compliant trade networks.
Sure Good Foods connects global food producers and buyers through trusted, compliant trade networks.
Spacing & Layout
Spacing Scale
--space-2xs 4px --space-xs 8px --space-sm 12px --space-md 16px --space-lg 24px --space-xl 32px --space-2xl 48px --space-3xl 60px --space-4xl 100px Content Max-Width Tokens
Buttons
On Dark Background
Disabled State
Button Anatomy
Classes: .btn .btn--primary / .btn .btn--outline
Links
Link color is a navigation signal — not decoration. Green = products. Gold = services/value.
In-Prose Links
We specialize in pork, beef, and poultry products, backed by world-class logistics and compliance expertise across every market we serve.
Link Reference
Cards & Surfaces
Card Variants
.card
Standard bordered surface. Used for content blocks on dark sections.
.card--hover
Adds lift on hover. Used for interactive cards and product tiles.
.glass
Glassmorphism. Used for nav (scrolled), cert badges, contact cards. Blur: 20px
Light Card (on light section)
Light section card
Background: --card-bg · Border: --card-border
Badges & Tags
Tag Variants
Classes: .tag · .tag--accent · .tag--muted
Section Eyebrow
.section-eyebrow — green, uppercase, small tracking. Used above h2 headings.
Certification Badges · live from CMS
Section Headers
Every major section uses a three-line pattern: eyebrow → heading → subtitle.
Dark Background Pattern
Premium Proteins, Globally Sourced
From fresh pork to certified poultry — we deliver quality products backed by industry-leading certifications.
Light Background Pattern
Doing Business With Us
A straightforward process to bring your sourcing vision to life.
Form Elements
Please enter a valid email address.
Motion & Animation
Transition Duration Tokens
--transition-base 0.3s Standard UI transitions --transition-fast 0.2s Quick hover/focus states --transition-slow 0.4s Slow scroll-triggered transitions (nav glass) --transition-enter 0.6s Page-load entrance animations --transition-dropdown 0.25s Dropdown and popover animations --transition-snappy 0.15s Quick micro-interactions on press --transition-instant 0.05s Active/press feedback --transition-carousel 1.5s Hero carousel crossfade Keyframe Animations (click to replay)
Hover Transition Live Demo
--transition-base 0.3s --transition-fast 0.2s --transition-slow 0.4s Border Radius
--radius-sm 4px --radius-md 10px --radius-lg 14px --radius-xl 20px --radius-pill 28px Component Previews
Stats Bar
· live from CMS (hero_content)
Value Proposition Cards
· live from CMS (value_props)
Customer and Market Connectivity
Sure Good Foods connects qualified suppliers with buyers across retail, foodservice, distribution, processing, and industrial channels. Our market knowledge, sourcing access, and trading relationships help customers identify opportunities, manage supply needs, and expand into new markets without building the infrastructure alone.
Global and Scaled Supply Leverage
Sure Good Foods operates through an established global sourcing and trading network. Our purchasing scale, supplier relationships, and container-level programs help customers access competitive pricing, reliable volume, and product options across multiple origins.
Trade Finance & Risk Management
Cross-border transactions can create cash flow, currency, and payment risk. Sure Good Foods supports customers and suppliers with practical trade finance solutions, competitive payment structures, and foreign exchange management to make buying and selling easy.
Navigation (Glass State)
Z-Index Layer System
--z-mobile-panel 99 Mobile nav slides under sticky header --z-nav 100 Sticky header --z-hamburger 101 Hamburger stays tappable above header --z-dropdown 200 Products dropdown floats above nav --z-skip-link 9999 Accessibility skip link — above everything