Home Addason Digital Pricing Get Your Audit
Personal assistant Client pitch (60 seconds) Detailed pitch (the long version) See an example Common questions
System About me How I score sites Case studies Client guide
The UI toolbox · 15 live demos · font pairings · color palettes · Claude skills · 20 theme packs

The interactions
that make sites feel premium.

Every Addason Digital build has access to the full toolkit below. Drop-in Awwwards-tier motion, extracted design systems from any URL in ~7 seconds, and 20 curated theme packs. Hover, click, scroll — everything on this page is live.

Interactions · everything below is live

15 ways to make
your site feel premium.

Each card below is a working demo. Hover, click, or just watch — they ship with every build.

Magnetic Button
Button tracks cursor within range. Subtle micro-interaction, premium feel.
Split-Text Reveal
Words drift in one by one. Editorial entrance. Failsafe included.
0Reviews
0Venues
0Stars
Stat Counter
Numbers count up on scroll-in. Fires once, easeOutExpo timing.
Image Zoom on Hover
Gallery images scale 1.12× with spring easing. Used everywhere.
Click anywhere
Click Ripple
Material-style ripple from click point. Pure CSS, no lib.
Premium
Cards respond to cursor position with a 3D tilt. Subtle depth that rewards attention.
Wedding · $4,000+
3D Tilt Cards
rotateX/Y based on cursor. GPU-accelerated, 60fps.
Typewriter
Live-typed text with blinking cursor. Great for hero callouts.
Santa Fe·Albuquerque·Taos·Ghost Ranch·Bishop's Lodge·Santa Fe·Albuquerque·Taos·Ghost Ranch·Bishop's Lodge·
Infinite Marquee
Seamless scrolling ticker. Perfect for venue lists, client logos.
Next page
Page-Transition Curtain
Orange curtain sweeps on internal navigation. Cinematic.
Limited spots · 2026
Shimmer Highlight
Subtle sheen draws the eye without being loud.
Gradient Mesh Background
Soft multi-point gradient that slowly shifts hue. Zero JS.
SITE
Orbiting Particles
SVG-free orbital animation. Use for loading states or hero accents.
Cinematic
Film Texture
Film Grain Texture
CSS noise overlay animates frame-by-frame. Elevates flat backgrounds to cinematic.
Stagger Entrance
Grid items cascade in on scroll. Hover the card to replay the sequence.
ADDASON
Click to scramble
Text Scramble
Characters randomize then resolve to final text. Great for hero labels and names.
Design fundamentals · what the eye trusts

Three laws every
premium site follows.

Most DIY sites break all three. We wire them in from day one.

01
Spatial Rhythm
Base-8 grid · all spacing is a multiple of 8px

Every element sits on a base-8 grid. Padding, gap, margin, icon size — all multiples of 8px. When spacing is consistent, the design feels intentional. When it's not, something feels off but nobody can say why.

02
Type Scale
Display
Agency
64px
2XL
Agency
48px
XL ←
Agency
32px
LG
Agency
24px
Base
Body copy goes here
16px
SM
Caption · Label
12px
Major third ratio · 1.25× between each step

A modular scale (Major Third: 1.25×, or Perfect Fourth: 1.333×) between every size step. No arbitrary 17px or 23px — just a mathematical ratio that creates visual harmony. Five named sizes: sm, base, lg, xl, display.

03
Color Hierarchy
Neutral surface
90%
Accent · brand color
8%
Action · CTA only
2%
90 · 8 · 2 rule · one action color per page

Three roles: Neutral (90% of surface), Accent (branded color, used sparingly for emphasis), Action (CTA only — one per page). Violating this is the single biggest reason DIY sites look cheap even with good photos.

Typography · via @UiSavior · font pairings that hit different

Five pairings
worth remembering.

Each card is a live demo. The name at the bottom is the real font — demos use the closest Google Fonts alternative where the original is paid.

Inter
Tempting
Inter + Tempting
Inter + Tempting
Clean geometric sans anchors the script. Confidence meets elegance. Demo uses Space Grotesk + Dancing Script.
open sauce
peace
sans
Open Sauce + Peace Sans
Open Sauce + Peace Sans
Both rounded. Both bold. Pure impact on saturated backgrounds. Demo uses Nunito.
proxima nova
SAILORS
Proxima Nova + Sailors
Proxima Nova + Sailors
Clean grotesque body, heavy condensed display. Sports editorial energy. Demo uses Space Grotesk + Oswald.
avant garde
Classics
Avant Garde + Playfair
Avant Garde + Editorial Serif
Geometric rounded meets classical italic. Sophisticated tension. Demo uses Nunito + Playfair Display.
DM Sans
Cormorant
DM Sans + Cormorant Garamond
DM Sans + Cormorant Garamond
This site's house pair. Utility sans guides the eye; italic serif delivers the feeling. Both free on Google Fonts.
Color theory · via @UiSavior · these colors just got married

Two pairs.
Instant vibe.

Exact hex values. Drop either pair into a project and the contrast, warmth, and energy are already dialed in.

Frosted
Yes
#F7F7FF
247 247 255
Midnight
Vow
#27187D
39 24 125
Near-white lavender + deep indigo
Pair #1
Hot
Crush
#FFCEEB
255 206 235
Love On
Fire
#FF6634
255 102 52
Bubblegum pink + vivid orange-red
Pair #2
AI workflow · via @UiSavior · Claude skills for designers

Claude as your
design co-pilot.

Six ways to use Claude that go beyond writing copy. These turn the model into a technical design partner — not just a chatbot.

01
Front-end Design
Plan layout, components, and user flow before writing a line of code. Think like a designer first.
Front-end Design
Prompt Claude to wireframe a component architecture before touching CSS. Faster builds, fewer revisions.
02
Design Tokens
Generate a full CSS variable system from a brand color. Claude produces the scale, contrast pairs, and semantic names.
Design Tokens
Feed Claude your hex codes and ask for a complete design token system — spacing, color roles, type scale — as CSS variables.
03
Accessibility Audit
Paste your CSS. Ask Claude to flag contrast failures, missing ARIA, and keyboard traps against WCAG 2.2 AA.
Accessibility Audit
Claude checks your markup for contrast ratios, semantic HTML, focus order, and screen reader compatibility — in seconds.
04
Microcopy
Button labels, empty states, error messages. Claude matches your brand voice and writes every string in one pass.
Microcopy at Scale
Give Claude your tone guide and component list. It returns every UI string — CTAs, tooltips, validation — in your voice.
05
Responsive Logic
Describe a layout. Claude writes the breakpoints, fluid clamp() values, and grid variants for every viewport.
Responsive Logic
Claude generates the full responsive CSS for a component — mobile-first, fluid typography, container queries — from a plain-English brief.
06
Animation Brief
Describe the feeling you want. Claude translates it into easing curves, duration, and keyframe code — no guessing.
Animation Briefs
"Feels like a curtain falling" → Claude writes the transition: cubic-bezier, duration, transform. Intent-to-code in one prompt.
Live extraction · designlang · ~7 seconds

Extract any site's
design system.

Paste a URL. We run Chromium against it and return colors, fonts, spacing, shadows, components — 9 output files. Score is out of 100 based on 5 categories: palette discipline (25), type scale (25), typography (20), WCAG contrast (20), spacing rhythm (10).

CLI: node scripts/extract-design.mjs --url=...
20 theme packs · one-click apply

Pick a direction.
We'll build from it.

Each pack includes a full color system, typography pairing, and component styling. During onboarding we pick one (or combine two) and use it as the base for your remaster.

Full gallery with live HTML previews →
Editorial vocabulary · the names of the parts

Eyebrow, lede,
CTA, and friends.

Clients and editors all use the same language. Each term in your editor sidebar maps 1:1 to a real piece of your page — here's what each one is.

FORBES-FEATURED HYPNOTHERAPIST
Transform Your Mind.
Eyebrow
Small letter-spaced label above a headline. Sets context.
EYEBROW
Where Science
Meets the Sacred
Headline
The largest title in a section. Usually an h1 or h2.
Transform Your Life.
A practice rooted in lineage, refined by science.
Subtitle
Supporting line directly under a headline.
Clinical hypnotherapy, shamanic healing, and energy work.
Tagline
A short brand line — sits with the logo or near the hero.
Marina Pirkle is a clinical hypnotherapist and shamanic healer specializing in subconscious transformation, nervous system recalibration, and energetic healing.
Body
A paragraph of regular copy. The main reading text.
Modern Mind Alchemy was born from lived experience.
Lede
The opening line of a long-form bio. Sets the tone.
CTA Button
A clickable button — the action you want the reader to take.
/contact/
CTA Link
The URL the CTA Button points to.
Photographed by Casey Addason
Caption
Small text under a photo or video. Often italic, low contrast.
Deep Dive Healing
Pill / Badge
Small rounded label inside a card — category, status, or tag.
"Two sessions with Marina shifted something I'd been carrying for a decade."
— Sarah K., Austin TX
Quote
A testimonial — what a client said about working with you.
Glyph / Symbol
A single decorative character — often inside a card.
Visible
Hidden
Visibility toggle
Click-to-flip switch in your editor. Green = on. Red = off.
Modern Mind
Theme pack
Pre-configured combo of color + font + interaction.
Curated tools · what the best designers actually use

The designer's
starting kit.

Every tool below is free or freemium. These are the ones that actually move the needle on visual quality — not just noise.