A technical, blueprint-inspired theme for architecture software, engineering studios, SaaS and product teams. Drafting-paper grid frames, bold uppercase grotesk type with mono annotations, line drawings that draw themselves on scroll, a single signal-orange accent and a light appearance by default, with a dark one a click away.
What Makes Vellum Special
Vellum turns every page into a drawing sheet: a hairline frame, ruled cells instead of floating cards, and small mono notes in the margins.
- The drawing sheet. A fixed hairline frame with corner crosshairs surrounds the page. Its margins carry your site name, a sheet number with the page title, and the scroll position.
- Drafting type. Headings are plotted letter by letter behind an orange cursor block, each letter flickering through glyphs before it settles.
- Ruled grids. Header, sections, previews and forms are built from cells that share their 1px rules: square corners, no shadows, uppercase grotesk titles and mono labels.
- Drawings that take colour. Images are shown as grayscale drawings with dimension lines; they take their colour as they reach the middle of the screen, or when hovered.
- Lines drawn by scroll. Frame outlines, the path linking the steps and the timeline line draw themselves as visitors scroll, and the hero's orange circle grows from the corner of its frame.
- A crosshair cursor. On mouse devices the cursor becomes a crosshair with live X / Y coordinates, and a labelled square over media.
- Light first. The drafting-paper appearance is the default; the dark one is a click away and is remembered for each visitor.
Vellum belongs to the interactive themes family. Interactive themes share the same extra section types (Marquee, Statement, Collection Wall) and the same Motion & Interactions settings, so you can switch between them without rebuilding your pages.
Getting Started
-
Install the Theme
Go to Admin panel → Themes, click Upload and select the Vellum
.zipfile. -
Activate Vellum
Click Activate on the Vellum card and enter your purchase code when asked. Your content is untouched: themes only change how it is displayed.
-
Set the Colors and Motion
Open Theme Settings to choose the colors, fonts, header style and which motion effects to keep.
-
Build Your Pages
Edit any page in Sections mode. Every section type works with Vellum; the interactive ones are described below.
-
Configure Menus
The Header Main menu is shown as a row of ruled cells in the header on large screens (sub-items open in a numbered panel), and in the full-screen menu sheet on smaller screens. Keep it short: five or six links fit the header row best.
Purchase Code (License Key)
The Vellum theme is licensed separately from the main application and from every other theme or add-on, so it has its own purchase code (license key). You are asked for it the first time you activate the theme in Admin panel → Themes.
Our products are sold on three platforms, and the way you receive a purchase code depends on where you bought the product.
| Platform / Marketplace | How you get the purchase code | Where to find it again |
|---|---|---|
| bedigit.com Store In-site purchase (Shop) |
Generated automatically when the order is paid, then sent by email, either in its own license email, or inside the order confirmation email. | My Account → My Licenses on bedigit.com |
| Gumroad | Created as soon as Gumroad notifies us of the sale, then sent in a separate email, in addition to the Gumroad receipt. | The license email, your Gumroad Library, and My Account → My Licenses on bedigit.com |
| Envato Market CodeCanyon |
Issued by Envato, not by us, and never sent by email: you download it yourself from your Envato account. | Envato account → Downloads → License certificate & purchase code |
Check your spam folder. For bedigit.com Store and Gumroad purchases the purchase code is delivered by email, and automated license emails are very often filtered. If the message is not in your inbox, look in your spam / junk folder before contacting support, and add our sender address to your contacts or allow list.
1. bedigit.com Store (in-site purchase)
As soon as your order is marked Paid, a license key is generated automatically for every licensed item in the order (one key per purchased unit) and emailed to the address used on the order, either in a dedicated license email or inside the order confirmation email. The key also stays available under My Account → My Licenses, where you can reveal it, copy it, see the domains it is activated on, and deactivate a domain to free an activation slot. The matching invoice is under My Account → My Orders.
2. Gumroad
A Gumroad purchase produces two separate emails: the Gumroad receipt (sent by Gumroad, giving access to the files) and a license key email (sent by bedigit.com) that contains your purchase code. The second one is generated as soon as Gumroad notifies us of the sale, so it normally arrives within seconds of the payment. When the product uses Gumroad’s own license-key feature, the same key is also shown in the Gumroad receipt and under Library → your purchase on gumroad.com. Use the same email address on bedigit.com as on Gumroad and your keys are linked to your account automatically, under My Account → My Licenses; you can also add a Gumroad key manually from My Account → My Gumroad Licenses.
3. Envato Market (CodeCanyon)
Envato issues and delivers the purchase code itself: we never email it, so there is nothing to look for in your spam folder. Log in to your Envato / CodeCanyon account, open Downloads, find the item, and choose License certificate & purchase code from the Download dropdown; the code is written in that certificate. It looks like 12345678-90ab-cdef-1234-567890abcdef and never changes, even when you renew item support. See the official article: Where Is My Purchase Code?
Lost your purchase code? Search your mailbox (spam folder included) for “license” or “purchase code”, then check My Account → My Licenses on bedigit.com for Store and Gumroad purchases, or Downloads → License certificate on Envato. If it is still missing, open a ticket on our Help Center with your order number (Store), Gumroad sale ID or buyer email (Gumroad), or Envato username and item name (Envato).
Demo Content
The live demo shows a fictional studio for architecture, interiors and exhibitions. Its texts are written for the demo; the photographs come from Unsplash and the films are embedded from YouTube. Replace them with your own work before going live.
The demo content is not imported automatically when you activate the theme: build your pages from the sections described below, or start from a page you already have.
Make It Yours
| Setting | Default | What it changes |
|---|---|---|
| Primary color | #fa3600 |
The signal orange: buttons, the Contact cell and call-to-action cells, active states and the drafting cursor. It stays the same in the dark appearance. |
| Secondary color | #282828 |
The solid ink fills of the light appearance: hover states, dark buttons, toasts, the active page of a pagination and checked boxes. The dark appearance keeps its own light ink. |
| Accent color | #fa3600 |
The annotation marks: square markers, the scan line of image reveals and the hero circle. By default it is the same orange as the primary color. |
| Text color | #282828 |
The ink of the light appearance. |
| Heading and body fonts | Schibsted Grotesk / Geist | Schibsted Grotesk is set uppercase for headings; Geist is used for reading. Geist Mono, used for labels, annotations and buttons, is always loaded by the theme and is not a setting. |
| Header styles | Transparent / Sticky | Sectioned pages start with unfilled header cells that fill with paper once the page scrolls; other pages use filled cells from the start. Both stay fixed at the top. Default lets the header scroll away with the page. |
| Header width and alignment | Wide, left | The header row spans the full width of the sheet and the menu cells start on the left; turn off Wide Header to contain it. |
| Mega menu | Off | When on, the header shows the multi-column mega menu in its own cell on large screens, instead of one cell per link. |
| Content width | 1680px |
Maximum width of the content in the wide layout; the boxed layout uses its Container Width instead. |
| Footer colors | Empty | Leave empty to keep the ruled paper footer under its huge outlined site name, or set your own background, text and link colors. |
| CTA background color | Empty | Leave empty to keep the Call to Action section as a ruled block on the sheet, or give it a background color. |
Motion & Interactions
The Motion & Interactions card of the Theme Settings switches each effect on or off. All five are on by default. In Vellum they do the following:
| Option | Effect |
|---|---|
| Intro loader | On the first page of each visit, the lines of the sheet frame draw in from the corners while a counter runs from 000 to 100 beside your site name, then the sheet slides up. |
| Page transitions | Six ruled blinds close over the page, showing the name of the page being opened, then open again on the next page. |
| Contextual cursor | On mouse devices the cursor becomes a crosshair with live X / Y coordinates, and a labelled square over media (View, Drag, Play, Open). |
| Elastic type | In Vellum this is drafting type: headings are plotted letter by letter behind an orange cursor block. |
| Parallax and scroll effects | Lines and frame outlines drawn by scroll, drawings that take their colour as they reach the middle of the screen, image depth, the growing hero circle and the pinned Statement. |
With every option off, Vellum keeps only its quiet reveals (fades and scan wipes on images), and drawings take their colour when hovered.
Visitors who ask their device to reduce motion never see these effects, whatever the settings: the content is shown directly, without animation.
Light & Dark
Vellum opens in its light appearance: drafting paper and graphite ink. The square switch in the header turns the sheet over to the dark appearance, a near-black sheet where the signal orange keeps its color; the new sheet is wiped in from the top edge. The choice is remembered for each visitor, including on the login and registration pages.
In Theme Settings → Appearance Mode you can start in dark, follow the visitor's system setting, or hide the switch to lock one appearance.
Interactive Sections
Every section type works with Vellum. These ones get an interactive design:
| Section | In Vellum |
|---|---|
| Hero | A framed drawing with dimension lines, taking its colour as the page scrolls, and an orange circle growing from its corner as the hero scrolls away. The drafted headline sits bottom-left, beside a cell with the paragraph and the call-to-action cells. The Landing Hero stacks the drafted headline over a full-width framed drawing. Rotating titles are supported. |
| Marquee (interactive themes) | A ticker strip of mono or uppercase items separated by "/" and "+", faster while visitors scroll. Choose the speed, direction, size and typography. |
| Statement (interactive themes) | With the effect Fill in word by word on scroll, the section pins one uppercase line in the centre of an empty sheet and cycles through the statement as visitors scroll, each line filling from grey to ink, with a counter. The statement is cut at your line breaks and punctuation. Otherwise it reads as one large paragraph. |
| Collection Wall (interactive themes) | A plan table with a dotted grid that visitors drag in any direction, with framed drawings, dimension ticks and a coordinate readout; each drawing opens in the image viewer. Choose the draggable wall (normal or tall) or a ruled grid. |
| Portfolio | A ruled grid of drawings with mono indexes that take their colour on hover. |
| Steps | Horizontal layout: a plan-like path, drawn by scroll, links orange numbered square markers. Vertical layout: a line drawn by scroll. Each step can have an image, shown as a drawing. |
| Timeline | A vertical line drawn by scroll; its markers turn orange as they are passed. |
| About | A framed drawing cell beside the story cell, and a ruled row of figures. |
| Testimonials | A ruled table of quotes with an orange quote marker, paged by the per page setting with previous / next cells. |
| Image, Video | A framed drawing whose outline is drawn by scroll, with dimension lines and a mono caption; a framed player whose poster is shown as a drawing, with a Play cursor. With autoplay, the player loads once it is in view. |
| Gallery, Gallery + Text, Image + Text | A ruled grid of drawings opening in the image viewer, a cell of drawings beside the text, and numbered rows of drawing and text cells. |
| Features, Cards Grid, Metrics, Pricing, Comparison | A spec sheet of ruled cells with icons in ruled squares, cells with a drawing, an index and an uppercase title, big uppercase figures with mono units, plans as columns of a technical table (the featured one flagged in orange) and a technical table with a highlighted column. |
| Carousel, Before / After, Logo Bar, Countdown | Slides wiped in by a scan line with ruled controls and a mono counter, ruled comparison frames with an orange handle (or a side-by-side pair), a ruled row of client cells with arrow cells (or a drifting ticker), and four mono cells ticking down. |
| Accordion, FAQ, Tabs, Titles, Divider, Banner, Call to Action | Numbered ruled rows, tab cells over a ruled panel, drafted titles with drawn rules, a drawn rule, plotted wave or row of square marks, a thin ruled strip, and a ruled block with an orange call-to-action cell. |
Works & Projects
The works index shows its categories as tab cells that filter the works in place (when they all fit on one page: set Portfolio → Items per page high enough), with a count of the works shown. A switch shows the works as a ruled grid of drawings or as a technical list where an image follows the pointer; the view is remembered for each visitor. Each project page opens with a title block like a drawing's, then a framed cover with dimension lines, the story, films, comparisons and gallery, a button to copy the page link, and a cell leading to the next project.
Add-on Pages
Pages of add-ons (journal, events, shop, help desk, account...) use the shared layouts restyled with the Vellum sheet: square corners, hairline rules, mono labels and the signal orange, in both appearances.
Accessibility
- Every effect is turned off for visitors who ask their device to reduce motion.
- Drafted headings keep their full text for screen readers.
- The collection wall moves with the arrow keys, the comparison slider and the tabs with the keyboard, and accordion rows are native disclosures.
- The menu sheet keeps the focus inside it while it is open and closes with Escape.
- A "Skip to content" link is the first stop of the keyboard on every page.
Updating
How to update this theme to a newer version.
Admin Panel Upload (Recommended)
- Download the latest
.zipfile of this theme. - Go to Admin panel → Themes and click the Upload button.
- Select or drag the
.zipfile into the upload area. - A confirmation prompt will show the current and new version numbers. Click Replace to proceed.
- Go to Admin panel → System Update (
/admin/update) to apply any pending database migrations.
Tip: Your theme settings (colors, fonts, custom CSS) are stored in the database and will not be lost when you replace the theme files.
Uninstallation
How to stop using this theme without losing anything.
Themes are not switched on and off one by one: exactly one theme is active at a time, so you stop using Vellum by activating another one. Go to Admin panel → Themes and click Activate on the theme you want instead.
- Vellum stays installed: its files remain under
extensions/themes/vellum/and its card stays in the list. - Its settings (colors, fonts, layout, header and footer options, custom CSS) stay stored in the database, and so does the per-section styling you gave it on the home page.
- The purchase code recorded at activation is kept, so activating the theme again does not ask for it.
Activate it again whenever you like: the front-end comes back exactly as you left it.
Removing
How to delete this theme permanently, and what goes with it.
Removing deletes the theme for good. The active theme cannot be removed, so removal is always two steps:
- Activate a different theme (see Uninstallation).
- Click Remove on the Vellum card and confirm the prompt.
That deletes:
- the theme directory
extensions/themes/vellum/; - its published assets under
public/themes/vellum/; - its uploaded files under
storage/app/public/themes/vellum/; - its Vite build artifacts: the hashed files under
public/build/and their manifest entries; - its row in the
themestable, which is where its settings live, so the colors, fonts, layout options and custom CSS you configured for it are lost.
This cannot be undone. Export or note down any custom CSS you want to keep before removing the theme: installing it again later starts from the theme's default settings.
Per-section home page styling is stored under the theme's name rather than against the theme row, so it survives the removal: install Vellum again and your section styling is still there, while the theme's own settings start from their defaults.
The removal is refused, before anything is deleted, when the theme is still active or when the web server (PHP) user cannot delete extensions/themes/vellum/. In that last case, give that user write permission on the directory and on its parent, then try again.
Deleting the folder over FTP or SSH is not equivalent: the published assets, the build artifacts and the themes row are all left behind. Use Remove in the admin panel instead.
Frequently Asked Questions
Is Vellum slow because of all the animations?
No. The scroll effects run from a single animation loop that only works on what is on screen, images load lazily and the fonts load without blocking the page.
Can I keep the design but turn the motion down?
Yes. Switch off any effect in Theme Settings → Motion & Interactions. With every option off, Vellum is a calm technical theme.
Why are my images in black and white?
Vellum shows images as drawings: they are grayscale until they reach the middle of the screen, then take their colour. With Parallax and scroll effects off, they take their colour when hovered.
Why are Marquee, Statement and Collection Wall greyed out with my other theme?
They are sections of the interactive themes. With another theme active they stay on your pages but are not displayed; the section picker shows them as not available in the active theme.
Does the theme work on phones and tablets?
Yes. The header keeps a Menu cell that opens a full-screen ruled sheet with numbered links, your contact details and the local time, the collection wall follows your finger, and the crosshair cursor is only used with a mouse.