Brickeven Design Guide
Component catalogue built on Tailwind CSS v4 and Catalyst. Browse each section to explore available components, variants, and patterns.
Colours
Brickeven's mid-century modern palette. Four scales derived from the core brand colours.
Forest
Primary dark green — text, backgrounds, key UI surfaces
Olive
Medium green — accents, links, interactive elements
Sand
Warm beige — backgrounds, cards, muted surfaces
Ember
Burnt orange — accent, CTAs, highlights, warnings
Core brand colours
Forest
#40513B
forest-500
Olive
#628141
olive-500
Sand
#E5D9B6
sand-300
Ember
#E67E22
ember-500
Secondary colours
Brick
#C44A3A
brick
White
#FFFFFF
white
Black
#000000
black
Typography
Heading, Text, TextLink, Strong, and Code components.
Headings (h1–h6)
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Body text
This is a paragraph of body text using the Text component. It supports inline elements like Strong for emphasis, Code for inline code, and TextLink for hyperlinks. The heading font is Lustria (serif) and the body font is Mulish (sans-serif).
Tone of Voice
Brickeven talks like a smart friend who happens to be good with money. Friendly and low-key professional, but with a fun twist.
Core traits
- Warm, not corporate. We say “your property” not “the property.” We say “we” and “you” not “the user.”
- Clear, not dumbed down. We explain financial concepts without jargon, but we don’t patronise. Homeowners are smart — they just haven’t had the right tool.
- Fun twist. A little personality in error messages, empty states, and success moments. Not constant jokes, just the occasional wink. The kind of app where you smile once per session.
- Encouraging. Every number is an insight, not a judgment. A £20,000 renovation spend isn’t “a lot” — it’s “your investment so far.”
- Honest. If a number is estimated, we say so and explain how. We never present a guess as a fact.
Button labels
| Instead of | Write |
|---|---|
| Submit | Save expense / Add valuation / Continue |
| Click here | [Never use this] |
| OK | Got it |
| Cancel | Cancel (this one is fine as is) |
| Delete | Delete (keep it direct for destructive actions) |
Empty state examples
No expenses yet
“Nothing tracked yet. Add your first expense to see where the money’s going.”
No valuations
“How much do you reckon it’s worth? Even a rough estimate helps.”
No mortgages
“Add your mortgage details and we’ll work out the true cost of your home.”
Dashboard with no data
“Your dashboard will come alive once you start adding details. Let’s go!”
Success moments (toast messages)
Expense saved
“Expense logged. Your total is ticking up!”
Income saved
“Nice — income logged. Every little helps.”
Valuation added
“Valuation saved. Your dashboard just got smarter.”
Mortgage added
“Mortgage added. We’re crunching the numbers now.”
Account upgraded
“Welcome to full access! Everything is unlocked.”
Room created
“Room added. Time to start tracking.”
Numbers formatting
- Currency: always use
Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }) - Large numbers: £425,000 (with commas), never £425000
- Percentages: one decimal place for rates (e.g. 3.9%), none for whole numbers (e.g. 5%)
- Profit: +£62,600 (green with + prefix)
- Loss: −£12,400 (red with − prefix)
- Dates: “14 Jan 2025” (day month year, short month, no leading zero)
What we never say
- “Error” as a heading — say what went wrong instead
- “Invalid” in user-facing copy — use specific guidance instead
- “Please contact support” — keep it self-serve
- “Oops!” — overused and patronising
- “Uh oh!” — same problem
- Exclamation marks in error messages (feels panicked)
Badges
Small status indicators using the Brickeven palette.
Avatars
Display user images or initials in circular or square variants.
With initials
Square variant
Multiple users
Form Inputs
Text inputs, textareas, and field wrappers with labels, descriptions, and error messages.
Basic inputs
Input with icon
With description and error
Give your property a name you will recognise.
Please enter a valid amount in GBP.
Disabled input
Textarea
Any additional details about this expense.
Fieldset with legend
Selects
Native select, Listbox (custom dropdown), and Combobox (searchable dropdown).
Native select
Listbox
Combobox (searchable)
Form Controls
Checkboxes, radio buttons, and toggle switches with colour variants.
Checkbox colours
Checkbox group
Get notified when a valuation is added.
Receive text alerts for important updates.
Browser push notifications for activity.
Radio group
Your initial mortgage when buying the property.
Switching to a new mortgage deal on the same property.
Extra borrowing on top of your existing mortgage.
Switch variants
Toggle the application theme.
Factor mortgage interest into total invested.
Receive email when values change significantly.
Dropdowns
Floating menus with items, icons, descriptions, keyboard shortcuts, and sections.
Basic dropdown
With icons and shortcuts
With sections and descriptions
Tables
Data tables with striped, dense, and grid variants.
Default
| Room | Type | Expenses | Net spend |
|---|---|---|---|
| Kitchen | Kitchen | 12 | £14,200 |
| Bathroom 1 | Bathroom | 6 | £4,800 |
| Living room | Living room | 3 | £2,100 |
| Bedroom 1 | Bedroom | 4 | £1,600 |
| Garden | Garden | 8 | £6,500 |
Striped
| Room | Type | Expenses | Net spend |
|---|---|---|---|
| Kitchen | Kitchen | 12 | £14,200 |
| Bathroom 1 | Bathroom | 6 | £4,800 |
| Living room | Living room | 3 | £2,100 |
| Bedroom 1 | Bedroom | 4 | £1,600 |
| Garden | Garden | 8 | £6,500 |
Dense
| Room | Type | Expenses | Net spend |
|---|---|---|---|
| Kitchen | Kitchen | 12 | £14,200 |
| Bathroom 1 | Bathroom | 6 | £4,800 |
| Living room | Living room | 3 | £2,100 |
| Bedroom 1 | Bedroom | 4 | £1,600 |
| Garden | Garden | 8 | £6,500 |
Grid
| Room | Type | Expenses | Net spend |
|---|---|---|---|
| Kitchen | Kitchen | 12 | £14,200 |
| Bathroom 1 | Bathroom | 6 | £4,800 |
| Living room | Living room | 3 | £2,100 |
| Bedroom 1 | Bedroom | 4 | £1,600 |
| Garden | Garden | 8 | £6,500 |
Description Lists
Term-value pairs for displaying structured data.
Property details
- Property name
- 14 Elm Street
- Property type
- Semi-detached
- Purchase price
- £325,000
- Purchase date
- 15 March 2022
- Floor area
- 1,200 sq ft
Stat Cards
Data display cards for key metrics. Used on the dashboard for financial overview.
Dashboard metrics
Property overview
- Estimated value
- £425,000
- Total invested
- £362,400
- Paper profit
- +£62,600
Mortgage & costs
- Monthly mortgage
- £1,247
- Avg. monthly cost
- £1,892
- Equity
- £198,000
Renovation summary
Kitchen
- Net spend
- £12,680
- Transactions
- 24
- Top category
- Labour
Inline Alerts
Contextual feedback messages for user actions and system status. Four variants mapped to the brand palette.
With description
New valuation available
Zoopla has updated the estimated value of your property. You can add it as a new valuation to keep your dashboard accurate.
Attention needed
Your mortgage introductory rate ends next month. Consider adding a remortgage record once your new deal is in place.
Expense saved
Kitchen tiles — £680 has been added to your Kitchen room. Your renovation spend has been updated.
Couldn't save that
Something went wrong on our end. Give it another go in a moment.
With list
There were 2 errors with your submission
- Purchase price needs to be more than zero
- We need a purchase date to crunch the numbers
With actions
Property unlocked
Welcome to full access! Everything is unlocked for 14 Elm Street.
With link on right
A new software update is available. See what's new in version 2.0.4.
With dismiss button
Successfully uploaded
Introductory rate ending soon
Payment failed
Valuation reminder
Feedback
Alert dialogs for confirmations and Dialog modals for complex interactions.
Alert dialog
Dialog (medium)
Dialog (large)
Dividers
Horizontal separator lines in default and soft variants.
Default
Content above
Content below
Soft
Content above
Content below
Pagination
Page navigation with numbered buttons, gaps, and previous/next links.