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

SectionPurpose
Before/After SliderOpens the page with a dramatic blank-to-finished calligraphy reveal
Tagline BlockAnchors the header with a single defining line of copy
Starter Sets CellIntroduces product kits to new visitors at a broad view
Inks by Origin CellCurates inks from Kyoto, Florence, and Portland with origin context
Nibs by Hand CellShows macro photography of tine geometry and nib craftsmanship
Papers by Tooth CellPresents close-up texture shots that communicate paper feel
Studio Picks CellDelivers a handwritten owner recommendation as an editorial moment
Build a Kit WizardGuides beginners through a three-question bundle configurator
Floating Cart DrawerHolds 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.

  1. 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.
  2. 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.
  3. 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
Nib - Artisan Calligraphy Landing Page Template
Nib - Artisan Calligraphy Landing Page Template
Nib - Artisan Calligraphy Landing Page Template
Nib - Artisan Calligraphy Landing Page Template

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?