Christopher Shiers Digital

Brand Style Guide

This guide documents the visual identity and design system for Christopher Shiers Digital, a web design service for Australian small businesses.

Brand Colors

Primary Palette

Deep Navy (Background) #0A0F2C
Card Background #111827
Border / Subtle #1E293B

Accent Colors

Electric Blue (Primary) #3B82F6
Indigo (Secondary) #6366F1
Purple (Gradient) #A855F7
Pink (Gradient) #FF3D81

Text Colors

Primary Text #FFFFFF
Secondary Text (Soft Indigo) #A5B4FC
Muted Text #64748B

Signature Gradient

Brand Gradient

Pink (#FF3D81) → Purple (#A855F7) → Blue (#3B82F6)

linear-gradient(135deg, #FF3D81 0%, #A855F7 50%, #3B82F6 100%)

Typography

Primary font: Inter - A clean, modern sans-serif optimized for screens.

Headings

H1 - Hero Heading (48px / 700)
Modern Websites for Small Business
H2 - Section Heading (32px / 600)
What I Do
H3 - Card Heading (20px / 600)
Simple Landing Page

Body Text

Body (16px / 400)
I design clean, mobile-friendly websites that help customers find your business, understand what you offer, and contact you easily — without complicated processes or agency pricing.
Small / Caption (14px / 400)
Based in Adelaide, Australia

UI Components

Buttons

Primary buttons use the brand gradient. Secondary buttons have a blue border. Ghost buttons are subtle with a light background.

Cards - Glassmorphism

Glassmorphism Card (Focal)

Used for important elements like pricing cards. Features semi-transparent background with blur effect and subtle border.

background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1);

Subtle Card (Feature)

Used for portfolio items and service cards. Minimal opacity to reduce visual clutter while maintaining structure.

background: rgba(17, 24, 39, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);

Design Patterns

Visual Examples

Below is the site's social preview image and detailed descriptions of each section. For live visual reference, visit christophershiersdigital.com

Site Preview Image

Christopher Shiers Digital website preview showing dark navy background with gradient accents

Social Preview / OG Image

Shows the brand's dark navy aesthetic with the signature pink-purple-blue gradient accent.

Page Sections (Visual Descriptions)

Hero Section

Layout: Full-viewport height with looping video background (abstract flowing gradients). Semi-transparent dark overlay.

Content: Large white headline "Modern Websites for Australian Small Businesses" centered. Soft indigo subtitle below. Gradient CTA button.

Visual Feel: Immersive, modern, professional. Video creates subtle movement without distraction.

What I Do Section

Layout: 3-column grid of service cards on dark background.

Cards: Subtle glassmorphism (very low opacity), icons with gradient treatment, white headings, soft indigo body text.

Services Listed: Custom Design, Mobile-Friendly, Fast Turnaround

Portfolio Section

Layout: Grid of portfolio screenshots with hover effects.

Cards: Image thumbnails with rounded corners (12px), dark card backgrounds, client names below.

Visual Feel: Clean gallery showcasing real work examples.

Pricing Section

Layout: 3-column pricing cards, center card highlighted.

Featured Card: Full glassmorphism treatment with animated gradient border/underglow effect.

Other Cards: Subtle glass style, clear pricing ($999, $1,499, $79/mo), feature lists with checkmarks.

Process Section

Layout: Numbered steps (1-4) in a timeline-style layout.

Visual: Numbers use gradient text treatment. Clean, scannable format.

Steps: Chat → Design → Build → Launch

FAQ Section

Layout: Accordion-style expandable questions.

Visual: Clean borders, smooth expand/collapse animation, soft indigo answer text.

Contact Section

Layout: Contact form with glassmorphism card background.

Form Fields: Name, email, message. Gradient submit button.

Visual: Clean input fields with subtle borders, focus states use blue accent.

Footer

Layout: Simple centered footer on dark background.

Content: Logo mark, copyright, minimal links.

Visual: Understated, professional close to the page.

Brand Voice

Tone

Professional, friendly, and straightforward. No marketing hype or aggressive sales language. Honest about what we offer.

Target Audience

Australian small business owners — cafes, barbers, tradies, local services. People who need a web presence but don't want agency complexity.

Key Messages

"Simple", "Affordable", "No agency pricing", "Mobile-friendly", "Built fast"

Avoid

Guarantees about ROI or conversions, buzzwords like "revolutionary" or "game-changing", pushy CTAs

Services & Pricing

Simple Landing Page — $999

One-page website with contact form, mobile-friendly design. Perfect for small businesses that need a clean online presence.

Multi-Page Business Site — $1,499

Up to 5 pages with portfolio gallery, blog-ready structure. For businesses that need more detailed information architecture.

Ongoing Support — $79/month

Monthly support for minor updates, small fixes, and email support. Up to 30 minutes per month.

Contact Information