Contact us
fishrr-logo
Fishrr — Design System & Component Library

Design System v1.0

Fishrr
Component Library

A complete maritime-grade design system for the Fishrr WordPress website. All tokens, components, and patterns in one place.

Open Sans Mobile-first WCAG AA 4px grid WordPress ready

01 — Tokens

Colour Palette

All colours are defined as CSS custom properties. Use variable names in your WordPress theme — never hardcode hex values.

Primary & Brand

Primary Blue --color-primary · #0058E6
Primary Hover --color-primary-hover · #3557DC
Deep Navy --color-navy · #181D23
Ocean Teal --color-teal · #5BC0DE
Slate Blue --color-slate-blue · #295C84
Charcoal Slate --color-charcoal · #2E384D

Neutrals

Pure Black#000000
Dark Gray#575A5F
Medium Gray#96989B
Pale Gray#D5D5D7
Off White#EAEAEB
Light Blue Surface#E6F0FF

Semantic / Status

Error Red#D60000
Success Green#5CB85C
Warning Amber#F0AD4E
Info Teal#5BC0DE

02 — Tokens

Typography

H1 / Display 40px · 700 · 48px lh

Seafood Traceability

H2 / Section 28px · 700 · 36px lh

Supply Chain Management

H3 / Subheading 22.4px · 700 · 26.88px lh

Batch Tracking Dashboard

H4 / Small Heading 19.2px · 700 · 30.72px lh

Catch Reference #FRR-2401

Body 16px · 400 · 25.6px lh

Fishrr provides end-to-end traceability for seafood supply chains, from vessel to retail. Track, verify, and report on every catch with confidence.

Body Small 15px · 400 · 25.5px lh

Secondary text used for captions and helper copy. Slightly de-emphasised to support primary content.

Button / Label 14.4px · 500 · 21.6px lh
View Full Report
Caption / Micro 12px · 400 · 18px lh
Updated 28 Apr 2026 · Ref FRR-4421
Code / Mono 13px · Courier New
FRR-LOT-2024-04281

03 — Components

Buttons

Primary

Secondary

Ghost

Icon Buttons

Disabled States

Button with Icon

04 — Components

Badges

All Badge Variants

Primary Approved Pending Rejected In Transit Archived

In Context — Table Row

Atlantic Salmon · Lot A22 Harbour Grace, NL Certified
Pacific Cod · Lot B09 Dutch Harbour, AK Pending Review
Sea Bass · Lot C18 Portree, Scotland In Transit

05 — Components

Cards

DEFAULT CARD · raised level 1

Atlantic Salmon Batch

Harvested 24 April 2026, Loch Fyne. Certified sustainable under MSC standard. All paperwork verified.

Verified

ELEVATED CARD · floating level 3

Pacific Cod — Priority

High-priority shipment requiring same-day clearance. Contact supply chain lead immediately.

Urgent

DARK CARD · dark section

Deep Sea Tuna · Lot T44

Sourced Indian Ocean fishing zone 51. Full traceability chain available. Export-ready documentation on file.

Export Ready

INFORMATION CARD

Compliance Reminder

EU Deforestation Regulation due diligence checks are now mandatory for all species imported after 1 Jan 2025.

🐟

PRODUCT CARD

Sea Bass · SKU-1882

Origin: Mediterranean. MSC certified. Grade A.

In Stock Lot B-204

06 — Components

Forms & Inputs

Text Inputs

Unique batch identifier from your vessel log.
Lot reference format is invalid. Use FRR-YYYY-NNNNN.
✓ Reference verified and active.

Select, Textarea & Toggles

08 — Components

Tabs

Lot FRR-2024-04281 — Atlantic Salmon, harvested 24 April 2026 from Loch Fyne, Scotland. 480kg, Grade A. MSC certified. Allocated to EU export line.
Catch history shows 3 previous lots from same vessel over the past 90 days. No anomalies flagged. Average batch size: 460kg.
3 documents attached: Catch Certificate, Health Certificate, MSC CoC. All within validity period.
EU Catch Registration: ✓ Complete. GDST data standard: ✓ Compliant. SIRENAC registry match: ✓ Verified.

09 — Components

Alerts

ℹ️

New Traceability Regulation

EU seafood traceability requirements have been updated. Review the new catch data fields required from 1 June 2026.

✅

Shipment Verified

Lot FRR-2024-04281 has passed all compliance checks and is cleared for export.

⚠️

Document Expiring Soon

Health Certificate HC-229 expires in 5 days. Upload a renewed certificate to avoid shipment hold.

🚫

Compliance Failure

Vessel IMO number not found in SIRENAC registry. This shipment cannot proceed until resolved.

10 — Components

Data Table

Lot Ref Species Origin Harvest Date Weight (kg) Status Actions
FRR-04281 Atlantic Salmon Loch Fyne, Scotland 24 Apr 2026 480 Verified
FRR-04199 Pacific Cod Dutch Harbour, AK 21 Apr 2026 1240 Pending
FRR-04102 Sea Bass Portree, Scotland 18 Apr 2026 320 In Transit
FRR-03988 Bluefin Tuna Mediterranean, Zone 37 12 Apr 2026 890 On Hold

12 — Tokens

Spacing Scale

4px Base Grid

4px · --space-1 · micro
8px · --space-2 · xs
12px · --space-3 · sm
16px · --space-4 · md (default)
20px · --space-5 · lg
24px · --space-6 · xl
32px · --space-8 · 2xl
40px · --space-10 · 3xl
60px · --space-15 · hero pad
76px · --space-19 · section break
92px · --space-23 · ultra

13 — Tokens

Elevation & Shadows

Flat (0)

box-shadow: none

Disabled, backgrounds

Raised (1)

0px 1px 3px rgba(0,0,0,0.08)

Default cards

Lifted (2)

0px 2px 8px rgba(0,0,0,0.12)

Hover states

Floating (3)

0px 4px 12px rgba(0,0,0,0.15)

Elevated cards

Hovering (4)

0px 8px 24px rgba(0,0,0,0.18)

Modals, dropdowns

14 — Page Patterns

Page Section Components

Hero Section

🐟 Maritime Traceability Platform

Know Where Your
Seafood Comes From

End-to-end supply chain visibility from catch to consumer. Built for the modern seafood industry.

Feature Grid (3-column desktop)

🎯

Full Batch Traceability

Track every catch from vessel to plate with a complete, immutable audit trail that satisfies any regulatory requirement.

📋

Compliance Automation

Automatically validate shipments against EU, US, and international seafood regulations. Get alerted before issues arise.

📊

Real-Time Dashboards

Monitor your entire supply chain at a glance. Live data from vessels, processors, logistics partners, and retail.

Stats / KPI Row

Active Lots

2,481

▲ 12% this week

Pending Review

34

▼ 5 new today

Verified Shipments

19,204

▲ 98.2% pass rate

Partner Vessels

847

▲ 14 joined this month

Fishrr Design System v1.0 · Open Sans · 4px grid · WCAG AA · Built for WordPress

Design 2
Fishrr Design System & Component Library
Book a Demo
Seafood traceability software

Advanced seafood traceability from vessel to shipment

Fishrr gives seafood businesses real-time visibility across catches, raw materials, batches, processing, packaging, stock movements and finished goods — all in one secure digital platform.

Built for seafood processors, exporters, fishing fleets and compliance teams who need accurate traceability without relying on paper, spreadsheets or disconnected systems.

Book a Demo Explore the Platform
Vessel visibility Batch tracking Compliance-ready
Traceability Control Centre
Live operational overview
128 Active batches
42t Stock tracked
98% Checks complete
FV Atlantic Star Catch linked to intake record
Verified
Batch B-2049 Processing and packaging in progress
In progress
Shipment SH-9182 Export report ready for review
Ready
Quality record QR-4421 Inspection evidence captured
Passed
The problem

Seafood traceability should not depend on paper trails and disconnected spreadsheets.

Manual processes make it harder to prove origin, track batches, respond to audits, manage recalls and understand what is happening across the operation in real time.

Paper records are slow

Manual paperwork creates delays, duplication and weaker audit trails.

Batch data disconnects

Raw materials, packaging and finished goods can become hard to link.

Reporting takes too long

Compliance evidence can be spread across folders, emails and spreadsheets.

Visibility is limited

Managers need a live view of stock, production, quality and movement.

Platform overview

One platform for the full seafood supply chain

Fishrr connects operational, traceability and compliance records into a clear digital workflow from vessel activity through to customer reporting.

Vessel & Catch Visibility

Connect vessel activity and catch data to downstream traceability records.

Raw Material Intake

Record incoming seafood, supplier details, weights, dates, quality checks and batch references.

Batch & Lot Traceability

Follow each batch through processing, packaging, storage and shipment.

Production Records

Capture processing steps, yields, wastage, staff actions and operational timestamps.

Quality & Compliance

Standardise checks, inspection records, evidence and compliance documentation.

Reports & Export

Generate traceability, stock, quality and audit reports quickly when needed.

Process

How Fishrr works

A simple workflow for collecting, connecting, monitoring and reporting seafood supply-chain data.

1

Capture Data

Teams record catch, stock, production and quality information using desktop, tablet or mobile workflows.

2

Connect Every Stage

Fishrr links raw materials, batches, packaging, finished goods and shipments into one traceability chain.

3

Monitor Operations

Managers view live dashboards, stock movement, compliance status and operational progress.

4

Report with Confidence

Export accurate records for buyers, auditors, recalls, internal reviews and customer reporting.

Traceability

From catch to customer, every stage connected

Use this timeline component to show the seafood journey clearly across desktop and mobile layouts.

1Vessel
2Catch
3Raw Intake
4Processing
5Packaging
6Cold Storage
7Shipment
8Reporting
Vessel tracking

Connect vessel activity with downstream traceability

Fishrr can support vessel visibility and catch-to-processing traceability, helping teams understand where products came from before they enter processing and shipment workflows.

Origin confidence

Link vessel and catch information to intake, batch and shipment records.

Operational control

Give office teams a stronger view of movement before product reaches processing.

Live vessel layer

FV Atlantic Star

Catch record connected to raw material intake and active processing batch.

Linked Tracking
Quality & compliance

Compliance-ready records without the paperwork

Use these cards for compliance, quality, audit and reporting feature sections.

Standardised quality checks

Create consistent inspection workflows for intake, processing and shipment stages.

Inspection records

Capture evidence, timestamps, users, comments and pass/fail outcomes.

Audit support

Keep traceability and compliance information organised for review.

Recall readiness

Trace affected batches, movements and related finished goods quickly.

Buyer confidence

Provide clearer records for customer reporting and supply-chain assurance.

Exportable reports

Generate operational, quality and traceability reports when required.

Industries

Built for seafood businesses that need control and confidence

Seafood processors

Track raw material intake, production records, packaging and finished goods.

Fish exporters

Prepare stronger shipment, buyer and export records.

Fishing fleets

Connect catch and vessel activity with traceability data.

Aquaculture businesses

Manage stock movement, batch history and quality information.

Cold storage teams

Maintain visibility over location, movement and product status.

Compliance departments

Keep evidence, records and reporting workflows in one place.

Book a demo

Ready to modernise your seafood traceability?

Speak to the Fishrr team and see how the platform can support your operation.

Component library

Fishrr design system components

Reusable website components for WordPress pages, landing pages, forms and product sections.

Colour tokens

Use only these colours
Primary Blue#0058E6
Deep Navy#181D23
Ocean Teal#5BC0DE
Slate Blue#295C84
Indigo#3557DC
Blue Surface#E6F0FF

Buttons

Primary Button Secondary Button Ghost Button

Badges

Primary Info Success Warning Error

Cards

Default Card

White background, pale border, 10px radius and subtle shadow.

Elevated Card

Use for dashboard panels, key CTAs and important data blocks.

Information Card

Use for helpful notes, info states and supporting messages.

Tabs

Tabbed content block

Use tabs when grouping related platform information without making the page too long.

Contact / Demo Form

Data table

Batch Origin Stage Quality Status
B-2049 FV Atlantic Star Processing Passed In progress
B-2050 North Sea Intake Cold Storage Passed Ready
B-2051 Harbour Intake 4 Quality Review Pending Review
End-to-end seafood traceability from vessel to consumer. Built for the modern supply chain.

Product

Traceability Food Trace e-seaweed Mobile App

solutions

Fisheries How it works Partners

company

About Fishrr Contact