Extended Edition
A comprehensive collection of modular components for Marion Design Co.'s Squarespace website. Built to support case studies across all project types.
Colors
Typography
Gotham Bold — Headlines
Archer Medium Italic — Accents
Web Design Case Study Components
8 components optimized for presenting website projects
Global CSS
CSS variables, typography, and animation utilities. Install first!
Hero Section
Full-screen cinematic dark hero with animated entrance
Process Accordion
Expandable project phases with smooth animations
Visual Sitemap
Interactive page structure visualization
Before/After Slider
Draggable comparison slider
Device Mockups
Desktop and mobile browser frames
Testimonial
Client quote block (reusable)
Related Projects
Grid of other work (reusable)
Product Design Case Study Components
6 components for showcasing physical product design
Product Hero
Light background with floating product image
Design Timeline
Vertical process timeline with stages
Photo Grid
Product detail photography grid
Lifestyle + Video
Image and video combination layout
Specifications
Technical stats and dimensions grid
360° Viewer
Draggable product rotation viewer
Multi-Purpose Page Rows
11 modular components for any page type
Video Hero Fullwidth
Autoplay background video with controls
Interior Carousel
Gallery + accordion for interior projects
Design Thinking Case
All-in-one workshop documentation layout
Team Grid
Team photos with expandable bios
Community Events
Variable-size event cards
Brand Identity
Logo, colors, typography display
Store Interactive
Product hotspots and grid
Utility Components
Dividers, CTAs, back-to-top
Video Gallery
Video showcase with back/next navigation
Services Grid
Expandable capability cards
Horizontal Scroll
Swipeable project cards
Photography & Video Components
3 specialized components for media showcase
Photo/Video Toggle
Tab-based media gallery with switching
Headshots Marquee
Bi-directional auto-scrolling portraits
Event Photography
Expandable event gallery cards
Universal Building Blocks
2 core reusable components
Client Logo Marquee
Auto-scrolling logo strip with hover effects
Filterable Work Grid
Portfolio grid with category filtering