Drafted - Polished Graduate Landing Page Template

Quick summary

Drafted turns blank-page anxiety into a confident cover letter in minutes. The template is a single masonry landing page with a deep obsidian and gold visual identity, floating header card previews, and a gallery of real graduate examples. Two conversion paths capture leads at different friction levels, so visitors can act the moment they feel ready.

Who this template is for

This template is made for recent graduates entering the job market without a long work history to draw from. It speaks directly to people who have a degree, a target role, and no idea how to connect the two in writing.

• New graduates in any field, from English and nursing to computer science and business, who are applying for their first professional role
• Career changers with a fresh degree who are pivoting into a new industry and need to reframe their academic background
• Students finishing their final semester who want a ready-to-send cover letter before graduation day arrives

What problem this template solves

Most cover letter resources assume the writer already has work experience to reference. Recent graduates often stare at an empty document because every template they find starts with "In my previous role." Drafted removes that starting-line paralysis.

• The blank-page problem: graduates open a job posting full of confidence, then freeze when they try to write the first sentence
• The experience gap: traditional cover letter formats don't translate academic projects, internships, or coursework into compelling professional language
• The generic letter trap: sending one recycled letter to every employer signals low effort and gets filtered out before a recruiter reads past the opening line

What you get with this template

You get a fully designed, single-page layout that puts real graduate cover letter examples front and center. Every section is built to guide a visitor from uncertainty to action without a hard sell.

• A floating-card hero header with real template previews, a centered headline, and a subtle particle background that sets a premium, confident tone
• A masonry gallery of graduate case study tiles, including short-form key-phrase cards and expanded before-and-after language edits, with full-width interstitials breaking the rhythm every three rows
• Two lead generation conversion paths: a two-step "Build My Cover Letter" modal and a low-friction single-email download for a universal template

Feature list

This template ships with a set of purpose-built components designed around the needs of a recent graduate cover letter landing page.

Floating Photo Hero Header

The header renders real cover letter preview cards as frosted-glass tiles drifting at varied depths and angles across the viewport. Each card shows a graduate's name, target company, and role. A gold edge-light catches on tilted cards, and a soft particle drift fills the background. The effect communicates quality before a visitor reads a single word.

Masonry Gallery with Creator Spotlight Tiles

The masonry grid organizes graduate cover letter examples into tiles of varying heights. Short tiles highlight a single gold-accented key phrase. Taller tiles expand into a mini case study showing the graduate's major, the role they targeted, and a before-and-after language comparison. Scrolling through the grid feels like browsing a curated gallery of real wins.

Full-Width Interstitial Breaks

Every three rows of masonry tiles, a full-width interstitial section interrupts the grid. Each interstitial displays one statistic or recruiter quote in large gold serif type against an obsidian background. These breaks reset the scroll rhythm and reinforce the template's credibility at regular intervals.

Two-Step Lead Generation Modal

The primary call to action launches a two-step modal. Step one asks for the visitor's degree field via a dropdown and their target job title via free text. Step two requests an email address to deliver a personalized template pack. Collecting role context before asking for an email makes the exchange feel genuinely useful rather than transactional.

Low-Friction Instant Download Path

A secondary conversion option lets hesitant visitors download a single universal cover letter template by entering only their email. This path removes the multi-step commitment for visitors who are not yet ready to personalize. Having both options on the same page means the template captures leads at two different readiness levels.

Obsidian and Gold Visual System

The color system pairs deep obsidian black for the primary background with polished onyx card surfaces, molten gold accents on hover states and typography highlights, and frosted glass white for body text. Gold appears only at deliberate focal points: button borders, pull-quote marks, and template title text. The restraint keeps the design feeling premium rather than decorative.

Page sections overview

Design & branding system

The visual identity uses a Tech Glass theme built around four precisely chosen values. The result is a layout that reads as premium and modern without feeling sterile or cold.

• Color palette: deep obsidian black (#0B0D17) as the primary background, polished onyx (#1A1D2E) for card surfaces, molten gold (#D4A843) for hover states and accent typography, and frosted glass white (#E8EAF0) for all body text
• Glassmorphic card treatment: translucent card layers float above one another using depth and opacity, creating a stacked-pane effect that gives the layout visual dimension without added clutter
• Gold accent discipline: gold appears only at intentional focal points such as button borders, pull-quote marks, and template title text, keeping the accent meaningful and the hierarchy clear

Mobile & speed optimization

The masonry layout is designed to reflow gracefully across screen sizes, keeping the gallery readable and the conversion paths accessible whether a visitor arrives on a laptop, tablet, or phone.

• The floating hero cards and masonry tile grid are structured to adapt to narrower viewports without losing the depth and layering that define the visual identity
• The two conversion paths, the modal and the instant download form, remain reachable at every scroll depth on smaller screens, reducing drop-off for mobile visitors
• Tile heights in the masonry grid are set to maintain readability on mobile so that before-and-after text and key-phrase highlights remain legible without requiring horizontal scrolling

How this template helps you convert

The layout is engineered to earn trust before it asks for anything. By the time a visitor reaches either call to action, the gallery has already done the persuasion work.

1. The masonry gallery builds evidence over time. Scrolling past twelve or more real graduate examples in a visitor's own field makes the template feel familiar and proven rather than promotional. Trust accumulates naturally as the grid grows.
2. Two conversion paths match two visitor mindsets. Visitors ready to personalize their letter use the two-step modal. Visitors still deciding use the instant download. Capturing both groups from a single page increases overall lead volume without adding complexity.

Other information about this template

This template sits at the intersection of career resources and polished digital presentation. It is built specifically for the recent graduate cover letter niche and is suited for creators, coaches, or platforms serving job seekers at the entry level.

• The template style is Masonry/Pinterest, making it well suited to content-heavy pages where browsing and discovery are part of the user experience
• The Tech Glass theme and Obsidian and Gold color system give the page a distinctly modern feel that stands apart from conventional resume and career tool designs
• The Creator Spotlight creative direction means every tile is grounded in a real-world graduate scenario, which keeps the page from feeling abstract or aspirational in a vague sense
• The lead generation direction supports two opt-in paths simultaneously, making it practical for list-building campaigns tied to a recent graduate career resource or digital product launch
• This template fits within the Personal and Resume category and is designed for the Recent Graduate Career subcategory, serving buyers who want a ready-to-customize page without building the layout from scratch

Show more