Nib - Artisan Calligraphy Landing Page Template
Nib is a bento grid landing page built for artisan calligraphy and ink supply shops. It guides visitors through five curated product cells, a Before/After header slider, and a "Build a Kit" wizard. The warm parchment and citrus palette, intimate "Add to Desk" calls to action, and a floating cart with a free-shipping progress bar make browsing feel like exploring a jeweler's cabinet.
by Rocket studio
Quick summary
Nib is a single-page bento grid landing page for artisan calligraphy and ink supply retailers. It opens with a diagonal Before/After slider, moves through five intimately curated product cells, and closes every interaction with a low-pressure "Add to Desk" call to action. The Luxe Minimal design feels quiet and precise, with citrus color accents appearing only where action is needed.
Who this template is for
This template is built for specialty retailers who sell handcrafted calligraphy tools and supplies. It speaks to shop owners whose customers care deeply about the craft, not just the product.
- Independent calligraphy and ink shops selling nibs, inks, and papers
- Wedding stationers and studio owners who want a refined online storefront
- Hobbyist and professional scribes who also sell curated supply kits to their community
What problem this template solves
Most retail templates treat every product equally, producing a flat grid that feels like a warehouse catalog. Calligraphy supply shops need a presentation that matches the intimacy of the craft itself.
- Generic e-commerce layouts undercut the premium feel that handcrafted tools deserve
- Visitors have no guided path from curiosity to purchase, so they leave without adding anything
- There is no mechanism to help beginners choose the right starter combination of nib, ink, and paper
What you get with this template
You get a complete, ready-to-customize single-page layout that handles discovery, education, and purchase intent in one scroll. Every section is designed to move a visitor from "I'm browsing" to "I'm buying."
- A diagonal Before/After header slider with a tagline and macro-resolution calligraphy reveal
- Five expanding bento grid cells covering Starter Sets, Inks by Origin, Nibs by Hand, Papers by Tooth, and Studio Picks
- A "Build a Kit" wizard, a persistent floating cart icon, and a free-shipping progress bar inside the cart drawer
Feature list
This template includes several purpose-built components that work together to support both discovery and conversion.
Before/After Header Slider
The header splits the viewport diagonally. The left side shows a blank sheet of Arches hot-press paper and the right reveals a finished Spencerian flourish in walnut ink. Visitors drag the handle to watch the transformation unfold. A single tagline anchors the moment below the slider.
Five-Cell Bento Grid
The scrollable grid leads visitors through five product areas in sequence: Starter Sets, Inks by Origin, Nibs by Hand, Papers by Tooth, and Studio Picks. Some cells span two columns while others sit as tight squares, so the layout breathes like a curated cabinet rather than a product feed. Each cell expands on click into a mini-catalog view.
"Build a Kit" Wizard
A secondary conversion path asks three short questions: script style, experience level, and ink color preference. The wizard then assembles a recommended bundle from the shop's inventory. This path is especially useful for first-time buyers who do not yet know what combination of tools they need.
Floating Cart with Progress Bar
A persistent cart icon sits in the top right corner with the item count shown in blood orange. Inside the cart drawer, a thin progress bar fills from parchment to yuzu as the order total climbs toward the free shipping threshold. The visual cue gives shoppers a reason to add one more item.
Intimate "Add to Desk" call to action
Every bento cell carries a primary call to action reading "Add to Desk" in sumi black with a yuzu underline. The language is specific to the craft and feels personal rather than transactional. Hover states ignite blood orange accents so the action target is unmistakable.
Studio Picks Editorial Cell
The final bento cell features the shop owner's handwritten note recommending a seasonal pairing of nib, ink, and paper. This editorial moment builds trust and keeps the experience feeling human rather than algorithmic.
Page sections overview
| Section | Purpose |
|---|---|
| Before/After Slider | Opens the page with a dramatic blank-to-finished calligraphy reveal |
| Tagline Block | Anchors the header with a single defining line of copy |
| Starter Sets Cell | Introduces product kits to new visitors at a broad view |
| Inks by Origin Cell | Curates inks from Kyoto, Florence, and Portland with origin context |
| Nibs by Hand Cell | Shows macro photography of tine geometry and nib craftsmanship |
| Papers by Tooth Cell | Presents close-up texture shots that communicate paper feel |
| Studio Picks Cell | Delivers a handwritten owner recommendation as an editorial moment |
| Build a Kit Wizard | Guides beginners through a three-question bundle configurator |
| Floating Cart Drawer | Holds item count, order total, and free-shipping progress bar |
Design & branding system
The visual identity follows a Luxe Minimal theme built around a warm citrus palette. Color is used with deliberate restraint so that every accent carries weight when it appears.
- Core palette: warm parchment white (#FFF8F0) for backgrounds, bright yuzu (#F4A900) and blood orange (#D9531E) for interactive accents, and deep sumi-ink black (#1A1A1A) for typography and one-pixel grid borders
- Citrus tones activate only on hover states, price tags, and add-to-cart buttons so the visitor's eye is guided without distraction
- The overall feeling resembles a single drop of turmeric-gold ink blooming across dampened cotton paper: restrained everywhere except where action lives
Mobile & speed optimization
The bento grid layout is structured to adapt clearly from desktop to smaller screens. The layout prioritizes legibility and interaction clarity at every size.
- Grid cells reflow to single-column stacks on narrow screens so no product area is hidden or clipped
- The floating cart icon and progress bar remain accessible at the top of the viewport on all screen sizes
- The Before/After slider and expanding cell interactions are built to remain usable without a hover-dependent device
How this template helps you convert
The template is built around a multi-path conversion model. Visitors with different levels of confidence all find a natural next step.
- The bento grid provides a guided, sequential browsing path that moves visitors from broad awareness (Starter Sets) to intimate detail (Studio Picks), building purchase intent at every scroll step.
- The "Build a Kit" wizard removes decision paralysis for beginners by narrowing the product range to a personally matched bundle, reducing the chance of an abandoned session.
- The free-shipping progress bar inside the cart drawer creates a visible goal that encourages visitors to add one additional item before checkout, increasing average order value.
Other information about this template
This template is categorized under Retail and E-Commerce with a focus on East Asian specialty retail. The design philosophy and product cell structure are equally suited to Western calligraphy retailers and general art supply shops that curate premium tools.
- The template is a single-page layout, making it fast to deploy as a campaign or seasonal storefront
- The "Add to Desk" language and Studio Picks editorial cell can be adapted for other craft verticals such as bookbinding, printmaking, or brush painting
- The Luxe Minimal theme and the Citrus Burst color system can be recolored to match an existing brand identity while preserving the grid structure




Theme
Neo-Retro
Creative direction
Unboxing Experience
Color system
Dopamine Pop
Style
Scroll Reveal (Progressive)
Direction
Click-Through
Page Sections
Before/after Header Slider
Five-cell Bento Grid Layout
Build a Kit Wizard
Floating Cart with Progress Bar
Intimate Add to Desk Call to Action
Studio Picks Editorial Cell
Related questions
Who is this landing page template designed for?
What are the five bento grid product cells?
How does the Build a Kit wizard work?
How does the free-shipping progress bar work?
Can the color palette be updated to match an existing brand?