Work / UI/UX Design / Trendspots

UI/UX · Created with Figma · 2026

Trendspots.

Find what's next — with clarity, context, and speed.

Trendspots is a UI/UX concept for a trend discovery toolkit: explore what's trending, understand why it matters, and share insights fast. The visual direction blends soft gradients with a crisp content hierarchy so the interface feels friendly while still being information-dense. Designed end-to-end in Figma as a responsive landing system.

Explore screens ↓ Design notes
Trendspots primary logo mark Features
Trendspots website mockup Hero
Trendspots mobile app icon Social proof
Project
AI Social proof
Scope
UI/UX Case Study
Tool
Figma
Focus
Clarity
Premium dark UI
Neon accent
Card depth
Landing hierarchy
Conversion UX
Content system
Social proof preview
Motion-ready
Premium dark UI
Neon accent
Card depth
Landing hierarchy
Conversion UX
Content system
Social proof preview
Motion-ready

React Native · In Development · 2026

A system,
not a logo.

Trendspots asked for a brand that could scale — from a product icon tucked into a crowded home screen to a full-bleed web hero — without ever losing its signature.

The experience is built around three loops: (1) capture spending fast (manual or receipt scan), (2) stay aware through dashboards and trends, and (3) adjust with AI-driven explanations and nudges that feel human.

Before implementation, I designed the full UI/UX system in Figma so interaction patterns and hierarchy were locked in early. That reduces churn during development and keeps the product coherent as features expand.

31
pages of defined brand rules & applied examples
4
core pillars — mark, palette, type, voice
2
platforms covered — web & native mobile
1
unmistakable visual identity system

React Native · In Development · 2026

Four disciplines.
One identity.

The guidelines are organised around four pillars — each with clear rules, usage examples, and application notes.

01 / Foundations

Brand Story
& Positioning

Purpose, personality, and tone. Defines what Trendspots stands for and the voice it speaks with — so messaging stays cohesive across every channel.

Purpose Voice Values
02 / Mark

Logo
Construction

Primary and secondary marks, clearspace, minimum sizes, and explicit do/don't examples. Built to stay legible from favicon to billboard.

Primary App Icon Clearspace
03 / Palette & Type

Color
& Typography

A deliberate palette led by crimson, anchored with deep ink and soft cream. Type pairings that balance confidence with readability on any surface.

Hex / RGB Hierarchy Pairing
04 / Applications

Web,
App & Print

Applied examples across the web experience, the mobile app icon and UI, and social/print collateral — showing the system in the wild.

Web iOS / Android Social

React Native · In Development · 2026

Mark. Palette.
Typography.

01 — The Mark

A hexagonal crest
with an upward arrow.

The mark is built from a crimson hexagon — a shape that suggests structure and alignment — pierced by a rising blue triangle. It reads as motion, direction, and balance all at once. Works equally at 16px and billboard scale.

Trendspots logo mark
02 — The Palette

Crimson-led,
ink-grounded.

Trendspots uses a soft gradient language as a backdrop, with crisp typography and small neon accents for focus. The result feels optimistic without sacrificing readability.

#C8103D
#8F0B2B
#0B0B0B
#EDE8E0
#0A0A0A
Tint
Tint
Paper
03 — Typography

Editorial &
functional.

A display serif carries the emotional weight; a clean geometric sans does the work; a mono voice speaks in data and detail.

Trendspots.
Display · Serif
Section heading in UI
Interface · Sans
01 — PRIMARY MARK / CLEARSPACE
Labels · Mono

React Native · In Development · 2026

In the
wild.

Key screens from the UI system — showing the product across capture, budgeting, and analysis flows.

Trendspots website browser mockup on crimson background
Hero Browser & product surface
Trendspots mobile app icon on a phone home screen
Social proof iOS home screen treatment

UI / UX

Designed for clarity.
Built for trust.

Three key sections from the Trendspots landing system — hero + dashboard proof, how-it-works steps, and a content-rich blog grid.

Trendspots hero section
Hero Value + proof
Trendspots how it works section
Features Step cards
Trendspots testimonials section
Content Social proof + trust
Trendspots gradient CTA section
CTA Subscribe + next steps

Implementation

The stack
powering it.

A pragmatic mobile stack with AI analysis, real-time data, and a path to shipping fast.

01 / Mobile

React Native
+ Expo

Cross-platform foundations for a native-feel UI, rapid iteration, and smooth navigation patterns.

React NativeExpoTypeScript
02 / AI

Claude API
analysis

Natural-language spend analysis and personalised nudges that explain patterns and suggest next actions.

InsightsNudgesNLP
03 / Data

Supabase
backend

Auth, database, and secure storage for transactions, budgets, and user settings.

PostgresAuthStorage
04 / UX

Designed in
Figma

Full UI/UX designed end-to-end before coding, keeping the product intuitive and mobile-first.

UIDesign systemPrototyping

Need a product UI that feels
effortless?

If you're building a product, service, or studio — let's design an identity system that's beautiful, opinionated, and actually usable by the people around you.

Start a project → See more work