Shelley Web Design – Style Guide
Editable brand reference
← Back to portfolio






Manage content

Add, rename, or remove items in any list below. Everything updates live on the page as you type, and auto-saves to this browser.

Backup & restore

Your edits auto-save to this browser only. Download a file to back them up permanently or move them to another computer.


Colours


Buttons



Icons



Recognition pills


Nav / footer links


Voice & tone – Do


Voice & tone – Avoid


Spacing tokens



How to use this guide

A living reference for the SW Design brand, click any swatch or font to tune it.

Every colour, font pairing and component below documents the SW Design brand. Swatches are click-to-edit, change a colour or font anywhere and every preview on the page updates instantly, and auto-saves to this browser as you go. Use Save style… to name and keep a version, switch between saved versions from the dropdown, Undo to step back, or Reset to original to return to the values shown here. Open Manage content to download a backup file, and hit Export tokens to copy a clean CSS variable block for your developer.

01 · Brand Mark

Logo & Lockup

The mark pairs a hand-scripted “SW” in signal red with a bold “DESIGN” wordmark reversed out of dark backgrounds. It’s used exactly as-is in the nav, footer and hero, this is the real logo file, not a recreation.

SW Design logo
  • Script mark: “SW” hand-drawn in Signal Red, slightly rotated, overlapping the wordmark’s cap-height.
  • Wordmark: “DESIGN” in a heavy, tightly-tracked sans, white with a soft drop shadow, built for dark backgrounds only. There is no separate light-background version; on white it disappears.
  • Clear space: keep at least the height of the “D” free on every side.
  • Do not: recolour the mark, stretch the lockup, place it on a light background, or separate “SW” from “DESIGN” onto different lines.

02 · Colour

Palette

One accent, disciplined everywhere. Signal Red is the only colour note against near-black surfaces and white content sections, click a swatch to adjust it.

03 · Typography

Type System

Three roles: a wide geometric display face for big statements, a bold rounded face for page & card headings, and a clean humanist sans for everything you read.




Display / 44px

UX/UI DESIGNER, POWERING GROWTH

Heading 1 / 34px

JACK App

Heading 2 / 26px

What I did in the role:

Heading 3 / 20px

Digital marketing

Body / 16px

JACK App is an all-in-one construction management platform used by builders and trades across Australia, New Zealand, the US and Canada.

Eyebrow label / 12px

Clients Testimonial

04 · Interactive Elements

Buttons, Badge & Tags

Circular icon-buttons are the site’s signature action pattern, alongside a rotating stamp badge used as a brand flourish, plus a pill-shaped text button pattern with documented hover and disabled states for everywhere else a CTA is needed.








CTA buttons

The screenshots didn’t show a dedicated text button, the site leans on circular icon actions instead (left). This pill-button pattern is built from the same tokens for anywhere a text CTA is needed (forms, emails, etc.). Hover any button below, or see the forced preview next to it. Add, rename, or remove buttons from Manage content. The sizing controls above apply live to every button and card in this guide.

Circular arrow buttons

↗
↗
←
→

Default: gray outline, hover to see it fill red live. Third/fourth: dashed variant used for testimonial carousel nav.

Rotating stamp badge

SHELLEY WEB DESIGN • UX/UI DESIGNER •

SW badge mark

Red ring, black core, orbiting circular text. Used in the hero and the final CTA section.

Recognition pills

Black rounded container holding individually outlined pill tags, used for award/credential call-outs.

05 · Icons

Icon Library

Two Font Awesome Free icons for global/nav use, plus the custom line-icon set used across the meta row and services list. All render in Signal Red or white depending on context.

06 · Navigation, Hero & Footer

Site Chrome

Consistent black nav and footer bracket every page. The hero opens with a globe icon beside the eyebrow name. Footer carries a subtle diagonal line texture and a thin hairline divider above the legal row.

SW Design logo

Sarah Shelley

UX/UI Designer,
Powering Growth

“Home” can render as this icon alone on compact / mobile nav widths.
SW Design logo

© Shelley Web Design 2025. All rights reserved

07 · Content Components

Service List Row

White rows on the default state, flipping to a near-black row with a red heading and solid-red action button on hover/active. Icons below are the site’s actual custom SVGs.

UX/UI Design

A user-centred design process that transforms ideas into engaging digital experiences backed by research and usability.

↗

Digital marketing

Strategic campaigns that connect, convert, and grow your audience across digital touchpoints.

↗

Development

Bringing approved UI designs to life, building a responsive and functional website.

↗

08 · Project Page Components

Meta Row & Portfolio Card

Case-study pages open with a four-item fact row, and the portfolio grid uses an oversized ghost numeral behind each card as a quiet sequence marker.

Client Name:JACK App
Category:UX / UI Design
Location:Adelaide, South Australia
Timeline:June 2025 – August 2026
01

project screenshot
01
JACK App
UX / UI Design

JACK App is an all-in-one construction management platform used by builders and trades.

02

project screenshot
02
Scratton Finance
UX Design

Trade-in valuation product design for a finance platform.

09 · Testimonial

Client Quote Block

A textured dark panel with a tracked-out eyebrow, a bold centered pull-quote, and dashed circular carousel controls.

Clients Testimonial

“Working with Sarah was a delight. She has created 2 websites for us. Her creative and communication skills have captured the look and feel and brand of our business. Nothing was too much trouble and she was available 24/7.”

Barry Goldman, EvTEK Chargers & Solis Energy

←
→

10 · Closing CTA

Call-to-action Pattern

A carbon-texture panel pairs a headline that fades to transparent with the rotating stamp badge, a quiet signature moment reserved for the very end of a page.

LET’S DISCUSS
SHELLEY WEB DESIGN • UX/UI DESIGNER •

SW badge mark

11 · Spacing

Spacing Scale

Sections run full-bleed with generous vertical rhythm; content is capped to a centered max-width column. Adjust the base steps here.

12 · Voice & Tone

Writing the SW Design Way

Confident, first-person, benefit-led. Short fragments carry as much weight as full sentences.

Do

    “Strategic design for SaaS, eCommerce, and finance platforms. I turn complexity into clarity through user-first design.”

    Avoid

      “A user-centred design process that transforms ideas into engaging digital experiences backed by research and usability.”

      Export tokens

      Copy this into your project’s CSS to hand off the current values.