Syncro
Syncro
DESIGN SYSTEMS
School Board Toolkit
School Board Toolkit
CIVIC DESIGN
BlueVoice Admin
BlueVoice Admin
BLUEVOICE ADMIN

Patterns

Recurring layout solutions and compositional templates — the structural decisions that keep every page coherent.

Page Layout

Each page type uses a consistent max-width and padding system.

PAGELAYOUTMAX-WIDTH
HomeHero full-bleed, work section 2-col grid, footer1440PX
Design SystemFixed sidebar 260px + scrollable content1440PX
Work2-col card grid, blur reveal on scroll1440PX
About2-col photo + bio layout1440PX
RésuméSingle column document layout896PX

Hero Patterns

The homepage hero establishes the visual language for the entire portfolio.

Compositional Decisions
01Full viewport height, content centered on both axes
02CursorOrb behind content at z-index 0
03DotGrid as full-bleed background
04Animated SVG oval around name, pathLength 0 → 1
05Bottom row: available pill left, location center-left, see work pill right
06Blur entrance stagger: 100ms between each element

Card Patterns

Work cards follow a consistent structure across homepage and work page.

Card Anatomy

01Cover image280px height, object-fit cover, overflow hidden
02Category tag + yearCategory pill left, year right, JetBrains Mono 11px
03TitleGambarino 24px, color var(--color-text)
04DescriptionSwitzer 14px, color var(--color-text-muted), lineHeight 1.6

Hover State

CardtranslateY(-4px)
Imagescale(1.04)

IMAGE HEIGHT

280PX

TITLE

GAMBARINO 24PX

HOVER

TRANSLATEY(-4PX)

TRANSITION

300MS

Case Study Pages

Article-style layout with hero, scroll-reveal sections, and consistent content width.

Content Width
Text content896PX
Full-width images1440PX
Components
SECTIONSUBSECTIONTEXTLISTCALLOUTQUOTEIMAGEVIDEO