Pixel - Brutalist Designer Landing Page Template

Quick summary

Pixel is a one-page portfolio landing page for user interface and user experience designers. It uses a Bold Brutalist visual theme, an Obsidian and Gold color system, and a masonry gallery layout to create an experience that feels more like a curated exhibition than a standard portfolio page. The scroll-jacked header, staggered tile loading, and persistent call-to-action make every visit feel earned.

Who this template is for

This template is built for working designers who need their portfolio to do serious persuasive work. It speaks directly to the visitors who matter most and gives them a reason to stop scrolling.

• User interface and user experience designers building a one-page portfolio to attract recruiters, founders, and creative directors
• Freelance designers who want a high-impact landing page without a multi-page site structure
• Mid-to-senior level designers whose work speaks for itself and needs a frame worthy of it

What problem this template solves

Most designer portfolios look the same. Grid of thumbnails, a bio paragraph, a contact form. They are forgettable by design. Pixel solves the problem of blending in when standing out is the only outcome that matters.

• Visitors leave portfolios quickly when nothing surprises them early; the scroll-jacked header locks attention before the gallery even loads
• Recruiters who have reviewed hundreds of portfolios need a reason to pause; staggered tile loading and gold hover states create visual momentum that rewards scrolling
• Designers struggle to segment interest from inbound leads; the modal captures first name, email, and intent in a single lightweight interaction

What you get with this template

Pixel delivers a complete one-page portfolio layout with every major section, interaction pattern, and content structure already in place. You bring the work; the template provides the stage.

• A scroll-jacked hero header where the designer's name renders in enormous ultra-bold grotesque type and project screenshots bleed through the letterforms on scroll
• A masonry project gallery with staggered tile loading, gold hover borders, and single-sentence context labels on each tile
• A persistent floating call-to-action button, a lead-capture modal with a three-option radio field, and a footer booking link for a portfolio walkthrough

Feature list

This template is built around deliberate design decisions, not decorative ones. Each feature below maps directly to something a visitor will see, feel, or respond to.

Scroll-Jacked Name Header

The viewport locks on entry and the designer's name fills the screen in ultra-bold grotesque type at roughly 400 pixels tall. As the visitor scrolls, project screenshots bleed through the letterforms like windows into the work. The lock holds for three full scroll-lengths before releasing into the gallery below.

Masonry Project Gallery

Tiles are arranged in a masonry grid that mimics a physical exhibition walk. Some tiles are tall and narrow like posters; others are wide and cinematic. Early work sits packed tight while recent work breathes with generous whitespace, implying growth without stating it.

Gold Hover Interaction System

Gold never appears at rest in this template. It activates only on hover, on active links, and on the designer's name. Hovering a project tile triggers a gold border and reveals a single sentence of project context, rewarding the visitor for engaging rather than just scanning.

Brutalist Full-Width Dividers

Between project clusters, full-width dividers display a single metric or quote in monospaced type. These text breaks punctuate the gallery like wall labels in a museum, reinforcing credibility with hard numbers and direct attribution.

Persistent Floating Call-to-Action

A "Download My Case Study Kit" button in gold on obsidian is pinned to the bottom-right corner. It only appears after the visitor has scrolled past the third project row, ensuring the ask arrives after the evidence rather than before it.

Segmented Lead-Capture Modal

Clicking the floating button opens a minimal modal with three fields: first name, email, and a single radio selector with the options "Hiring," "Collaborating," or "Just Browsing." This lets the designer segment follow-up communication by intent from the first interaction.

Page sections overview

Design & branding system

The visual identity is built on restraint and contrast. Every color has a specific role, and nothing decorative is added without purpose.

• The four-color palette uses deep volcanic black (#0B0B0F) for the background, exposed concrete gray (#3A3A3C) for card surfaces and dividers, molten gold (#D4A843) exclusively for hover states, active links, and the designer's name, and chalk white (#E8E6E1) for body text
• Typography uses an ultra-bold grotesque typeface for display headings and monospaced type for divider callouts and metric blocks, reinforcing the raw industrial character of the brutalist theme
• Gold is a reward, not decoration; it appears only when the visitor engages with an element, creating a consistent interaction language across the entire page

Mobile & speed optimization

The template is designed to translate its bold visual language across screen sizes without losing its structure or impact.

• The masonry grid adapts to narrower viewports so tiles remain readable and properly spaced on smaller screens
• The scroll-jacked header behavior and floating call-to-action button are structured to work within a single-column mobile layout without losing their functional purpose

How this template helps you convert

Pixel is structured around a deliberate sequence: show the work first, earn trust through evidence, then make the ask. Every layout decision reinforces that order.

1. The scroll-jacked header creates an immediate first impression that is difficult to leave quickly, buying time for the gallery to load and engage the visitor
2. The floating call-to-action button appears only after the visitor has seen at least three rows of project work, so the request for contact details is backed by visible proof
3. The footer booking link offers a lower-commitment path for visitors who are interested but not yet ready to share their email, capturing a second conversion point without pressure

Other information about this template

Pixel is a fully self-contained one-page portfolio landing page. It is well suited for designers who want a single URL to share with recruiters, post on job applications, or include in a professional bio.

• The template ships with placeholder project tiles, sample metric dividers, and a pre-structured modal so you can replace content without rebuilding layout logic
• The footer calendly-style booking section is framed as a portfolio walkthrough invitation, which reduces the perceived friction of a direct sales or outreach call
• The Bold Brutalist theme makes Pixel a strong fit for designers working in product, brand, or digital experience disciplines where a distinctive visual voice is itself a credential
• This template is built as a standalone landing page and does not require a multi-page site structure to function effectively

Show more