A warm, crafted theme for architecture firms, interior designers, builders and engineering consultancies. Animated topographic contour lines, numbered chapters, a services list with hover image previews, an offset project mosaic, a sage accent and a light appearance by default, with a dark one a click away.
What Makes Contour Special
Contour is drawn like a site survey: warm off-white walls, faint topographic lines, and projects laid out like plans pinned to a board.
- Living contour lines. Topographic lines drift slowly behind the hero, the page headers, the call to action, the menu and the footer, and bend gently around the pointer. Every page gets its own terrain.
- Width type. Display headings open from condensed to their normal width as they come into view, and narrow slightly while the page scrolls fast.
- Expanding media cards. The hero image, the page header image, project covers and videos start as rounded cards inset from the edges and open to full width as visitors scroll.
- Numbered chapters. Section titles open with a small chapter mark, numbered in order down the page, and a hairline that draws across.
- Specialism rows. Services, features and events read as big text rows on hairlines; hovering a row floats its image beside the cursor.
- An offset project mosaic. Projects are laid out in mixed sizes and staggered heights, with pill tags.
- Light first. The warm daylight appearance is the default; the dark one is a click away and is remembered for each visitor.
Contour 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 Contour
.zipfile. -
Activate Contour
Click Activate on the Contour 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 Contour; the interactive ones are described below.
-
Configure Menus
The Header Main menu is shown in the centre of the floating header on large screens (sub-items open in dropdowns), and in the menu sheet on smaller screens, where sub-items unfold under their parent. Keep it short: five or six links fit the header best.
Purchase Code (License Key)
The Contour 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 | #5f7d55 |
The sage: the page transition panel, the cursor, the testimonial card, the featured plan, highlighted columns and active states. It is lifted automatically in the dark appearance. |
| Secondary color | #151515 |
The dark fills of the light appearance: the band of the Call to Action section (and dark banners) and the dark buttons. The dark appearance keeps its own band and light buttons. |
| Accent color | #c9a77c |
The clay marks: plan badges, sale badges and warning banners. |
| Text color | #151515 |
The ink of the light appearance. |
| Heading and body fonts | Instrument Sans | Instrument Sans is loaded with its width axis, which the width type effect needs. Other fonts work, without the widening. |
| Header styles | Transparent / Sticky | Sectioned pages start with a clear floating card over the first section that turns white on scroll; other pages use the white card from the start. Both hide on the way down and come back on the way up. Default lets the header scroll away with the page. |
| Header width and alignment | Wide, centred menu | The floating card spans the width of the page with the menu in its centre; turn off Wide Header to contain it. |
| Contact phone | Empty | When a phone number is set in your contact settings, the header shows it as a pill beside the Contact button. |
| Content width | 1440px |
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 warm stone footer with its faint contour lines, or set your own background, text and link colors. |
| CTA background color | Empty | Leave empty to keep the dark band of the Call to Action section (the secondary color). |
Motion & Interactions
The Motion & Interactions card of the Theme Settings switches each effect on or off. All five are on by default. In Contour they do the following:
| Option | Effect |
|---|---|
| Intro loader | On the first page of each visit, contour rings draw in, then your site name and tagline appear before the panel lifts. |
| Page transitions | A sage panel with contour lines sweeps across the screen between pages, showing the name of the page being opened. |
| Contextual cursor | On mouse devices the cursor becomes a small sage dot that grows into a labelled pill over media (View, Play, Drag...). |
| Elastic type | In Contour this is width type: display headings widen from condensed as they come into view, and breathe narrower while the page scrolls fast. |
| Parallax and scroll effects | Image depth, the media cards that open to full width (hero, page header, project cover, video) and the image rising into the Call to Action. |
The contour lines and the word-by-word fill of the Statement are part of the design and are not switched by these options; for visitors who ask their device to reduce motion, the lines are drawn once, without moving. With every option off, Contour keeps only its quiet reveals: rising text, images uncovered from the bottom and hairlines drawing across.
Visitors who ask their device to reduce motion never see these effects, whatever the settings: the content is shown directly, without animation.
Light & Dark
Contour opens in its light appearance: warm off-white walls and ink text. The moon button in the header switches to the dark appearance, a deep warm black with a lifted sage for contrast, with a circular reveal from the button. 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 Contour. These ones get an interactive design:
| Section | In Contour |
|---|---|
| Hero | A centred statement over a rounded, inset media card that opens to full width as visitors scroll, with contour lines drifting around it; below, an intro row pairs the call to action with the description. The side by side image layout keeps the text beside the card. The Landing Hero sets a centred statement on contour lines with the cover as a rounded card below. Rotating titles are supported. |
| Marquee (interactive themes) | Large sentence-case words separated by small dots, drifting faster while visitors scroll. Choose the speed, direction, size and typography. |
| Statement (interactive themes) | Large text whose words fill from light grey to ink as it scrolls into view (effect Fill in word by word on scroll), or simply rises in, with an optional image and button. |
| Collection Wall (interactive themes) | A canvas of rounded works, over contour lines, that visitors drag in any direction; nearer works drift faster. Each one opens in an image viewer. Choose the draggable wall (normal or tall) or a calm grid. |
| Portfolio | The offset project mosaic: mixed sizes, staggered heights and pill tags. |
| Features, Cards Grid, Events Preview | Big text rows separated by hairlines (the specialisms list, in one or two columns), rows of services and an agenda of events; hovering a row floats its image beside the cursor. |
| Testimonials | A sage card overlapping a full-width photograph, one quote at a time, with round previous / next buttons. The photograph is the section background image (Style tab) when set, else the section image; without either, the card sits on contour lines. |
| Call to Action | The dark closing chapter: faint contour lines, a large heading in width type and an image rising into place. |
| Steps, Timeline | Numbered stages as columns (horizontal) or rows (vertical), each with an optional image, and dates on a hairline that draws as it comes into view. |
| About, Metrics, Countdown | The intro over faint contour lines with a framed photograph and the key figures, figures in a hairline grid that count up once in view, and days, hours, minutes and seconds in large tabular figures. |
| Video | A rounded poster card with a Play pill that opens to full width as visitors scroll; the player loads on click, with sound. With autoplay, the video starts muted (browsers only allow muted autoplay) once half of it is on screen: YouTube (privacy-enhanced mode) and Vimeo videos, or your own video file, which also loops. Visitors who ask to reduce motion keep the poster. |
| Accordion, FAQ, Tabs | Big text rows that open in place, a plus turning into a minus (the FAQ with an optional framed image), and an underlined, pill or vertical tab list with a sliding marker. |
| Gallery, Gallery + Text, Image + Text, Image | A staggered mosaic of rounded photographs opening in the image viewer, a small mosaic beside a column of text, alternating rows and single photographs revealed from the bottom. |
| Titles, Pricing, Comparison, Logo Bar, Blog / Products previews, Team, Divider, Banner | Numbered chapter openings, plans as tall cards with the featured one in sage, a hairline table with a sage column, partners in a hairline grid or a slow band, staggered journal cards, quiet shop cards, portrait cards with pill tags, a hairline, contour wave or three dots, and a slim notice bar. |
Works & Projects
The projects index places animated category pills over the offset project mosaic: the pills slide their marker and reshuffle the projects in place (when they all fit on one page: set Portfolio → Items per page high enough), with a count of the projects shown. Each project page opens with its title on contour lines and a cover card that opens to full width, then the project facts and story, its films, comparisons and gallery, related projects and a band 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 Contour palette, rounded cards and hairlines, in both appearances.
Accessibility
- Every effect is turned off for visitors who ask their device to reduce motion, and the contour lines stand still.
- The collection wall, the testimonials, the image viewer and the tabs move with the arrow keys, and the viewer closes with Escape.
- The header gives way while visitors read down the page but never while the focus is inside it, and the menu sheet 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 Contour by activating another one. Go to Admin panel → Themes and click Activate on the theme you want instead.
- Contour stays installed: its files remain under
extensions/themes/contour/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 Contour card and confirm the prompt.
That deletes:
- the theme directory
extensions/themes/contour/; - its published assets under
public/themes/contour/; - its uploaded files under
storage/app/public/themes/contour/; - 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 Contour 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/contour/. 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 Contour slow because of all the animations?
No. The effects run from a single animation loop, the contour lines are drawn on a light canvas that pauses when it is off 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, Contour is a calm, warm theme; the contour lines keep drifting as part of the design.
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. Below desktop width the menu opens as a sheet with contour lines, the header hides on the way down, the collection wall and the testimonials follow your finger, and the row image previews and the cursor are only used with a mouse.