The furtzdesigns brand
The retro-wave world, written down: the wordmark and its files, colours, type, the squeeze, surfaces, depth, the scene and the words. Every value on this page is read from the live tokens, and every file is the one the site uses.
One word, two weights of meaning
furtz carries the gradient, designs stays flat. Never the other way round, never recoloured, always compressed like every other heading on the site.
Nothing sits closer to the mark than the height of its own d: not a tagline, not a client's logo, not the edge of the canvas.
- Pick the file by the surface: night and photographs take the gradient with white, light surfaces take the side colours with ink.
- Keep the clear space. It scales with the mark, so it holds at every size.
- Use the ink or white file wherever there is one colour to print with.
- Scale the whole mark. It is one object, not two words.
- Never put the gradient on designs, or on the whole word.
- Never un-squeeze it, outline it, give it a shadow or set it in another face.
- Never rotate or skew it. The 4° shear belongs to the script eyebrow alone.
- Never recolour it to a client's palette, and never run it below 120px wide.
The files, drawn from the real outlines
Every SVG is built from the Bricolage Grotesque outlines at the wordmark's exact weight, tracking and squeeze, so it needs no font installed and renders the same everywhere.
A night sky, a sun, and four things that glow
Ink and lavender do the reading. Purple, mint, coral and gold do the pointing. The gradients are the sky and the sun, and only ever those.
Loud headings, quiet body, one flourish
Three faces, each with one job. The compressed heading is the thing people remember.
Page and section headings are Bricolage Grotesque at 800, card titles and the wordmark at 700, tracked to -0.03em and squeezed to 0.82 of their height. Optical size follows the font size, so the big headings get the tighter display cut. The squeeze is the signature, not a per-page choice.
Body copy is DM Sans Variable: 16px at a line height of 1.6 on the page, 17px at 1.7 in prose, 14px and 13px for labels and captions. It stays quiet so the headings can shout.
The eyebrow, the only place the script lives
Palm Club Script at clamp(26px, 2.8vw, 38px), line height 0.9, filled with the surface's eyebrow gradient and sheared with skewY(-4°) (-3.5° under 900px) so the baseline rises the way a neon sign does while the letters stay upright. Only the eyebrow directly inside a section header gets it.
Cards, feature blocks, plan heads, the CTA band and the mega menu keep the caps eyebrow: DM Sans 13px, 700, uppercase, tracked 0.12em.
Every heading, 0.82 tall
scaleY(var(–squeeze)) on anything set in the heading face. Block headings compensate the gap underneath; inline numbers and labels scale from their own centre.
The same face at its natural height. Correct type, wrong brand.
Squeezed to 0.82. This is the rule the audit script checks for on every page.
Two fixed-size tiles are exempt because their text is the tile itself: the 44px review avatar and the 40px step number. Squeezing them would squash the tile, not the type. Everything else in the heading face, including stat numbers, the wordmark and the FAQ question, carries the squeeze.
Five grounds, one contract
A section declares its surface and everything inside reads its colours from it: background, headings, body, muted, eyebrow, links and cards. Nothing hardcodes an on-dark colour.
The default. Most of the site sits here.
data-surface="page"Soft sections, tiles and alternating rhythm, with a 3px ink rule top and bottom.
data-surface="lav"Warmer, used sparingly.
data-surface="cream"Inner-page headers and dark sections: the inner sky gradient, mint eyebrows.
data-surface="night"Flat night, softer copy, mint eyebrows, cream links.
data-surface="footer"Hard shadows and a little lift
Depth on this site is a solid offset, like a sticker on a poster. Blur is not part of the world.
A hard offset shadow in the button's own side colour, never blurred. On hover the button lifts 2px towards the top-left and the shadow grows a step; on press it drops 2px. Icons sit at 18px; the 40px icon button carries one at 16px. Below 600px the large button falls back to the default height.
Small facts and links: 40px tall, ink-bordered, with the one-step shadow in cream side. A chip that is a link lifts 1px on hover; a selected chip flips to ink with a purple shadow.
One family, one weight, sized by context
Font Awesome Pro, Sharp Light. Every icon is a file with an intrinsic 24px size, filled with currentColor, and the context it sits in sets its real size. No second icon family, ever.
Two-pixel lines, honest shadows, a 4px grid
Borders are 2px ink, 3px between surfaces. Corners run from 8px to 24px. Space steps from 4px to 128px.
The spacing scale
Fourteen steps on a four-pixel base. Sections breathe with clamp(72px, 9.5vw, 136px) and grids gap with clamp(20px, 2.2vw, 32px), so the rhythm holds from phone to desktop.
The layout
One container, 1320px wide with a fluid gutter, and three breakpoints below it. Section headers sit on a twelve-column grid so the heading and its side note line up from page to page.
Measured, not eyeballed
Every pairing below is computed from the tokens on this page, so the numbers move if the colours do. Text on a coloured button is the one to watch: coral and purple carry white only at button size and weight, and never as running text.
AA is 4.5:1 for running text; AA large is 3:1 and covers headings, buttons and anything 24px and up.
The hero is a place, not a picture
Every dark section of the site is the same scene at a different hour: a striped sun sinking behind a horizon, a grid floor driving towards you, stars above. The rules of light are fixed so it always reads as one world.
Near-black at the top through indigo to violet, top to bottom, and it stops at the horizon. The ground below keeps the lower violets and carries the grid.
One disc in the sun gradient, gold into coral into violet, cut into bands by a mask so the sky shows through the gaps. It sits on the grid's vanishing point and sinks 120px behind the horizon on the homepage, 76px on the CTA band. In short dark sections it fades up instead.
A fixed line, 44% of the space under the header on the homepage and 37% on the CTA band. Stars stop there, the grid starts there, the sun's cut sits on it.
Mint lines at 45% (50% on the homepage) on a 96px cell, tilted 58° in perspective from the horizon, 62° in short sections. It drives towards you one cell every 2.6 seconds and fades in from the horizon.
Two layers of soft white dots on different spacings, at 70%, twinkling on a four-second breath. Never below the horizon and never in front of the sun.
A coral halo on the sun and a wide coral-to-violet haze on the horizon, so the disc looks lit rather than pasted on.
How it moves
Motion on the site is either atmosphere that never stops, or a reveal that plays once and rests. Atmosphere is the sun, the grid and the stars. Everything else shows up when you reach it and then stays still, so the page is never busy twice.
The one easing curve is ease-pop, a quick start with a soft landing, and the one long loop is the grid. If a new piece needs motion, it borrows from this table rather than adding to it.
Say less, and mean it
The copy is a partner talking, not a studio pitching. Short sentences, plain words, Australian spelling, and every number real.
- Write as we and you. One idea per sentence.
- Sell outcomes and the partnership. Capture on the words people search (web designer, Google Ads, website maintenance), then show them we are more than that.
- Publish prices only in the plan and tier tables, and only as from prices on the catalogue.
- Label a comparison Before and After. Never strike through the old thing.
- Every figure has a source we can show: review counts, uptime, edge locations, years.
- No hours, day rates or hourly rates anywhere. We are not a developer for hire.
- No project prices in case studies, FAQs, mockups or stat rows. What a named job cost is never published.
- No cheap entry offers on the site. Those are private conversations.
- No invented statistics, licence numbers or credentials, even inside a mockup.
- No superlatives we cannot back, and no exclamation marks doing the work a verb should.
What keeps it feeling like us
Most of these came from a real slip that got caught. They are cheap to follow and expensive to break.
- Compress every heading-face element, including numbers, labels and the wordmark.
- Use the script only as a section eyebrow, on the gradient, on the rising baseline.
- Give every card on a light surface a two-pixel ink border.
- Shadows are solid offsets in the element's side colour.
- Let the sky, sun, grid and stars do the atmosphere. Keep sections flat.
- Reveal on scroll, then rest. Nothing loops except the sun's glow and the grid's drift.
- Keep the wordmark's clear space and use the files on this page, never a screenshot of the header.
- No blurred shadows, no glassmorphism, no drop-shadow text.
- No gradient text outside the wordmark and the eyebrows.
- No angled or rotated cards. The 4° skew belongs to the script alone.
- No strikethrough for before-and-after. Label them Before and After.
- No new colours. If a state needs a tint, it comes from the side colour of an existing one.
- No rounded line caps or soft edges on the motifs. The sun's bands and the grid lines cut square.
- No second icon family, and no icon drawn by hand to fill a gap.
Want a brand that has a world of its own?
This page is how ours works. We build the same thing for clients: tokens, rules and a setting, not a logo and a colour.