GreenFish - Branding & Identity

A component library and design token system built for scale, covering typography, colour, spacing, and interactive states.

Client
GreenFish
Role
Lead Designer & Developer
Year
2025
Tools
Figma, React, TypeScript, Tailwind
GreenFish — outdoor banner mockup

Overview

The client needed a scalable design system to unify their product suite and accelerate development. The challenge was balancing flexibility with consistency—allowing teams to customise without fragmenting the visual language. We built a token-based system covering typography, colour, spacing, and interactive states, with a living component library and clear documentation.

  • GreenFish brand guidelines — spread 1
  • GreenFish brand guidelines — spread 2
  • GreenFish brand guidelines — spread 3
  • GreenFish brand guidelines — spread 4
  • GreenFish brand guidelines — spread 5
  • GreenFish brand guidelines — spread 6
  • GreenFish brand guidelines — spread 7
  • GreenFish brand guidelines — spread 8
  • GreenFish brand guidelines — spread 9
  • GreenFish brand guidelines — spread 10
  • UI components — GreenFish design system
  • UI components — GreenFish design system
  • UI components — GreenFish design system
  • GreenFish — photography
  • GreenFish — photography
  • GreenFish — brand imagery
  • GreenFish — screen presentation
  • GreenFish — Powered by lockup
  • Billboard mockup
  • Outdoor banner mockup
  • iMac mockup
  • Hanging banner mockup
  • MacBook Air mockup