Logo
The furtzdesigns wordmark is the primary brand identifier. The "furtz" portion always uses the brand gradient, while "designs" inherits the surrounding text colour.
Do
- Always use the gradient on "furtz"
- Maintain the vertical compression (scaleY 0.82)
- Use Bricolage Grotesque 700 weight
- Keep letter-spacing at -0.05em
Don't
- Separate "furtz" and "designs" onto two lines
- Use a flat colour instead of the gradient on "furtz"
- Stretch, rotate, or alter the proportions
- Add effects like drop shadows or outlines
Specifications
| Font | Bricolage Grotesque, 700 |
| Letter Spacing | -0.05em |
| Vertical Scale | scaleY(0.82) |
| Gradient | linear-gradient(135deg, var(--blue), var(--purple)) |
| Minimum Size | 16px font-size |
| Clear Space | Minimum 0.5em on all sides |
Favicon
The favicon uses a bold "fd" ligature set in Bricolage Grotesque on the dark hero background with the brand gradient applied to the text. Screenshot the sizes below and save as PNG.
Alternative: Gradient background
Colours
Our colour palette is designed for clarity and contrast. Every colour has a defined role and a corresponding CSS custom property.
Blue
--blue #3245ff Primary brand colour. CTAs, links, accents, active states.
Blue Light
--blue-light #546aff Hover states for blue elements.
Purple
--purple #bc52ee Secondary accent. Gradients, tags, decorative elements.
Teal
--teal #40debf Tertiary accent. Tags, category indicators, highlights.
Dark
--dark #0d0f14 Dark backgrounds, cards, overlays.
Dark Hero
--dark-hero #07000f Hero section base, footer background tones.
White
--white #ffffff Page background, card surfaces, hero text.
Background
--bg #ffffff Default page background.
Background Subtle
--bg-subtle #f5f5fb Alternating sections, code blocks, subtle fills.
Text
--text #1a1b26 Primary body text and headings.
Muted
--muted #6b7280 Secondary text, descriptions, metadata.
Border
--border #e5e7eb Card borders, dividers, form inputs.
Gradients
Gradients are a key part of the furtzdesigns visual identity, used across heroes, CTAs, and decorative elements.
Brand Gradient
linear-gradient(135deg, #3245ff, #bc52ee) Logo accent, gradient text, icon backgrounds, decorative elements.
Hero Gradient
linear-gradient(-45deg, #1a0040, #07000f, #0a0030, #110020) Animated hero backgrounds. Uses background-size: 400% 400% with 14s shift animation.
Hero Glow (Purple)
radial-gradient(ellipse 70% 80% at 20% 50%, rgba(139,24,216,0.6), transparent) Left glow overlay on hero sections.
Hero Glow (Blue)
radial-gradient(ellipse 60% 70% at 80% 50%, rgba(50,69,255,0.5), transparent) Right glow overlay on hero sections.
Typography
We use two typefaces — Bricolage Grotesque for headings and display text, and DM Sans for body copy and interface elements. The base font size is 18px.
Building better websites
Our approach to every project
Website Design & Development
We create websites and solve digital business problems for clients across Australia.
11 March 2026 · 5 min read
OUR SERVICES
Typography Tokens
--font-head | Bricolage Grotesque, sans-serif |
--font-body | DM Sans, sans-serif |
--font-head-weight | 700 |
--ls-tight | -0.025em |
--ls-tighter | -0.03em |
--ls-wide | 0.08em |
--ls-wider | 0.1em |
Spacing & Layout
Consistent spacing creates rhythm and hierarchy. All layout values are defined as CSS custom properties and respond to viewport size.
| Token | Value | Usage |
|---|---|---|
--gutter | 2rem / 1.5rem | Page horizontal padding (desktop / mobile) |
--section-pad | 6rem | Default section vertical padding |
--hero-gap | 8rem | First section after hero vertical padding |
--site-max-width | 1300px | Maximum content width |
Border Radii
Rounded corners are used throughout the interface to create a modern, approachable feel. The scale progresses from subtle to fully circular.
--radius-sm 0.5rem (8px) Buttons, small chips, icon containers
--radius-md 0.75rem (12px) Form inputs, small cards
--radius-lg 1rem (16px) Cards, panels, content blocks
--radius-xl 1.25rem (20px) CTA banners, large containers
--radius-full 50% Avatars, dots, circular elements
Iconography
We use Font Awesome Pro 7.2 Sharp Light (Regular weight) for all icons. Icons are rendered as inline SVGs at build time via the <Icon> component, inheriting currentColor from their parent.
Usage Rules
- Always use the
<Icon>component — never inline raw SVGs - Icons inherit colour from their parent via
currentColor - Standard sizes: 14px (inline), 18px (nav), 20–24px (cards/features)
- Brand icons use
pack="brands"prop - Icon containers use the gradient background:
rgba(50,69,255,0.08)torgba(188,82,238,0.06)
Tone of Voice
How we sound is just as important as how we look. Our voice is confident, direct, and human — never corporate or patronising.
We are
- Confident — We know what we're doing and we're not afraid to show it
- Direct — We say what we mean without filler or jargon
- Approachable — Professional doesn't mean stiff. We're people talking to people
- Honest — We tell clients what they need to hear, not what they want to hear
We are not
- Corporate — No buzzwords, no synergy, no "leveraging solutions"
- Timid — We don't hedge everything with "maybe" and "perhaps"
- Salesy — We let our work speak. No pressure tactics or false urgency
- Condescending — We explain things clearly without talking down to anyone
Examples
"We build websites that actually perform — fast, accessible, and built to last."
"We leverage cutting-edge digital solutions to deliver best-in-class web experiences."
"Your website is slow. Here's exactly what's causing it and how we'll fix it."
"We've identified some potential areas for performance optimisation consideration."
Writing Conventions
| Language | Australian English (colour, optimise, organisation) |
| Perspective | "We" and "our" — never "I" or "me" |
| Contractions | Use them freely (we're, don't, it's) |
| Capitalisation | Sentence case for headings, not Title Case |
| Numbers | Use digits for stats and data (60+ websites, 17 years) |
| Oxford comma | No — "speed, security and accessibility" |