Style Guide

ARW — Ainsley Rivers Waller

Color Palette

Tiffany

#7DD8D0

Primary accent, backgrounds, cursor, typewriter text

Tiffany Light

#9AE4DD

Hover states

Dark Olive

#2F2913

Text on tiffany backgrounds, preloader logo

Off Black

#0A0A0A

Body background, primary dark

Charcoal

#1A1A1A

Footer background, dark surfaces

White

#FFFFFF

Primary text on dark, headings

Warm Gray

#888888

Muted text, secondary info

Typography

Playfair Display — Serif / Headings

Aa Bb Cc Dd Ee

Ff Gg Hh Ii Jj Kk

The quick brown fox jumps over the lazy dog.

Inter Tight — Sans / Body & UI

Aa Bb Cc Dd Ee

Ff Gg Hh Ii Jj Kk Ll Mm Nn

The quick brown fox jumps over the lazy dog. 0123456789

Type Scale

text-xs0.75rem / 12pxBadges, labels, small meta
text-sm0.875rem / 14pxBody small, captions
text-base1rem / 16pxBody default
text-lg1.125rem / 18pxBody large
text-xl1.25rem / 20pxSub-headings
text-2xl1.5rem / 24pxSection headings (mobile)
text-3xl1.875rem / 30pxLarge headings (mobile)
text-4xl2.25rem / 36pxHero headings (mobile), CTA
text-5xl3rem / 48pxCTA (tablet)
text-6xl3.75rem / 60pxCTA (desktop)
text-7xl4.5rem / 72pxLarge CTA (desktop)
Hero h13rem / 4.5rem / 7remMobile / Tablet / Desktop hero heading

Text on Tiffany

All copy on tiffany backgrounds uses Dark Olive (#2F2913) for maximum contrast and warmth.

Secondary text at 60% opacity

Hover for underline.

Spacing

Page Padding

px-6 — Mobile horizontal (24px)

md:px-10 — Desktop horizontal (40px)

py-20 — Mobile vertical (80px)

md:py-28 — Desktop vertical (112px)

Content Width

max-w-7xl — Primary container (1280px)

max-w-2xl — Text blocks (672px)

max-w-6xl — Style guide (1152px)

Components

Buttons & Links

Get In TouchinText Link

Typewriter Cursor

Sample text

Portfolio Card

720 × 450 ratio

Project Title

Category

Animations

Preloader Sequence

  1. Tiffany screen with ARW logo (fade in 0.6s)
  2. Box draws around logo (1.2s)
  3. “Creative Director” text fades in (0.8s)
  4. Hold, then wipe up to reveal video

Hero Build-in

  1. Cursor appears, types “I’m an award-winning”
  2. Types “creative director”
  3. Types first tiffany phrase
  4. Selection sweep + delete, cycles phrases

Scroll Reveal

Elements fade up 40px with 0.9s ease

Trigger: 40% of element visible

Links stagger 0.2s after preceding content

Easing Curves

cubic-bezier(0.16, 1, 0.3, 1)

Primary ease-out for reveals and transitions

cubic-bezier(0.25, 1, 0.5, 1)

Logo slide and element transitions

Breakpoints

Base< 768pxMobile-first default
md≥ 768pxTablet — 2-col grid, larger type
lg≥ 1024pxDesktop — max type sizes, full layout

Layout Rules

Hero

  • Full viewport height, sticky positioning
  • Content scrolls over the hero
  • Video background with 50% black overlay
  • Text positioned with ml-5 from left

Tiffany Section

  • Text left edge at 50vw (viewport center)
  • Decorative line 174px left of text
  • Dark olive (#2F2913) for all text

Portfolio Grid

  • 1-col mobile, 2-col desktop
  • 720:450 aspect ratio per card
  • Title + category below image
  • 4.75rem vertical spacing between items

Z-Index Stack

  • z-100 — Preloader
  • z-50 — Header (fixed nav)
  • z-20 — Content sections
  • z-10 — Hero text layer