Design System

TinyTax Brand

More Happy. Tiny Tax.

Entrepreneurial Familial More Happy

Brand Foundation

Personality

TinyTax should feel like a knowledgeable friend who happens to be great with taxes — not a stuffy accountant, not a faceless corporation.

  • Optimistic but grounded
  • Capable but approachable
  • Warm but professional

Voice in UI

Do

"You're all set!"

"Let's review this together"

"Nice! That's done."

Don't

"You are all set."

"Review your information"

"Form submitted."

Colour System

Our palette balances professionalism with optimism and warmth.

Navy

#1f2744

Trust, stability, professionalism

Green

#11B981

Growth, success, optimism

Coral

#F97066

Marketing illustrations only — avoid in UI

Growth, money, fresh starts. Our hero colour for actions and success.

50 #ECFDF5
100 #D1FAE5
200 #A7F3D0
300 #6EE7B7
400 #34D399
500 #11B981
600 #059669
700 #047857
800 #065F46
900 #064E3B

Trust, professionalism, stability. Grounds the brand with confidence.

50 #F8FAFC
100 #F1F5F9
200 #E2E8F0
300 #CBD5E1
400 #94A3B8
500 #64748B
600 #475569
700 #334155
800 #1E293B
900 #1f2744

Reserved for marketing illustrations and graphics. Avoid in UI — red tones can signal errors.

50 #FFF5F4
100 #FFE4E1
200 #FFCDC7
300 #FFB0A6
400 #FF8F82
500 #F97066
600 #E5544A
700 #C7403A
800 #A3322E
900 #7F2622

Warmer grays feel more human and approachable than cool grays.

50 #FAFAF9
100 #F5F5F4
200 #E7E5E4
300 #D6D3D1
400 #A8A29E
500 #78716C
600 #57534E
700 #44403C
800 #292524
900 #1C1917

Semantic Colours

Softer, friendlier variants that align with our "happier" brand.

Success

"Great job!" not "Transaction approved."
Light #ECFDF5
Default #11B981
Dark #047857

Warning

"Just so you know..." not "WARNING!"
Light #FFFBEB
Default #F59E0B
Dark #B45309

Error

"Let's fix this together" not "ERROR!"
Light #FEF2F2
Default #E57373
Dark #C62828

Info

"Here's a tip..." not "NOTICE:"
Light #EFF6FF
Default #60A5FA
Dark #2563EB

Draft

"Still working on this..." not "INCOMPLETE"
Light #E0E7FF
Default #8B5CF6
Dark #3730A3

Typography

Inter

Get from Google Fonts
Display Happier Tax Filing 48px / 700
H1 Page Title 36px / 700
H2 Section Header 30px / 600
H3 Subsection 24px / 600
H4 Card Title 20px / 600
Body The quick brown fox jumps over the lazy dog. 16px / 400
Small Secondary text and captions 14px / 400
Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800

Logo System

Use the appropriate variant for your background. Maintain clear space equal to the height of the "t" in tiny.

Primary Logo

Primary Logo

For light backgrounds

Reversed Logo

Reversed Logo

For dark backgrounds

Mono White

Mono White

For coloured backgrounds

Mono Navy

Mono Navy

For light backgrounds

Minimum Size

Digital: 100px width

Print: 25mm width

Clear Space

Minimum padding equal to the height of lowercase "t" (~36px at full size)

Downloads

All brand assets in one place. PNG and print-ready formats.

Logos

Primary Logo
SVG PNG Padded Print
Reversed Logo
SVG PNG Padded Print
Mono White
SVG PNG Padded
Mono Navy
SVG PNG Padded

Icons

Icon Primary (Green)
SVG PNG
Icon Navy
SVG PNG
Icon White
SVG PNG

Social Media

Open Graph (1200×630)
PNG
LinkedIn Banner (1584×396)
PNG
Twitter Banner (1500×500)
PNG
Profile Green
PNG
Profile White
PNG
Profile Navy
PNG

UI System

Live examples of UI components, patterns, and interactions using the TinyTax design system.

Buttons

Alerts

Great job! Your return is ready to submit.
Just so you know... This deadline is coming up soon.
Hmm, let's fix this. Some numbers don't quite add up.
Here's a tip: You can save up to 20% by claiming this expense.

Cards

Standard Card

Used for grouping related content with subtle elevation.

🎉

You did it!

Your CT600 has been filed successfully.

Form Elements

Please enter a valid number

Badges

Complete Pending Error New Draft

Status Badges

Interactive status indicators for filing states. Clickable badges have a subtle scale animation on hover.

✓ Filed
Filed / Accepted --success-bg, --success-dark
○ Ready
Pending / Ready --warning-bg, --warning-dark
! Error
Error / Overdue --error-bg, --error-dark
◐ Draft
Draft / In Progress --draft-light, --draft-dark
⏱ Due Soon
Due Soon --warning-bg, --warning
— None
None / Not Started --warm-100, --warm-500
Hover Effect scale(1.02) + brightness(105%)
Border Radius 6px
Transition 0.15s ease
Icon Gap 6px

Links

Inline text with a standard link that users can follow.

Use muted links for secondary navigation or less important actions.

External links open in new tabs: External site

Hover Underline + darken 10% Focus 2px outline offset 2px Transition 0.15s ease

Modals

Confirm Action

Are you sure you want to proceed? This action cannot be undone.

Backdrop rgba(0,0,0,0.5)
Border Radius 12px
Shadow 0 25px 50px rgba(0,0,0,0.25)
Animation fade + scale (0.2s ease-out)

Icons

We use inline SVG icons for flexibility and performance. Standard size is 20×20px with 2px stroke width.

Check
Close
Info
Warning
Download
Settings
16px
20px (default)
24px
32px

Tables

Period Status Amount
2023-2024 Filed £1,250.00
2024-2025 Pending £1,875.50
2025-2026 Draft —
Header Background Warm-50 (#FAFAF9)
Row Hover Warm-50 with 0.15s transition
Border 1px Warm-200

Focus States

All interactive elements must have visible focus indicators for keyboard navigation and accessibility.

Button Focus
Input Focus
Tab to me Link Focus
Ring Colour Primary Green with 15% opacity
Ring Width 3px
Ring Offset 2px (for buttons/inputs)

Loading States

Small
Default
Large

Skeleton loaders for content placeholders:

Animations & Transitions

Consistent motion creates a polished, professional feel. Keep animations subtle and purposeful.

Hover me
Hover Lift transform: translateY(-2px) box-shadow: increase
Fade
Fade In/Out opacity: 0 → 1 duration: 0.2s
Scale
Scale transform: scale(0.95 → 1) ease: ease-out

Timing Guidelines

Micro 0.1s Button states, toggles
Fast 0.15s Hovers, focus states
Normal 0.2s Modal open, dropdowns
Slow 0.3s Page transitions, alerts