Brand Playbook

Visual Identity

The complete design system and brand guidelines for Catches

JetBrains Mono 400 · letter-spacing 0.32em · uppercase
Logo Colors Typography Spacing Components Motion Downloads
02

Color System

A dark-first palette inspired by deep sea + bioluminescence. Accent used sparingly for interactive elements only.

Core Palette

Extended Tokens

Semantic Colors

Success
Error
Warning
Info / Data
03

Typography

Three typeface families with distinct roles. Display for emotion, body for readability, mono for data precision.

Fraunces — Display Google Fonts ↗
Light 300
Every catch tells a story
Light 300 Italic
Visual Identity
Semibold 600
Species Identified
DM Sans — Body Google Fonts ↗
Light 300
Turn every fishing trip into a growing personal field guide. A world where every angler knows the name of every fish they've ever caught.
Regular 400
Photograph your catch, let AI identify the species, and build your personal collection over time.
Medium 500
Button Label · Card Title · Navigation Item
JetBrains Mono — Data Google Fonts ↗
Regular 400 · Uppercase
CATCHES · LOGO · LABELS
Medium 500 · Data Display
144 SPECIES
Regular 400 · Small Labels
Section Label · Tag · Badge · Metadata

Type Scale

Hero · Fraunces 300
clamp(3rem, 6.5vw, 5.8rem)
Every catch
Section · Fraunces 300
clamp(2rem, 4vw, 3.2rem)
Color System
Card Title · Fraunces 600
1.15rem
Lateolabrax japonicus
Body · DM Sans 300
0.88rem, line-height 1.75
Paragraph text for descriptions and long-form content across the application.
Label · JetBrains Mono
0.62rem, ls 0.12em, uppercase
Section Label
Tag · JetBrains Mono
0.52rem, ls 0.03em
Freshwater Perciformes Common
04

Spacing & Layout

4px base unit. Consistent horizontal padding of 5vw. Three responsive breakpoints.

Scale

Breakpoints

BreakpointWidthNav HeightGrid ColumnsPadding
Desktop> 900px64pxauto-fill, 6 col fish grid5vw
Tablet≤ 900px56pxauto-fill, 4 col5vw
Mobile≤ 560px56px3 col fixed5vw
05

Components

Core UI building blocks. All components share the same color tokens, border radius, and transition timing.

Buttons
Cards
Default
border: --border
Hover
brightness(1.18) + glow
Selected
border-hi + accent glow
Tags & Chips
Fishing Method Bait Type Water Layer Region Season Family
Navigation Bar
CATCHES
Active Link Link
Frosted glass: rgba(8,8,10,0.88) + backdrop-filter: blur(20px) · Appears on scroll > 50px
06

Motion & Easing

One primary easing curve. Restrained, elastic, never bouncy. All entrance animations use the same timing function.

cubic-bezier(0.16, 1, 0.3, 1)
The primary easing for all entrance animations. Fast start with a gentle deceleration — feels responsive without being abrupt. Used for fadeUp, scale transitions, and card stagger reveals.

Animations

fadeUp
0.6s · translateY(22px)
fadeIn
0.6s · opacity only
scaleIn
0.6s · scale(0.85)
Click to replay

Duration Scale

CategoryDurationUseVisual
Micro0.15sHover states, color transitions
Standard0.22sButton press, card border, focus
Emphasis0.6sfadeUp, card entrance, stagger
Dramatic1.1sHero transitions, page load
07

Downloads

All brand assets ready to use. SVG for web & vector, PNG for presentations & documents.

Logo Pack (SVG)
5 wordmark variants + iOS App Icon (Dark & Light)
Dark Light Mono W Mono D Icon
Logo Pack (PNG 2x)
High-resolution PNG renders at 2x scale for presentations
Color Tokens (CSS)
Copy the full CSS custom properties block for your project
Color Tokens (JSON)
Machine-readable design tokens for build tools
© 2026 Catches