An interactive type foundry hero with oversized variable letters, warm paper tones and responsive weight, width and rotation.
An independent studio concept.
Loading preview
01 / THE DESIGN BRIEF
Explore the design brief.
Visual direction for the composition, typography, colour palette and interactions.
Build a fullscreen interactive hero for Pliant, an independent type foundry introducing a variable grotesk font family.
Use warm paper #ede9df, near black #15130f, vermilion #ff4b1f, muted text #6b665c and fine rules at 14% ink opacity. Pair Anybody variable for display typography with Geist Mono for supporting text. Keep the composition typographic, without photography, gradients or shadows.
On desktop, divide the viewport into a 72px header, a flexible central letter field and an editorial bottom row. Use horizontal padding clamp(16px,3.3vw,48px). Place PLIANT at the top left, an outlined INDEX pill beside it and a small font credit at the far right.
Make PLIANT the focal point: six enormous letters, each inside its own adjoining outlined cell. Size the columns proportionally to the letters rather than equally. Centre the letters and fit the word across the available width. Give the field 1200px perspective.
Along the bottom, use four columns in proportions 1.35:1:1:1. The first contains the label PLIANT GROTESK, NEW RELEASE, the heading A grotesk with give., the description One family that bends across weight and width without losing its voice, from hairline captions to extended posters., and a black Get the family pill with an orange dot. The other columns begin with fine rules and the headings Styles and axes, What is included and Licensing. Describe nine weights and a variable width axis, OTF/TTF/WOFF2 formats, and desktop, web, app and broadcast licences. Set supporting copy in small muted mono. Use Anybody 600 for the main heading at clamp(30px,2.4vw + 14px,50px), with tight leading.
Let resting letters subtly vary around weight 600 and width 100. On hover or keyboard focus, the active letter turns towards the pointer, becomes vermilion and advances up to 40px. Limit rotation to 26 degrees vertically and 38 degrees horizontally. Use damped springs for font axes, rotation and colour, returning smoothly on leave or blur. Pause animation when offscreen or the tab is hidden.
INDEX opens a full viewport ink coloured dialog with paper text, a CLOSE pill and five large ruled links: 01 Fonts, 02 Foundry, 03 Licensing, 04 Custom and 05 Journal. Links become wider, heavier and vermilion on hover or focus. Support Escape, contained keyboard focus and focus return.
Below 760px, arrange the letters as PLI above ANT, stack the four bottom sections, place the credit on its own line and allow scrolling. Provide static typography for reduced motion and useful static navigation. Keep every control keyboard accessible.
AI results vary by tool and model. This prompt may not produce an exact match to the preview.
02 / MAKE IT YOURS
Make the type your own.
Editable HTML, CSS and JavaScript, local Anybody and Geist Mono font files with their licences, a short README and usage terms. No framework or build step. Preview with a local server extension in your editor.
Downloads are free. Your Google account lets you download designs; browsing and copying prompts do not require an account.
Continue with Google, then return here to choose your download.
Personal and client use
You may use and modify this design for personal websites and commercial client websites. You may not resell, sublicense or redistribute the template, its source files or a collection containing it. Keep the included font licence notices. The design is supplied as a starting point without warranty.