bites.fyi
Quick, useful tools and explainers - This page demonstrates the design system.
Foundations
Colours
Brand
50
100
200
300
400
500
600
700
800
900
950
Neutral
50
100
200
300
400
500
600
700
800
900
950
success
50
100
200
300
400
500
600
700
800
900
950
warning
50
100
200
300
400
500
600
700
800
900
950
error
50
100
200
300
400
500
600
700
800
900
950
info
50
100
200
300
400
500
600
700
800
900
950
Semantic: backgrounds & text
bg-canvas
Page background
bg-surface
Cards, elevated surfaces
bg-subtle
Section dividers, inputs
bg-muted
Hover, disabled
bg-brand
Primary surfaces
bg-brand-subtle
Light brand wash
Foundations
Typography
type-display
Bites
type-h1
Mortgage calculator
type-h2
Affordability and overpayment
type-h3
How much can you borrow?
type-h4
Monthly repayments
type-lead
A quick way to see what you can afford.
type-body
Enter your income, deposit, and term to see what you could borrow and what the monthly repayments would look like across a few interest rate scenarios.
type-body-sm
Smaller body text for denser UI.
type-label
Annual income
type-caption
Helper text and footnotes.
type-eyebrow
Property & mortgages
type-num-display
£412,500
type-num-lg
£1,847
type-num
4.50%
type-num-sm
£289,000
Foundations
Spacing
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-24
96px
Foundations
Radii
rounded-control
rounded-card
rounded-modal
rounded-pill
Foundations
Elevation
elevation-flat
elevation-raised
elevation-hovered
elevation-floating
elevation-overlay
Foundations
Icons
Sizes
icon-inline
icon-nav
icon-section
icon-card
icon-hero
Weights — regular vs fill
Regular
Fill (state)
Common icons
ph:calculator
ph:house
ph:piggy-bank
ph:credit-card
ph:trend-up
ph:percent
ph:coins
Components
Cards
Elevations
Flat card
Default. Defined by border and surface colour, no shadow.
Raised card
Lifts off the canvas with a subtle shadow.
With mixed content
Mortgage calculator
Affordability and overpayment scenarios.
Components
Inputs
Default
With hint
The amount you have saved towards the property.
Invalid
Term must be 40 years or less
Disabled
Components
Links
Inline
Most mortgage lenders cap borrowing at around 4.5x your income, though some lenders offer more depending on your circumstances. See our affordability guide for more details.
Standalone
Components
Badges
Variants