Brand Playbook

Visual Identity

The complete design system and brand guidelines for Catches

CATCHES

JetBrains Mono 400 · letter-spacing 0.32em · uppercase

Logo Sub-products Colors Typography Spacing Components Motion Downloads

Logo System

A pure typographic wordmark. "CATCH" in the primary text color, "ES" in the accent color. No graphic symbol — the color split is the identity.

CATCHES

On dark #08080A

CATCHES

On light #F0F4F8

Variants

Primary (Dark BG)

Default for dark backgrounds

SVG

Primary (Light BG)

Light backgrounds & print

SVG

Mono White

Single-color on dark/photo

SVG

Mono Dark

Single-color on light/print

SVG

Icon Mark

Favicons, app icon accent

SVG

Clear Space

CATCHES

1x cap height 1x cap height 1.5x 1.5x

Minimum clear space = 1x the cap height of "S" on all sides

Misuse

CATCHES

Don't stretch

CATCHES

Don't outline

CATCHES

Don't recolor

CATCHES

Don't rotate

iOS App Icon

The app icon extends the wordmark with a subtle water ripple motif, reinforcing the fishing identity while keeping the typographic focus. Accent-colored wave strokes suggest a water surface — minimal enough to stay clean at every iOS size.

↓ SVG Dark ↓ SVG Light

01b

Sub-product Icons

Sub-products carry their own iconographic identity that doesn't depend on the CATCH[ES] wordmark. Each follows the brand's dark-first palette + sparing accent rule, but expresses the product's own conceptual core. Below is the live roster.

Underwater Fish Encyclopedia · Depth-Scrolling Dive Experience

Strata

A vertical cross-section of the ocean's actual photic zones, with bands proportional to real bathymetry (0–200m sunlit, 200–1000m twilight, 1000–4000m midnight, 4000m+ abyssal). The single accent line marks the 200m photic boundary — where photosynthesis ends and the deep begins.

120 PX

80 PX

60 PX

40 PX

29 PX

Accent

#7BD3C8

Canvas

1024 × 1024 · bleed

Bands

18 / 22 / 28 / 32 %

Focal

200m photic line

↓ SVG school.catches.world

More sub-products to come · FishID · Dataset · FishPic

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

Spacing & Layout

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

Scale

Breakpoints

Breakpoint	Width	Nav Height	Grid Columns	Padding
Desktop	> 900px	64px	auto-fill, 6 col fish grid	5vw
Tablet	≤ 900px	56px	auto-fill, 4 col	5vw
Mobile	≤ 560px	56px	3 col fixed	5vw

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

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

Category	Duration	Use
Micro	0.15s	Hover states, color transitions
Standard	0.22s	Button press, card border, focus
Emphasis	0.6s	fadeUp, card entrance, stagger
Dramatic	1.1s	Hero transitions, page load

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

Underwater Icon

Strata app icon for school.catches.world (Fish Encyclopedia · Dive In). 1024×1024 SVG full-bleed.

SVG

UI Component Spec →

Buttons, forms, loading, upload, drawer/lightbox patterns. Tokens above are the source of truth — UI inherits, never overrides.

ui.catches.world

Visual Identity

Logo System

Variants

Clear Space

Misuse

iOS App Icon

Sub-product Icons

Strata

Color System

Core Palette

Extended Tokens

Semantic Colors

Typography

Type Scale

Spacing & Layout

Scale

Breakpoints

Components

Motion & Easing

Animations

Duration Scale

Downloads