NC Orange
--nc-orange- HEX
- #F24C27
- RGB
- 242, 76, 39
- Use
- Primary CTA, reel mark, promotion signal
Brand Guide
Natural Catch Brand Guide
Voice
How Natural Catch Sounds
Premium, direct, seafood-literate, and practical. Lead with product truth over generic lifestyle copy. Short declarative lines are the brand rhythm: Wild Caught. Hand Cut. Ready To Eat.
Lead With Product Truth
Start from the fish, cut, catch method, oil, nutrition, packaging, and retail facts. Lifestyle copy supports those facts; it does not replace them.
Confident, Not Cute
Use short declarative lines. Avoid hedging, filler, and overexplaining. The brand defines a quality standard instead of asking permission.
Seafood-Literate
Say pole and line, hand cut, low mercury, EVOO, wild caught, and responsibly farmed only when the product data supports it.
Retail Ready
Write for buyers, press, partners, and consumers who need accurate facts quickly. Product names stay Title Case; badges and CTAs stay all caps.
Use These CTA Verbs
ORDER NOWSHOP PRODUCTLEARN MOREFIND IN STORESUBSCRIBE & SAVE
Avoid This Language
Click hereDiscoverJourneyExperienceAffordable luxuryMaybeHopefully
Color
Color Tokens
Warm cream, crisp white, deep navy, and one loud signal orange. Keep composition close to 60% neutral, 30% navy, 8% orange, and 2% green.
Orange Hover
--nc-orange-hover- HEX
- #D93E1C
- RGB
- 217, 62, 28
- Use
- Primary button hover
NC Navy
--nc-navy- HEX
- #192640
- RGB
- 25, 38, 64
- Use
- Headlines, primary text, dark surfaces
Navy Hover
--nc-navy-hover- HEX
- #0F1A2E
- RGB
- 15, 26, 46
- Use
- Dark hover states
NC Green
--nc-green- HEX
- #2E7D32
- RGB
- 46, 125, 50
- Use
- Sustainability and success cues
Green Hover
--nc-green-hover- HEX
- #246627
- RGB
- 36, 102, 39
- Use
- Secondary CTA hover
White
--nc-white- HEX
- #FFFFFF
- RGB
- 255, 255, 255
- Use
- Primary surface
Cream
--nc-cream- HEX
- #FAF7F2
- RGB
- 250, 247, 242
- Use
- Warm sections and product image wells
Stone 100
--nc-stone-100- HEX
- #F4F4F4
- RGB
- 244, 244, 244
- Use
- Canvas, email background
Stone 300
--nc-stone-300- HEX
- #D9D9D9
- RGB
- 217, 217, 217
- Use
- Subtle borders
Stone 500
--nc-stone-500- HEX
- #737373
- RGB
- 115, 115, 115
- Use
- Secondary text
Stone 700
--nc-stone-700- HEX
- #404040
- RGB
- 64, 64, 64
- Use
- Tertiary text and navigation
Ink
--nc-ink- HEX
- #0F1626
- RGB
- 15, 22, 38
- Use
- Deep text and elevated shadows
Warning
--color-warning- HEX
- #E8A33D
- RGB
- 232, 163, 61
- Use
- Caveats and low-stock states
Error
--color-error- HEX
- #C0392B
- RGB
- 192, 57, 43
- Use
- Form errors and sold-out states
Type
Typography
Laski Slab carries the editorial product voice, Gotham Bold handles compact interface authority, and Nunito Sans keeps dense product facts readable. Licensed files stay self-hosted; do not upload them to third-party tools unless the license allows it.
Display / headlines
Laski Slab
- Designer / Foundry
- Paula Mastrangelo & Ramiro Espinoza
- Source
- Self-hosted licensed brand font
- CSS stack
- 'Laski Slab', Georgia, serif
- Usage
- Use for page titles, section headers, product names, and big editorial moments.
UI / buttons / labels
Gotham Bold
- Designer / Foundry
- Hoefler&Co. Gotham family
- Source
- Self-hosted licensed brand font
- CSS stack
- 'Gotham', 'Gotham Bold', 'Helvetica Neue', sans-serif
- Usage
- Use for nav, buttons, badges, table labels, and short all-caps utility text.
Body copy
Nunito Sans
- Designer / Foundry
- Vernon Adams project, expanded by the Nunito Sans authors
- Source
- Google Fonts / open source
- CSS stack
- 'Nunito Sans', 'Nuno Sans', system-ui, sans-serif
- Usage
- Use for paragraphs, captions, product facts, tables, and dense product data.
Script accent
Palm Canyon Drive
- Designer / Foundry
- Amy Hood / RetroSupply Co.
- Source
- Self-hosted licensed accent font
- CSS stack
- 'Palm Canyon Drive', 'Pacifico', cursive
- Usage
- Reserve for the Seafoods accent in lockups. Avoid standalone body or headline use.
| Token | Size | Line | Family | Use |
|---|---|---|---|---|
| --fs-display | 5rem / 80px | 1.05 | Laski Slab | Hero statements |
| --fs-h1 | 3.5rem / 56px | 1.1 | Laski Slab | Page titles |
| --fs-h2 | 2.5rem / 40px | 1.15 | Laski Slab | Section headlines |
| --fs-h3 | 1.75rem / 28px | 1.25 | Laski Slab | Subsection titles |
| --fs-h4 | 1.25rem / 20px | 1.3 | Gotham Bold | Card titles and labels |
| --fs-body-lg | 1.125rem / 18px | 1.6 | Nunito Sans | Lead copy |
| --fs-body | 1rem / 16px | 1.6 | Nunito Sans | Default body |
| --fs-body-sm | 0.875rem / 14px | 1.55 | Nunito Sans | Captions and secondary copy |
| --fs-button | 0.9375rem / 15px | 1 | Gotham Bold | Buttons |
| --fs-micro | 0.75rem / 12px | 1.4 | Nunito Sans | Legal and microcopy |
Logo
Logo Usage
Use full-color artwork on white or cream, and white artwork on navy or photography. Leave clear space around the reel mark and wordmark; do not recolor the icon outside orange, navy, white, or black.
PNG
ncs_logo_white.png
White logo PNG for dark backgrounds.
Updated Oct 28, 2025
SVG
ncs_logo_1.svg
Natural Catch SVG lockup variant.
Updated Feb 2, 2023
SVG
ncs_logo.svg
Primary Natural Catch SVG lockup.
Updated Feb 2, 2023
PNG
Logo Seafood@2x.png
Seafood lockup PNG.
Updated Feb 1, 2023
SVG
Logo Seafood.svg
Seafood lockup SVG.
Updated Feb 1, 2023
Product Assets
Transparent Product Cutouts
Front and back packaging PNG derivatives are generated from the professional product photos. Use these transparent cutouts for decks, sell sheets, retailer portals, and layouts where the product needs to sit on a custom background. Lifestyle photos should stay photographic, not transparent.
Regenerate this set with npm run assets:transparent.