Log Studio Lab
Sign in
Brands with a storyComing to the Theme Store

Vellum Shopify theme

A brand story told in numbered chapters, ending at the buy button. Manifesto, origin map, pinned process, big numbers, timeline and ingredients, each a chapter that renumbers when you reorder it. The product page buys first and tells the story below.

Try the live demoSee how it works with our apps

Get Vellum the day it opens

One email when it is in the Theme Store. No newsletter.

Price set in the Theme Store.

Vellum theme default hero art

Try Vellum in place

Open full demo

A sample store built from the Vellum art direction. Use the bar to switch the look, light or dark and the color scheme; the demo changes in place. It is stand-in content with system fonts, not a live shop.

The page follows your device's light or dark setting; the demo follows the look you pick.

Free gift with your order (sample offer)
Sample & Co.ShopOur storyJournalVisitCart (2)

Premium food and drink

Small batches, made slowly, with the story on the label.

Generous white space and long-form storytelling blocks for brands whose origin is part of the product.

Shop the range
OfferA free gift is added at the cart when the order qualifies. Sample offer.

The range

  • Harvest Oil, batch 12Peppery, green, a little bitter.
  • Reserve tin, 3 lFor the kitchen that never stops.
  • Early pick, 250 mlGrassy and bright.
  • Salt flakes, 120 gFrom the same sea air.

What makes Vellum different

  • Chapters as sections: statement, plate, split, pinned and numbers layouts
  • Origin map with a printed list of places, so nothing lives only in a graphic
  • Timeline of up to ten entries
  • Product page that buys first, with the story below and a sticky buy bar
  • Optional 24-frame hero sequence with the poster always as the LCP image

Want it on your store?

Request early access to VellumOpen the full demo of Vellum

The Vellum design system

Everything a preset is made of, from the settings and tokens the theme ships. Change a preset and these values change with it.

Color schemes

Four schemes per preset, assigned to any section. The ratios are computed from the hex values the theme ships: text is held to 4.5:1 and interface parts to 3:1 at build time, and a preset that fails does not compile.

Vellum Premium food and drink

  • Vellum

    #F5EFE3 · #1F1A15 · #A33A17

    Text on background
    15.1:1 AAA
    Button label on button
    15.1:1 AAA
    Accent on background
    5.8:1 AA

  • Parchment

    #E8DDC8 · #1F1A15 · #9A3414

    Text on background
    12.8:1 AAA
    Button label on button
    12.8:1 AAA
    Accent on background
    5.4:1 AA

  • Cellar

    #17110D · #F3EBDC · #F0A35E

    Text on background
    15.8:1 AAA
    Button label on button
    15.8:1 AAA
    Accent on background
    9.0:1 AA

  • Oxblood

    #4A1D14 · #FAF1E2 · #F2C879

    Text on background
    12.7:1 AAA
    Button label on button
    9.0:1 AAA
    Accent on background
    9.0:1 AA

Alder Beauty and wellness

  • Stone

    #F0F1EA · #18211D · #1F6354

    Text on background
    14.5:1 AAA
    Button label on button
    14.5:1 AAA
    Accent on background
    6.2:1 AA

  • Clay

    #EAD9CC · #261712 · #8A3A27

    Text on background
    12.6:1 AAA
    Button label on button
    12.6:1 AAA
    Accent on background
    5.6:1 AA

  • Moss night

    #0E1915 · #EBF2EC · #8FD3B8

    Text on background
    15.8:1 AAA
    Button label on button
    15.8:1 AAA
    Accent on background
    10.4:1 AA

  • Fern

    #1E4A3F · #F4F8F2 · #F3D9A4

    Text on background
    9.3:1 AAA
    Button label on button
    7.3:1 AAA
    Accent on background
    7.3:1 AA

Cadence Sports and performance

  • Chalk

    #F3F3EF · #0E0F11 · #B83A06

    Text on background
    17.2:1 AAA
    Button label on button
    17.2:1 AAA
    Accent on background
    5.2:1 AA

  • Concrete

    #DEDFDA · #0E0F11 · #A93405

    Text on background
    14.3:1 AAA
    Button label on button
    14.3:1 AAA
    Accent on background
    4.9:1 AA

  • Night track

    #0B0C0E · #F5F5F1 · #FF7A3D

    Text on background
    17.9:1 AAA
    Button label on button
    6.9:1 AA
    Accent on background
    7.6:1 AA

  • Signal

    #FF5A1F · #0B0C0E · #0B0C0E

    Text on background
    6.3:1 AA
    Button label on button
    6.3:1 AA
    Accent on background
    6.3:1 AA

Typography

Faces and weights come from each preset's settings, all from the Shopify font library. The specimens below are rendered in the real faces; this site does not load them as web fonts.

  • Vellum type specimen: Newsreader 400 for headings and DM Sans 400 for body text.
    Vellum headings
    Newsreader, weight 400
    Body
    DM Sans, weight 400
    Heading scale
    110%
  • Alder type specimen: Libre Baskerville 400 for headings and Work Sans 400 for body text.
    Alder headings
    Libre Baskerville, weight 400
    Body
    Work Sans, weight 400
    Heading scale
    104%
  • Cadence type specimen: Karla 700 for headings and Inter 400 for body text.
    Cadence headings
    Karla, weight 700
    Body
    Inter, weight 400
    Heading scale
    110%
Fluid type scale of the core tokens, in pixels at a 360 and a 1600 pixel viewport
StepTokenAt 360 pxAt 1600 px
Small--ls-step--113.3 px14.4 px
Body--ls-step-016 px18 px
Heading 4--ls-step-119.2 px22.5 px
Heading 3--ls-step-223 px28.1 px
Heading 2--ls-step-327.6 px35.2 px
Heading 1--ls-step-432 px60 px

Shape, space and elevation

  • Vellum

    Buttons 2 px, inputs 2 px, surfaces 0 px. Product cards 4:5, 1 per row on a phone.

  • Alder

    Buttons 40 px, inputs 12 px, surfaces 14 px. Product cards 4:5, 1 per row on a phone.

  • Cadence

    Buttons 0 px, inputs 0 px, surfaces 0 px. Product cards 4:5, 1 per row on a phone.

Fluid spacing scale of the core tokens, in pixels at a 360 and a 1600 pixel viewport
TokenRangeLargest size
--ls-space-14 px
--ls-space-28 px
--ls-space-312 px
--ls-space-416 px
--ls-space-520 to 24 px
--ls-space-624 to 32 px
--ls-space-732 to 48 px
--ls-space-848 to 64 px
--ls-space-964 to 96 px

Elevation: Vellum is flat. Surfaces are separated by hairline rules and a quiet tile fill, not by shadows, and focus is a ring.

Icons

Line icons on a 20 px grid, drawn in the text color with one stroke width, so they follow every color scheme and need no icon font.

  • Cart
  • Account

The build floor is 98% on Lighthouse accessibility for every preset.

Like this?

Open the full demo of VellumRequest early access to Vellum

The Vellum components

Every part of the storefront the art direction specifies: header, search, cart drawer, cards, forms, footer and the product page blocks, with the product stand-ins drawn for the theme. They follow the look and the light or dark scheme you pick below.

Like this?

Open the full demo of VellumRequest early access to Vellum

The sections of Vellum

The home and product templates the theme ships, in the order they ship. Every section works on its own, takes any of the four color schemes and can be reordered in the theme editor. The wireframes follow the look you pick below.

Like this?

Open the full demo of VellumRequest early access to Vellum

Vellum page by page

Home, collection, product, cart and article templates, composed from the components above. Narrow your window to see the phone layout.

Want it on your store?

Request early access to VellumOpen the full demo of Vellum

Your apps in the Vellum theme

Each of our mini apps where the theme puts it: the Theme Contract v1 slot or anchor, drawn with the theme's own components and tokens. Dashed outlines mark the slot; an empty slot reserves no space in the real theme. Items and prices are sample content.

Request early accessSee all mini apps

Three looks, one theme

Each preset has its own colors, type pairing and shape, and four color schemes you assign to any section. Pick one to repaint the demo, the wireframes and the mini apps on this page.

  • Vellum

    Premium food and drink

    Headings in Newsreader, body in DM Sans.

    • Vellum
    • Parchment
    • Cellar
    • Oxblood

  • Alder

    Beauty and wellness

    Headings in Libre Baskerville, body in Work Sans.

    • Stone
    • Clay
    • Moss night
    • Fern

  • Cadence

    Sports and performance

    Headings in Karla, body in Inter.

    • Chalk
    • Concrete
    • Night track
    • Signal

Premium food and drink

A heading in the Vellum look

Body text sits on this scheme, so you can judge the colors together before the theme is in the Theme Store.

Add to cart
Type pairing
Headings in Newsreader, body in DM Sans. The preview uses a stand-in face of the same kind.
Color schemes
Vellum #F5EFE3, Parchment #E8DDC8, Cellar #17110D, Oxblood #4A1D14

Want it on your store?

Request early access to VellumOpen the full demo of Vellum

Works with our apps

Vellum is complete without any app. With one installed, its widget uses the theme's named places (Contract v1), and where the theme has its own block it steps aside.

  • Urgency Bar

    Takes the announcement slot for product drops.

  • Frequently Bought Together

    Placed right after the buy buttons on the home featured product.

  • Freebies Engine

    An unlock-the-gift booster by chapter that always offers a path without reading: the threshold is applied at checkout.

  • AI Chat

    Presented as Ask the maker.

  • Sales Pop

    Off by default in this theme.

Like this?

Open the full demo of VellumRequest early access to Vellum

Accessible and fast by contract

  • Accessible by contract

    Built to WCAG 2.2 AA. Every color scheme is checked at build time for text at 4.5:1 and interface parts at 3:1, and a preset that fails does not compile. Keyboard paths, reduced motion and forced colors are part of the checklist.

  • Fast by budget

    The blocking stylesheet and every script have a size budget that the build enforces. Motion is native CSS with a static fallback, and each feature loads its own small file only where it is used.

  • Complete without apps, faster with them

    The Theme Store listing and demo store carry no app. Our widgets use the theme's named anchors (Contract v1), so there is no guessing and no overlap.

Stylesheet budget

Vellum's blocking stylesheet is budgeted at 10,500 bytes over the wire (brotli), 85% of the 12,288 byte ceiling. Every script is a separate file under 3,072 bytes, loaded only where its feature is used.

Lighthouse mobile budgets per page type
PageLCPCLSTBT
Home2,200 ms0.02150 ms
Collection2,300 ms0.02150 ms
Product2,300 ms0.02200 ms
Cart2,000 ms0.02150 ms

Measured results

Vellum (Vellum preset), Lighthouse performance score, LCP and TBT per page type, measured on the dev store, mobile, 2026-10-30. Layout shift (CLS) was 0 and accessibility 100 on every page. The other presets share the same hero code and assets.

Lighthouse mobile medians for the Vellum preset, measured on the dev store, mobile, 2026-10-30
PageScoreLCPTBT
Home913,101 ms99 ms
Collection883,137 ms131 ms
Product863,629 ms156 ms

Release floors on every preset: Lighthouse performance 85%, accessibility 98%, best practices 95% and SEO 100%. Twelve color schemes across the three presets and 132 pairs computed against WCAG 2.2 AA, with no failures.

Run it on your store:

Request early access to VellumOpen the full demo of Vellum
Coming to the Theme Store

Get Vellum when it opens

Price set in the Shopify Theme Store at launch. Early access members hear first.

Vellum is sold through the Shopify Theme Store, which takes the payment. Leave your email and we email you once when it is listed.

Get Vellum the day it opens

One email when it is in the Theme Store. No newsletter.

Open the full demoCompare themes

Using one of our apps? Their plans are separate: see pricing for our apps.

All themesCompare themesVellum documentationTheme support

Questions about Vellum

Who is Vellum for?
Manifesto, origin map, pinned process, big numbers, timeline and ingredients, each a chapter that renumbers when you reorder it. The product page buys first and tells the story below. Its three presets are Vellum (premium food and drink), Alder (beauty and wellness), Cadence (sports and performance).
Do I need your apps to use Vellum?
No. Vellum is complete on its own. With our apps installed, their widgets use the theme's anchors instead of guessing.
Does Vellum have a dark mode?
Yes. Every Vellum preset ships a dark color scheme next to its light ones, and you assign a scheme to any section, so a dark footer or a dark hero is a setting, not a custom build.
Which of your apps work with Vellum?
Urgency Bar, Frequently Bought Together, Freebies Engine, AI Chat have a named place in Vellum. The other mini apps work too, where they find their place by detection.
How much does Vellum cost?
Price set in the Theme Store. We do not set or show a price here.

Questions before you commit?

Vellum support

Showing the Vellum look, Vellum scheme

Request early accessGet early access to Vellum

Be first to try Vellum

Leave your email and we will email you when Vellum reaches the Theme Store.

Get early access to Vellum

Chat with a real developerChat with a deva member of our staff, not a bot