This site runs on its own small design system.
Tokens, a type ramp, and a handful of patterns, documented here as living examples rendered by the same stylesheet that renders every page.
Brand
Christina Dobi
wordmark · bold 26px in $color-brand · anchors the header on every pageThe biggest brand moment is the homepage hero: full-screen video under a 70% $color-brand overlay, with the white monogram and wordmark reversed out.
Color
Each featured project carries one accent, threaded through its tiles, cards, and featured sections.
Type
Heading one
h1 · Source Sans Pro · normal · 2.441em / 3.052emHeading two carries the statements
h2 · bold · 1.953em / 2.441em · used with .subhead for page openersHeading three for article sections
h3 · normal · 1.563em / 1.953emHeading four titles cards and list items
h4 · normal · 1.25em / 1.333emSection headline
h4.headline · uppercase with eyebrow tracking · labels a homepage or style-guide sectionThe subhead is the standfirst under a statement.
.subhead · weight 100 · 24pxEyebrow label
eyebrow pattern · 13px bold caps · 0.12em tracking · accent colorBody copy is Source Sans Pro light at 18px ($type-body-size) with 1.6 line height, in $color-body gray. Links pick up the brand blue, and emphasis uses the navy text color.
p · weight 200 · 18px / 1.6 · $type-body-sizeSpacing
Landing sections breathe at $space-lg, opening to $space-xl on wider screens (section-rhythm mixin).
Layout
Pages sit on a 12-column grid. Long-form content lives in a centered 9-column reading measure; back links and headers align to the container edge. Sections alternate between three full-bleed bands:
Patterns
Accent card
accent-card mixin · white surface, 4px accent top border, $shadow-cardEngineering
Building robust, maintainable products from the ground up.
Product Innovation
Turning ideas and opportunities into products.
Featured work section
title + chip, intro, sub-items over rounded media panels tinted with the project accent (10% mix)Zebbly Live Product
Wishlists with context
Lists carry sizes, interests, and notes.
Back link
eyebrow style in $color-brand · nudges left on hover · tops every detail page, aligned to the container edgeHighlight band
.container-highlight · full-bleed $color-brand band with inverted textSay Hello
Full-width brand moments: the contact band, the Instagram section.
Links
A default link is quiet $color-body gray, lightening on hover.
a · $color-body · hover #b5b5b5 · no underlines anywhereA brand link opts into $color-brand with class .brand.
a.brand · $color-brand .ed-more-link · bold, with a trailing arrow · section footersMotion
Content enters with a fade.
.fadeInUp / .fadeIn · 1s ease, 0.2s delay · statements and page openers onlyEverything interactive answers in 0.15s ease: cards lift their shadow, tiles reveal their accent bar, the back link nudges left, the CTA deepens. Motion confirms, it never decorates.
Imagery
Portfolio tiles are 4:3 (1600×1200) screenshots or product art. Work pages show full-width screenshots on $color-band-light bands, up to 1000px wide. Featured panels crop tall screenshots at a 16px-radius edge, top-aligned, over a 10% accent tint. Photos get an 8px radius.
Voice
Sentence case everywhere, including headlines; only section labels are uppercase. Statements are short, first-person claims: "I build thoughtful products that make complex things feel simple." Never an em dash; reach for a comma, a colon, or a middot. Middots separate inline lists: Product · Frontend · UX. Plain words over jargon.
The system lives in _sass/tokens.scss and _sass/patterns.scss.