V17 Baseline Source

Design System.

The centralized visual styleguide and structural component library for AutoSwitch, directly extracted from the V17 prototype aesthetics.

Brand Identity

Core Brandmarks and Logotypes

White Logo Primary Contrast Lockup
Black Logo Dark Lockup

Color Palette

Core Brand Tokens

Brand Blue HEX #2563eb bg-brand-blue
Brand Navy HEX #0f172a bg-brand-navy
Brand Electric HEX #00ffaa bg-brand-electric
Green
100 & 600
Aa
Gray Typography
400 & 500
Slate UI Elements
50 / 200 / 400
Background Sky
sky-100

Typography Scale

Inter Sans-Serif — Aggressive tracking and tight line-heights for a premium feel

Display Header (H1) / tracking-tight / leading-[1.05]
Switch Once.
Save Forever.

Section Header (H2) / tracking-tight / font-medium
Let's find your savings.

Sub-header (H3) / tracking-tight / font-bold
Enter Your Details

Hero Text (p) / text-white / data-[text=white]

We manage all your bills and AutoSwitch you to the cheapest provider every year, 100% free.


Standard Text (p) / text-gray-500 / leading-relaxed

Input your details and let our engine instantly uncover exactly how much you're overpaying.


Micro-Label / uppercase / tracking-[0.2em]

Start saving today

Interaction & Actions

Hover states, high-blur dropshadows, and pill geometry

Primary Hero CTA (Black)

Action Form CTA (Brand Blue)

In-Line Text Link

Iconography Toggles (Mobile nav & Close)

Navigation System Physics

Mapping the UI transformations from transparent hero, to scrolled opaque, to mobile sliding drawers.

State 1: Y = 0 (Transparent Base)
Logo AutoSwitch
Sign up
State 2: Y > 50 (Scrolled Header)
Logo AutoSwitch
Sign up
State 3: Mobile Slide Drawer
Calculate Savings How it Works Pricing

Start saving today

Create Free Account

UI Form Architecture

Text inputs and complex grid-radio architectures for data ingestion

Text Input Logic

Provider Radio Grid

LOGO
Unselected Base
Checked State

Containers & Badges

Bento-box constraints, extreme border-radius logic, and notification pills

White Base Container Outer Chassis: rounded-[2.5rem] / shadow-[0_20px_40px_-15px_...]
Verified Tick Pill
2
List Step Node
Electric Pulse

Marketing Components

Testimonial cards and ordered numerical steps

Testimonial Component

User portrait

"Saved €650 a year while I traveled, and I didn't need to do anything."

- Sarah (Wexford)

Ordered Process List

3

Never Overpay
Again

You're done. We'll continuously monitor the grid and automatically switch you.

Brand Imagery

Deep etched talent layering stacked over ambient environmental backgrounds

Ambient Environment

Sky background environment

Foreground Deep Etch Layer

Deep etched foreground

Footer & Complex Vectors

Dark mode glowing backdrops, app store buttons, and CSS-rotated UI illustrations

Get Started.

🎉
AutoSwitched!
Another €280 saved
© 2026 AutoSwitch Ireland Ltd.
Terms Privacy