Case Study pages

Design Portfolio

Indian designer personal portfolio - 4-font system (DM Sans + thunder + editorial + playground), 17-step scale up to 288px, dark plum + pink palette, 9-keyframe marquee/cloud motion.

Developer Tool

an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.

Design Portfolio

A Melbourne solo UX designer's Framer-built portfolio in a brutalist bracket-wrapped monospace voice - black-on-white chrome punctuated by a single neon-yellow accent, dotted-grid hero, and full-bleed yellow about page.

Design Portfolio

a 3D artist's Framer portfolio that opens on a full-bleed red wall with a colossal magenta FREE FAT FONT "ALINA" wordmark, then drops the volume into clean editorial white-on-near-black case studies set in Satoshi with Times serif accents, the loud act and the quiet act in deliberate tension.

Real Estate

an architecture-led property developer reduced to its barest, most confident form, full-bleed aerial London video on near-black, a single Albertus serif word-pair ("PLACES / PEOPLE"), almost no chrome, and a quiet fade-and-rise motion that lets the buildings carry everything.

Creative Studio

a "seriously playful" brand-and-motion studio that wears its personality as type, a wonky multi-alternate ANALOGUE wordmark, emoji and icon glyphs set inline in the copy, a candy-pink accent on white, and a GSAP-driven box of tricks (mexican-wave letters, glitches, bounce, float) kept just on the right side of chaos.

Developer Tool

a warm ivory-and-slate site where editorial serif typography, a single clay accent, and unhurried 0.8s expo reveals reframe AI as a humanist research practice rather than a product to sell.

Film Production

The reference for boutique NYC production studios - full-bleed video tile mosaic on warm off-white, condensed black serif wordmark, GSAP+Lenis scroll choreography over a soft pastel palette that cycles per section.

Creative Studio

The reference for Paris startup design agencies - Youth chunky-sans display, cream parchment paper, orange ©-superscript wordplay, live Paris clock, Webflow + Lenis + Splitting.js stack.

Design Portfolio

The reference for desktop-as-portfolio metaphor - Polish multi-discipline designer's case studies presented as macOS-style application icons overlaid on a personal photograph.

Creative Studio

The reference for venture-studio portfolios that flex through monumental condensed type, a single blue I-beam cursor accent, and a venetian-blind slat hero that fragments a single image into a column-rhythmic curtain.

Data Infrastructure

The reference for B2B data-infrastructure: dark navy hero with rainbow data-flow visualization, Inter at four weights, bright Anthropic-blue CTAs over deep `#0e0f18`.

Saas Product

The reference for a 700-million-user product brand at restraint: cream "coconut" backgrounds, one saturated blue CTA, real product UI rendered enormous, and a 13-section page that never raises its voice.

Developer Tool

The reference for open-source link-attribution platform - pure black/white monochrome with Satoshi + Inter, real dashboard hero, dotted-grid integration map, 48-keyframe motion library.

Creative Studio

an award-agency site that runs on contrast, a near-black ink and soft mauve, a grotesque paired with its own mono, type that swings from 11px labels to viewport-filling 130px+ display, a custom loading cursor and horizontal marquees, with a glassy 3D aurora render as the one moment of spectacle.

Saas Product

a white-canvas product site that uses tilted Figma file-cards as the hero imagery, the bespoke variable figmaSans + figmaMono pair at non-integer weights (340, 480, 520, 540), and a 0.16s ease-out motion contract to demonstrate breadth without showing a single screenshot of the actual Figma UI.

Design Portfolio

A solo creative-technologist portfolio styled as a code editor - a "fine-thought.js" filename tab, line-number gutters, a monospace face for 95% of text, and ASCII-art "guide" glyphs forming the entire visual texture of the page.

Developer Tool

the website builder demonstrating itself - a dark, bento-led showcase built in Framer and animated by Framer Motion, where the site IS the product pitch.

Creative Studio

Award-winning creative agency "Designing Future" - Instrument Serif + Suisse Int'l Book editorial pairing, Webflow + GSAP + ScrollTrigger + Swiper stack, AI & ML capability section.

Creative Studio

Self-aware "this might be a design studio" hero on near-black with vivid red display + rainbow-bordered chrome - WordPress+Elementor post-modern creative aesthetic.

Hr Platform

The reference for friendly HR/recruiting platforms with chunky 70s-display typography - warm cream + brown text + saturated CTA, real product UI in hero, pink customer-love mode-flip.

Creative Studio

a black-canvas, Monument-Grotesk agency site that turns brutalist restraint into confidence, sharp corners, one type family, vast empty space, then detonates a few hot-pink and acid-green colour blocks and lets Lenis-smooth scroll reveal the work.

Agency Home

the home brand - Jiffi's own site, a punchy "chaos to clarity" tech-agency story told through GSAP-driven scroll motion, the Simula + Satoshi type system and the navy/blue/yellow palette.

Creative Studio

The reference for global brand-agency studios - yellow logomark on near-black, four custom typefaces, live UTC clock chrome, split-screen sticky-text case study reveals.

Trades

a bespoke-joinery house that sells craft as heritage, warm sepia interiors and meadow photography under a high-contrast transitional serif, the brand reduced to a single fine line-drawn ring, with quiet WordPress structure and almost no visible motion furniture.

Hr Platform

The reference for HR/People platforms with rainbow-gradient personality - deep teal text on cream, pastel feature cards, multi-coloured wave logo, Matter at fractional rem-math sizes.

Creative Studio

a gallery-minimal brand-studio portfolio where a near-white canvas, one large black-and-white image and a tiny "Explore ↓" are the entire first screen, image carries everything, type whispers, and a single classic link-blue is the only colour.

Creative Studio

French multidisciplinary studio that uses a totally achromatic black-on-white chrome and lets 3D render film carry every drop of colour, with cinematic 0.45s easeOutExpo transitions and a small cat-head logomark floating in a dark pill nav.

Creative Studio

The reference for international boutique studios - bold red background, royal-blue L'Étude wordmark overlaid on photography, SvelteKit + Sanity + Lenis stack, draw-in logomark animations.

Developer Tool

the restraint benchmark - a dark, near-monochrome product site where one indigo accent, crisp 0.16s motion and an animated dot-grid do all the work, and nothing is wasted.

Design Portfolio

Sergey Lisovskiy's personal designer site - floppy-disk hero illustration + intentionally scrambled-letter headlines + single 43.2px Apfel Grotezk + SvelteKit.

Saas Product

a post-Atlassian-acquisition SaaS site (now branded "Atlassian Loom") built in Next.js, set in Atlassian's Charlie Text + Charlie Display, anchored by a single Atlassian-blue `#1868db` CTA and a hero video thumbnail that doubles as the product demo - the canonical reference for "absorbed-by-enterprise SaaS that still feels like itself."

Marketing Platform

The reference for editorial-serif email platform - cream + black + classic article underlines, Framer page builder, AI agent sub-product positioning.

Other

A 100+ year, employee-owned national commercial builder that projects quiet authority at scale - full-bleed video and aerial photography of real megaprojects, oversized condensed type ("SUPERIOR RESULTS", "WE CAN BUILD IT"), a single bold red accent, and clip-path scroll reveals that feel cinematic but never showy.

Fintech

a banking site that turns scale and aspiration into the brand - bespoke variable Arcadia/ArcadiaDisplay typography at intermediate weights (420/480), a glass-blur dark nav over a 1952px-wide light page, atmospheric mountain/space photography, and one electric-indigo CTA in a sea of refined neutrals.

Saas Product

The reference for QuickBooks-niche B2B CRM - clean deep-navy + royal-blue conservative B2B design with yellow-underline accent and customer-photo-driven testimonials.

Film Production

a VFX studio reel built as one giant black canvas where Mux-streamed clips hang in space, tiny 14px labels float at the edges, and a thumbnail filmstrip pinned across the bottom lets you scrub the whole body of work like a video timeline.

Marketing Platform

The reference for AI-documentation platform - cloud-gradient sky hero, mint-green CTA, modern lab()/oklab() colour science, real docs mockup with AI assistant chat.

Creative Studio

The reference for warm-neutral boutique UX/UI studios - handwritten signature mark, cream-and-stone palette, restrained editorial type, horizontal-scroll-pinned case study reveal on an otherwise calm vertical page.

Film Production

Los Angeles commercial production company portfolio - cream `#fcfaf5` light theme over pure black dark theme, ATF Alternate Gothic Condensed + Fixture grotesque, header-fixed live LA clock, narrow centred 9-tile project grid, and a `mix-blend-mode: difference` H1 that inverts as it crosses the hero image.

Type Foundry

a type-foundry-and-design-studio site whose signature is a "Type-Toggle", the entire page can be re-rendered in any typeface from their own collection, wrapped around a tight, gridded flat-lay portfolio in black, white and one electric yellow.

Creative Studio

a digital-experience studio that builds its homepage like one of its products, a fixed, gridded "operating system" screen on an off-white grain canvas, where an iridescent 3D ODC logo, a big Roobert headline, a single yellow block and live Mux video tiles sit inside hairline-ruled frames and move with spring physics.

Creative Studio

A Framer-built creative studio site where Inktrap display type, monochrome pure-black canvas, and large geometric SVG portals (tracks, wells, vortexes) carry the entire brand: a "creative gateway" rendered as actual gateways on every scroll.

Film Production

a film and commercials production studio that runs a single enormous "POSTER" wordmark in Monument Extended across the top, a full-bleed showreel still behind it, and a dense ticker of project credits set in Azeret Mono along the bottom, with default-blue (#0000EE) links breaking the monochrome.

Creative Studio

The reference for serif-display motion-creative agency sites - cream `#F9F8EE` paper, serif/grotesk hybrid wordmark, sticker-style organic shapes, and a fixed top chrome that morphs the brand tagline letterforms.

Film Production

A Southern African film production studio site that pits a bespoke shattered-slab display logomark against full-bleed film stills and a heavy WebGL/GSAP/Lenis motion stack to make the homepage feel like a 60-second commercial reel rather than a marketing page.

Real Estate

a real estate brokerage platform that reads like a confident B2B SaaS site: Poppins throughout, a plum-grey ink (#373342) with a plum-pink primary (#CE87C1) and a rust-red highlight, documentary agent photography and big "Own Your Future" display type.

Film Production

The reference for boutique film-production studios - cream-on-black cinematic intro, three-typeface display system (heavy condensed display + romantic serif + neutral sans), and a Three.js / lil-gui WebGL canvas wrapped in a tutorial-led intro experience.

Saas Product

a post-Salesforce-acquisition product flagship where the iconic aubergine `#611f69` survives as the primary CTA, Salesforce-Sans replaces Lato, and a 30-keyframe motion library powers the "workspace-people-bump" avatar animations that have always been Slack's brand signature.

Creative Studio

The reference for Swedish performance-marketing agencies that lead with creative rather than media-buying - pure-black canvas, oversized SOSCALE wordmark hero, lavender pill CTA, and a Webflow + GSAP + Lenis motion stack borrowed wholesale from the global studio scene.

Creative Studio

The reference for Quebec creative studios with Swedish-umlaut wordmark - cream paper + chili-orange accent + 150px hero + 40-section density + Framer Motion + Lenis stack.

Fintech

the clarity benchmark - extreme product complexity made to feel calm, premium and effortless through a fully tokenised design system and restrained, confident CSS motion.

Creative Studio

Pure-black editorial portfolio for a culture-shaping design studio, anchored by an uppercase serif display headline, four-pole nav chrome with a diacritic-stroke logomark, and a 2x2 grid of category-tagged case study tiles separated by hairline white rules.

Design Portfolio

A Vietnamese solo-designer portfolio that leans hot magenta and ultra-bold display caps against near-black, then lets a Framer-driven motion stack push huge type, pinwheel graphics, and chromatic-aberration footer effects across a 21,000px scroll.

Creative Studio

The reference for Sydney creative-agency portfolios - near-black canvas, single-headline hero with a tiny "Scroll to explore" indicator, then a tile-grid case study reel and a chromatic-aberration ROIdeas display moment.

Design Portfolio

Anton Tvinenko's designer portfolio - Readymag + Three.js + Win98 loader nostalgia, Druk Condensed + Japanese system font, retro-web aesthetic.

Editorial Publishing

The reference for editorial design publications - centred italic-serif wordmark, light-grey paper background, mixed Times-serif body + Bauhaus-sans chrome, content-density home grid.

Creative Studio

The reference for "anti-advertising" agency sites that weaponise chaos - zodiac-named nav, draggable physics-pill bubbles, colour-blocked viewport sections, and four foundry display faces stacked into a deliberately overstuffed, irreverent identity.

Creative Studio

A bicoastal independent creative house (LA + Montréal) whose site is built around one monumentally oversized custom display face (TuxPlaza at ~223px), a chrome-grey blurred-pill top nav, and full-bleed cinematic Vimeo case study reels - motion-heavy creative portfolio at indie-craft tier.

Creative Studio

The reference for boutique hospitality-PR agencies - warm off-white canvas with deep navy ink, oversized American Grotesk Compressed display headlines, polaroid-style photo collage hero, and a soft Lenis-smoothed editorial rhythm.

Saas Product

The reference for a butter-cream voice-AI brand at peak typographic confidence - EB Garamond serif hero on lavender-and-evergreen surfaces, with curved-path transcript animations as the signature motion.

Film Production

Comedy film production company portfolio - cream paper + slate-blue near-black + red accent, GSAP+ScrollTrigger, 270px hero, "noise" film-grain keyframe.

Film Production

a playful production company built entirely in olive-and-lemon, where a spinning sliced-lemon preloader, a winking eye logo and a thumbs-up cookie notice set a deliberately silly tone over a tight monospace-plus-serif type system, animated wall-to-wall with GSAP and ScrollTrigger.

Other

A San Francisco civil/heavy construction contractor that wins federal, state and municipal trust by showing the hard jobs it has handled - a green-and-gold canvas over Golden Gate / Bay infrastructure photography, a "Challenges We've Overcome" checklist, a public-works project grid and a Caltrans engineer's testimonial.

Creative Studio

a Melbourne and Sydney creative agency that runs warm off-white pages on an eight-column grid, sets everything in the Greed grotesque from 22px body up to a 250px hero, anchors the work in oversized numbered category headers ("Science & Innovation", tagged 20) and floats a blurred pill nav while a custom cursor and a soft 3D blob carry the personality.