Overview
Krate is a concept website for a design and motion studio. The brief called for something bold and cinematic—a dark theme with high-contrast typography, dynamic portfolio sections, and a team showcase.
The design features an iridescent 3D hero element, accordion-style services listing, and a grid-based portfolio layout with projects like Galaxia Branding, John Mayer NYC, Nayzak Patterns, and Crave Chips.
Figma to Webflow
The Figma file was well-organized with consistent spacing tokens and clearly defined components. Key elements I translated into Webflow:
- Typography system — Bold serif headlines paired with clean sans-serif body text, implemented using fluid scaling
- Service accordions — Expandable sections with gradient thumbnail strips (Web & Mobile Design, Brand Identity, App Development, Consultancy, Packaging)
- Project cards — Two-column responsive grid with hover states
- Team section — Six-person layout with portrait photos and role labels
The responsive work was particularly interesting. The oversized hero typography needed careful breakpoint handling, and the project grid shifts from two columns to single column on mobile while maintaining visual hierarchy.
CMS structure
The site needed to be easily updatable, so I built three CMS collections:
Services — Name, description, thumbnail strip, and sort order. The accordion pulls directly from this collection.
Portfolio — Project title, featured image, category tags, and optional case study content. The “Recent Work” grid is filtered and sorted from here.
Team — Portrait, name, role, and bio. The six-up grid on the homepage pulls the first six entries, with a “See all members” link to a full team page.
Interactions
The dark aesthetic called for subtle motion:
- Service accordions with smooth height transitions
- Project cards with scale and overlay effects on hover
- Scroll-triggered fade-ins for each section
- Parallax depth on the hero 3D element
Outcome
The build demonstrates how a polished Figma design translates into a maintainable Webflow site. The CMS architecture means all content—services, projects, team members—can be updated without touching the build.