01
Knowledge
Understand what you're interacting with: fish, water, insects, flows, weather, biology, access, technique.
It should make anglers more independent, not more dependent on us.
01The name
The domain is the name
Write it Barbless.co: no space, lowercase co, and no period of its own. It was Barbless Co. until the rename, so older copy that let the mark end a sentence now has to supply its own period.
Use
Barbless.co
Podcast
Barbless Podcast
Not
Barbless Co.
Not
Barbless.Co
- In running prose, add the period: "Flows and gauge data from Barbless.co."
- In a market, the name becomes
Barbless.co Idaho. The header wordmark staysBarbless.co.
- No trailing period in labels, badges, share captions or SMS. Auto-linkers can swallow it into the link.
- No em-dashes, anywhere. Use a comma, a colon or a hyphen.
02Logo
The leaping fish
One mark: the leaping fish with BARBLESS.CO on its body. Use the white version on dark backgrounds and the full sticker on light ones. In the nav it sits at 40×40 next to the muted serif wordmark. Every file is transparent; the SVGs scale to any size.
Usage · proposed
- No lime fill behind the mark. Lime is for chrome and calls to action.
- Don't recolor, outline or add effects.
- Don't set the wordmark in anything but Source Serif 4.
Files
Final logo files, plus a white version made from the final vector.
| File | Version | Size | |
|---|---|---|---|
| barbless-vector-logo.svg | Full sticker · vector master | Any | Download |
| barbless-logo.png | Full sticker | 411 × 418 | Download |
| barbless-logo@2x.png | Full sticker | 821 × 834 | Download |
| barbless-logo@3x.png | Full sticker | 1231 × 1250 | Download |
| barbless-logo@4x.png | Full sticker | 1641 × 1667 | Download |
| barbless-logo-white.svg | White, for dark backgrounds · vector | Any | Download |
| barbless-logo-white.png | White, for dark backgrounds | 2048 × 2007 | Download |
03Color
Mist neutrals, near-black ink, one lime
Dark is the default and the mode to get right; light is an opt-in. Lime is the brand: use it for buttons, the active nav underline and small heading icons, one accent at a time. Click any swatch to copy its hex.
Brand
Neutrals · dark
Default theme
Neutrals · light
Opt-in theme
Map identity only
Water tiers and map layers. Fine as a small chip or legend; never a page CTA, hero wash or second brand color.
- Text on lime is olive
#35530E, never white or black. - Need lime as text on white? Use the deeper
#5EA500. - Neutrals are cool mist, not warm cream and not forest green.
- Blue or purple as a brand color. They mean featured water tier.
- Lime, or any color, to mark "today" or "new". Date copy is enough.
- Kraft, leather or fly-shop browns. Rainbow badges.
04Typography
Three families, one exception
Source Serif 4 is the voice, IBM Plex Sans does the work, and IBM Plex Mono labels the data. Everything is sentence case except the small mono eyebrows.
Display and titles
Read the water
Section and card titles, dialogs, empty states, photo heroes, the wordmark. Georgia is the fallback.
Body and UI
Flows, hatches, flies
Page titles on content pages, body, nav, buttons and form fields. The default on everything.
Labels and data
1,240 CFS
Eyebrows, column heads, ticker values, stat counters, code. Eyebrows are 11px, uppercase, 0.14em tracking.
Your guide to Idaho's best waters
Roboto Slab appears in exactly one place: the barbless.co homepage hero headline. Nowhere else.
Scale in use
| Use | Sample | Spec |
|---|---|---|
| Page title | Idaho fishing reports | Plex Sans 600 · 30/36px · tight |
| Photo hero title | South Fork Boise | Serif 600 · 30/36px · white on scrim |
| Panel title | Recent reports | Serif 600 · 18px · tight |
| Eyebrow | Live · Idaho | Plex Mono 500 · 11px · 0.14em · uppercase |
| Body | Flows are dropping and the evening caddis are on. | Plex Sans 400 · 14/16px · relaxed · muted |
| Button | Read today's reports | Plex Sans 500 · 14px · sentence case |
05Voice
Editorial field guide
Not a lodge brochure and not startup SaaS. Copy is specific and calm: conditions, flows, hatches, rivers. Write for an angler who is smart enough to understand it.
The tagline, read twice
The same four words mean one thing about skill and another about consequence.
| Tagline half | Skill | Ethics |
|---|---|---|
| Know better. | Learn the water, the bugs, the weather, the flows, the craft. | Knowledge creates responsibility. |
| Fish better. | Better decisions, better execution. | Better outcomes for fish, water, and other anglers. |
Four pillars
One for every link in the chain. Everything we build has to sit on at least one.
02
Craft
Do things well and make things worth keeping. Casting, tying, rod building, reading water, repair. And our own software and writing.
Barbless.co should feel made, not manufactured.
03
Judgment
Knowing things is not the same as knowing what to do. We give you temperature, trend, physiology, timing, and alternatives. Then you decide.
You're smart enough to understand this.
04
Stewardship
Take care of what you're lucky enough to use. Expressed through behavior, not moral theater.
Durability is conservation, not something you put in an ad.
The creed
We fish because we love the pursuit. We want the eat. The pull. The fish in the net. But there is more to becoming a good angler than catching fish.
We learn the water. We watch the bugs. We study the weather, the flows, and the fish. We ask why. We practice the craft. We respect the resource and the people sharing it with us. We share what we learn. We admit what we don't know.
And no matter how long we've been doing this, we remain students. Because the more you understand, the more there is to see.
Know better. Fish better.
- Be specific: "Idaho fishing reports", "flows, hatches, and recommended flies."
- Sentence case in running copy, page titles and buttons.
- Uppercase only in mono eyebrows and micro-labels.
- "Adventure awaits" voice, hype, or moral theater.
- Em-dashes. Use a comma, a colon or a hyphen.
- Telling anglers what to do when we can give them what they need to decide.
06UI
Square chrome, quiet surfaces
The radius token is zero, and square is the signature: buttons, badges, cards and dialog titles. Rounding is kept for nav tabs, the search field and pills that carry data.
Buttons
Square, 14px medium, sentence case. Heights 28 / 36 / 40 / 44px with generous padding. Press nudges 1px down. Lucide icons at 14px.
Fields, labels and data pills
LiveBlue Ribbon
1,240 cfsRainbow trout🇺🇸 Idaho
Inputs are underline-only. Labels are text, not pills. Pills appear only for data, with a quiet border and a translucent fill.
Shape scale
0 · buttons, cards, badges
8px · nav tabs, search
18px · large soft media
Full · data pills only
- Layout: 56px sticky nav, content max 1280px, intro copy max 42rem.
- Elevation: a small shadow plus a 5% foreground ring, not a heavy border.
- Active nav: a 2px lime underline, not a filled pill.
- Rounded pill CTAs, or white text on lime.
- Dense badge stacks or a heavy drop-shadow language.
- A second type system.
07Photography
Photo-led, scrimmed, never lime-washed
When a water, fish or bug is the subject, the photo leads. Darken it so type holds, and keep lime in the chrome around it.
Idaho · Blue Ribbon
Henry's Fork
- Full bleed, cropped to fill.
- Darken to 45% when a river shape or type sits on top.
- Bottom scrim from black at 90% through 40% to clear, so white serif titles hold.
- Tier wash on featured waters only: tier color at 135°, fading out by 62%.
- No photo? Use the cool topo texture on
#09090B, as in this sample. - Never a lime wash over photography.
08Motion
Fast and small in the product, a leap on screen
Interface motion stays out of the way. Video gets the leaping fish: Barbless Podcast intros and outros for Riverside, in 16:9, 9:16 and 1:1, fitted to the TikTok, Reels and Shorts safe zones.
Interface motion
- 200 to 300ms, ease-out.
- Button press: 1px down.
- Card hover: shadow and border. River shapes may scale to 1.012 and glow in their tier color.
- Honor reduced motion: no scale.
- Bounce in the interface, long Ken Burns heroes, or gradients animated as decoration.