Unified identity system for Cowboys & Beans — covering logos, colour, typography, spacing, and implementation across cnbb.pub, books.cnbb.pub, and art.cnbb.pub.
Cowboys & Beans is a small, independent publishing and arts collective based in southern Minnesota. Founded in 2015, C&B publishes fiction across genres — with a current focus on science fiction — and operates an online gallery for traditional artists. The brand communicates warmth, craft, and intellectual depth.
Horizontal lockup. Use on dark backgrounds, hero sections, and the parent site. Includes full wordmark, motion lines, and coffee bean motif.
Circular badge mark. Use on book pages, colophons, and the books site. Includes "Est. 2015" and "Publishing Co." text. Works at small sizes.
Circular badge mark. Use on book pages, colophons, and the books site. Includes "Est. 2015" and "Publishing Co." text. Works at small sizes.
C&B lettermark with cowboy hat. Use for favicons, social avatars, and small-format applications where the full wordmark would be illegible.
C&B lettermark with cowboy hat. Use for favicons, social avatars, and small-format applications where the full wordmark would be illegible.
Three sites, three personalities, one system. Each site is designed as if by a different specialist — but all three draw from the same token foundation.
All colours defined in OKLCH for perceptual uniformity — equal lightness steps produce equal perceived brightness. Palette extracted from logo artwork and extended into systematic tonal scales.
Hue ~50° (warm amber-brown), shifting warmer at lighter values.
Hue 55°, very low chroma. Grey with warm undertone.
| Token | Maps To | Purpose |
|---|---|---|
| surface-primary | brand-50 | Page background |
| surface-secondary | neutral-100 | Card / section backgrounds |
| surface-inverse | brand-950 | Dark sections, footers |
| text-primary | neutral-950 | Body text, headings |
| text-secondary | neutral-700 | Captions, metadata |
| text-brand | brand-700 | Brand-coloured text |
| border-subtle | neutral-200 | Soft dividers |
| border-default | neutral-300 | Standard borders |
| interactive-primary | brand-700 | Buttons, links |
| interactive-hover | brand-800 | Hover states |
Three typefaces, three roles, one mathematical skeleton.
Soft-serif variable font with four axes: weight, optical size, softness, and "wonk." Per-site expression: Books uses it sharp (SOFT 20, WONK 0) — editorial precision. Art uses it light and airy (weight 300, SOFT 70) — recessive. Parent site uses full personality (weight 900, SOFT 60, WONK 1).
Designed by TypeTogether as the custom typeface for Google Play Books. Scotch Roman roots with modern screen optimisation. Variable font with optical size axis. Newsreader by Production Type is offered as an alternative reader preference.
Monospace with human warmth. Used for metadata, dates, ISBNs, prices, genre tags, navigation labels, and code.
Perfect fourth ratio (4:3 = 1.333), fluid between major third (1.25) at 360px and perfect fourth at 1440px.
| Step | Min | Max | Usage |
|---|---|---|---|
| step 5 | 40px | 90px | Display / hero (Fraunces) |
| step 4 | 33px | 67px | Page title (Fraunces) |
| step 3 | 28px | 51px | Section heading (Fraunces) |
| step 2 | 23px | 38px | Subsection (Fraunces) |
| step 1 | 19px | 28px | Lead paragraph (Literata) |
| step 0 | 16px | 21px | Body text (Literata) |
| step −1 | 13px | 16px | Caption (Literata) |
| step −2 | 11px | 12px | Micro / metadata (Plex Mono) |
4px base, 8px primary rhythm, fluid scale.
| Token | Min | Max | Typical Use |
|---|---|---|---|
| space-3xs | 4px | 5px | Tight inline gaps |
| space-2xs | 8px | 11px | Icon-to-label, tag padding |
| space-xs | 12px | 16px | Label-to-input, compact padding |
| space-s | 16px | 21px | Default component padding |
| space-m | 24px | 32px | Card padding, field-to-field |
| space-l | 32px | 43px | Section padding |
| space-xl | 48px | 64px | Major section gaps |
| space-2xl | 64px | 85px | Hero padding |
| space-3xl | 96px | 128px | Page-level vertical rhythm |
Intra-group spacing must always be tighter than inter-group spacing. This activates gestalt proximity grouping — the perceptual mechanism that makes related elements feel connected. A card with uniform 16px everywhere destroys all spatial information. Title-to-author at 8px, card padding at 16px, between cards at 32px — three scales communicating three relationships.
Three tiers: Primitive tokens (brand-700) → Semantic tokens (interactive-primary) → Component tokens (button-primary-bg). This is the architecture that Material Design, Carbon, and Polaris converge on.
Tokens are delivered as Tailwind CSS 4 @theme directives. Each site loads the shared base file plus its site-specific override. The accent colour tokens are the per-site override point — same class name, different hue.
All type and spacing values use CSS clamp() for fluid interpolation between 360px and 1440px viewports. No breakpoints needed for sizing. The vi unit (viewport inline) respects writing direction.
cnbb-design-tokens.json — DTCG-aligned token definitions. Source of truth.
cnbb-tokens-base.css — Shared Tailwind 4 theme file. All primitives and semantics.
cnbb-tokens-{site}.css — Per-site overrides (books, art, home).
guidelines/colour/ — Interactive colour swatch board.
guidelines/type/ — Live type specimen.