A solid, calm theme for construction companies, general contractors, design-build firms, architecture and engineering practices. Condensed uppercase titles, a utility bar with your contact details above a solid header, structured project grids, numbered service and process blocks, charcoal bands with an amber hazard stripe and almost no animation, on warm concrete surfaces by default, with a dark appearance a click away.
What Makes Keystone Special
Keystone reads like a well-run site board: your phone number in reach, your projects in strict grids, your process and credentials set out in clear, ruled blocks.
- A utility bar and a solid header. A charcoal bar carries your phone, email, opening hours, address, social links and language switcher above a solid main bar with your logo, the navigation and a call-to-action button. While visitors scroll, the utility bar slides away and the main bar stays on screen, more compact.
- A quote button in the header. When the Billing add-on is active with quote requests enabled, the header button reads "Request a Quote" and opens the quote request form; otherwise it reads "Start Your Project" and opens your contact page.
- Condensed industrial type. Big Shoulders Display sets the uppercase titles and the big numbers; IBM Plex Sans carries the text and the labels.
- Structured grids. Projects in strict photo grids with small-caps details, numbered service cards, square markers and toggles, ruled tables and rows of figures.
- Construction details. An amber and charcoal hazard stripe along the call to action, a measured grid behind the page headers, a dimension line with end ticks as a divider, a copper offset frame around the landing photo, and a letter mark with a copper notch when no logo is uploaded.
- Almost no motion. Blocks fade up lightly once as they enter the screen, numbers count up, and links and buttons react on hover. There is no intro loader, no page transition, no custom cursor and no scroll scene: pages stay fast and focused.
- Readable colors. The button color is deepened automatically when that is needed for a white label to stay readable, and the primary color used for small text is darkened until it reaches a comfortable contrast.
Keystone is a classic theme: it has no Motion & Interactions settings. It still displays the Marquee, Statement and Collection Wall sections of the interactive themes, as calm static layouts, so pages built with an interactive theme keep all their content when you switch to Keystone.
Design System
Typography
Big Shoulders Display, a condensed display face, sets the titles in uppercase, the large numbers (metrics, countdown, step and collection numbers) and the header wordmark; long titles fall back to sentence case so they stay easy to read. IBM Plex Sans carries the body copy, the navigation and the small uppercase labels.
Palette
The first three colors come from your Theme Settings; the surfaces are part of the design and adapt to the appearance.
Shapes and details
- Square corners everywhere (2px), square buttons, markers, toggles and social links.
- Short copper rules before the uppercase labels and under the titles, ruled rows and tables.
- Charcoal bands for the figures, the call to action and the countdown, and a deeper charcoal footer.
Getting Started
-
Install the Theme
Go to Admin panel → Themes, click Upload and select the Keystone
.zipfile. -
Activate Keystone
Click Activate on the Keystone card and enter your purchase code when asked. Your content is untouched: themes only change how it is displayed.
-
Fill In Your Contact Details
The utility bar, the menu on small screens, the footer and the Call to Action section read your phone, email, address and opening hours from Settings, and your social links. The more you fill in, the more useful the header becomes.
-
Set the Colors
Open Theme Settings to choose the colors, fonts, header style and layout.
-
Build Your Pages
Edit any page in Sections mode. Every section type works with Keystone; the designs are described below.
-
Configure Menus
The Header Main menu is shown in the main bar from 992px wide, with dropdowns up to three levels, and in the off-canvas menu on smaller screens. The Footer Links, Footer More and Footer Legal menus fill the footer columns.
Purchase Code (License Key)
The Keystone 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 | #c8641e |
The burnt copper: buttons, links, active menu items, rules and small marks. Buttons use a slightly deeper shade with a white label when that keeps the label readable, otherwise your color with a contrasting label. |
| Secondary color | #1f2326 |
The charcoal of the utility bar, the bands (figures, call to action, countdown, hero without a photo) and the footer, in the light appearance. |
| Accent color | #f2b33d |
The construction amber, used for small highlights: the hazard stripe, the icons of the utility bar, the underline of the figures, the footer links and the focus ring of the dark appearance. |
| Text color | #1f2326 |
The ink of the light appearance. |
| Heading and body fonts | Big Shoulders Display / IBM Plex Sans | The condensed display face for titles and numbers, the sans serif for text. Other fonts can be chosen. |
| Header styles | Sticky / Sticky | Both kinds of pages use the sticky header: the main bar stays on screen and becomes more compact after a short scroll, while the utility bar scrolls away. Transparent lays both bars over the photo of a full-width hero, in white, and lets them scroll away with the page. Default keeps the solid bars and lets them scroll away. |
| Header width and alignment | Content width, centred navigation | The bars are aligned with the content; turn on Wide Header to let them span the full width. The navigation can also be aligned to the left or the right. |
| Header colors | Empty | Background color or image, text color, button colors and bottom border of the main bar, applied to the Sticky and Default headers (the transparent header stays white over the photo). |
| Mega menu | Off | When on, the Header Main menu is shown as a mega menu in place of the dropdown navigation from 992px wide. The off-canvas menu stays the navigation of smaller screens. |
| Layout and content width | Wide, 1400px |
The wide layout limits the content to this width. The boxed layout frames the whole page in a centred column of the Container Width (1320px), with a hairline and a soft shadow around it. |
| Footer style | Default | Default is the deep charcoal footer; Dark goes near-black with an amber rule along the top edge and a copper logo mark; Minimal is a lighter, more compact footer on the stone surface with ink text (a raised dark surface in the dark appearance). The footer colors below still win over the style. |
| Footer colors | Empty | Leave empty to keep the colors of the footer style, or set your own background (color or image), title, text and link colors. |
| CTA background color | Empty | Leave empty to keep the charcoal panel of the Call to Action section. |
| Back to top | On | A square button that appears after a short scroll and takes the visitor back to the top of the page. |
Header & Footer
Utility bar
The charcoal bar above the header shows the contact details filled in under Settings: the phone number on every screen, the email from 768px wide, the opening hours and the address from 1200px wide, then your social links and the language switcher. It only appears when at least one of them is set. On phones, the social links and the language switcher move to the menu.
Main bar
Your logo (or, without one, a square letter mark with a copper notch beside your site name), the Header Main navigation from 992px wide, the cart and account links when those add-ons are active, the light / dark switch, and the call-to-action button from 768px wide. Below 992px a menu button opens an off-canvas panel with the links (sub-menus open with a plus button), the call to action, your phone, email and address, your social links and the language switcher.
Footer
A deep charcoal footer in columns: your site name, description and contact details; the Footer Links menu; the Footer More menu; the legal links (the Footer Legal menu, or the privacy and terms pages); then a newsletter form when the Newsletter add-on is active (it subscribes without leaving the page and confirms with a notification), or a "Get in Touch" block with a contact button, and your social links. The bottom bar holds the copyright line and the language switcher. The Footer style of the Theme Settings switches between the default, dark and minimal versions.
Light & Dark
Keystone opens in its light appearance: a warm concrete page, paper header and cards, charcoal ink. The moon button in the main bar switches to the dark appearance, with deep graphite surfaces, light text and near-black bands, where copper links are lightened and amber marks the focus. The choice is remembered for each visitor.
In Theme Settings → Appearance Mode you can start in dark, follow the visitor's system setting, or hide the switch to lock one appearance.
Section Designs
Every section type works with Keystone. These ones get a Keystone design:
| Section | In Keystone |
|---|---|
| Hero | A full-width project photo under a dark shade, a big uppercase headline with an amber-ruled label and your buttons. Image & Text Layout: Side by Side places the text beside the photo in a frame; Stacked places it above a wide framed photo. Without a photo, the hero is a charcoal band with a faint measured grid. Rotating titles are supported. |
| Landing Hero | A split layout: the text on one side, the photo in an offset copper frame on the other. |
| Portfolio | Filter tabs that show one category at a time, in place, over a strict grid of large project photos with small-caps details. |
| Features, Cards Grid | Numbered service cards with a square icon, and photo cards; both get a copper top rule on hover. |
| Steps | A process line with numbered square markers: horizontal on wide screens (up to six steps), vertical otherwise. |
| Timeline | A vertical spine with year markers, entries on alternating sides on wide screens (or all on one side). |
| About | A framed photo with a years-of-experience plate, the text and a ruled row of figures that count up. |
| Metrics, Countdown | Big condensed numbers with an amber underline on a charcoal band, counting up once in view; big condensed digits in ruled cells, on a charcoal band or a photo. |
| Call to Action | A charcoal panel with a thin amber and charcoal hazard stripe along its edge, the title, your button and, when a phone number is set, a "Call us" link with the number. |
| Testimonials | Quote cards with the rating and the author, in a row that scrolls with square previous / next buttons. |
| Carousel | Full-width slides that fade, with square previous / next buttons, dots and a numbered counter; with autoplay, they change on their own and pause while the visitor points at or focuses them. |
| Video | A poster with a square play button; the player loads in place on click, or starts muted once half of it is in view when Autoplay is on. |
| Gallery, Gallery + Text, Image + Text, Image | A tight square-cornered photo grid opening in the lightbox; a photo mosaic beside the text; alternating framed rows, numbered when there are several; a single photo with a copper-ruled caption. |
| Accordion, FAQ, Tabs | Ruled rows with square toggles, one open at a time unless the accordion allows several; the FAQ can show a photo. Tabs sit on an uppercase rail with a copper underline, or on a vertical rail on wide screens. |
| Team, Pricing, Comparison | Portrait cards with the name, role, short bio and square social links; ruled plan columns with the featured plan on a charcoal panel; a ruled specification table whose highlighted column is tinted in copper. |
| Blog, Events and Products previews | Three article cards with small-caps details; photo cards with a charcoal date block, the status, dates and place; the shop cards restyled. |
| Titles, Divider, Banner | An uppercase condensed title with a copper measure line, the split title with a rule, a title banner (filled, outlined or minimal) with a square icon, a title over a darkened photo (charcoal without one), and an animated title shown as a large title with a copper rule whose chosen animation only sets the direction of the fade-up; a ruled line, a dimension line with end ticks (Wave), three square marks (Dots) or empty space (Spacer); a slim notice strip (info, success, warning, danger, primary or dark). |
| Logo Bar, Contact Form, Map, Before / After | A bordered grid of client logos, or their names in condensed capitals; with the Scrolling style, a slow belt of logos that pauses while the visitor points at or focuses it; a ruled form panel beside your contact details; a framed map with a ruled contact card; the comparison slider in a square frame, or the two images side by side. |
Marquee, Statement & Collection Wall
These three sections were designed for the interactive themes. Keystone displays them as static layouts, so they can be added to your pages and keep their content when you switch themes:
| Section | In Keystone |
|---|---|
| Marquee | A ruled row of bold uppercase words separated by small amber squares, which wraps on small screens; nothing moves. Size sets large or small words. With the Alternate typography every second word is drawn as an outline; Serif italic sets the words in a lighter weight with wider spacing (Keystone has no serif face). The speed, direction and scroll options only apply to the interactive themes. |
| Statement | A large typographic statement with its label above, an optional outline button and an optional framed photo beside it. Very long statements are set a little smaller. Centred alignment applies when there is no photo. The text appears with the light fade-up: the Effect option only applies to the interactive themes. |
| Collection Wall | A structured grid of photos, each with a numbered caption (01, 02...) under a thick rule, opening in the lightbox; there is no drag canvas. Draggable wall gives four columns of portrait photos on wide screens, Grid three columns of square photos, and Tall makes the photos taller. |
Works & Projects
The works index shows a strict grid of large project photos with small-caps details, under category tabs that open each category page (when Portfolio → Show category filter is on and there are several categories), with page numbers below when needed. Each project page opens with a title block and a large cover, lists the project facts beside the story, shows the videos and comparisons, the gallery in the lightbox, and ends with links to the previous and next projects.
Add-on Pages
Pages of add-ons (blog, events, shop, help desk, account...) use the shared layouts restyled with the Keystone palette, condensed titles and square corners, in both appearances, under the stone page header with its measured grid.
Accessibility
- Visitors who ask their device to reduce motion see no fade-up, no counting numbers, no carousel or video autoplay, no scrolling logo belt and no image zoom on hover.
- Button and link colors are adjusted automatically to stay readable against their background.
- The off-canvas menu keeps the focus inside it while it is open and closes with Escape, with its backdrop or when the window becomes wide enough for the main bar.
- Tabs follow the arrow keys, Home and End; the testimonials and the carousel follow the arrow keys and can be swiped; the video poster plays with Enter or Space.
- The contact details of the utility bar carry spoken labels (phone, email, hours, address) for screen readers.
- 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 Keystone by activating another one. Go to Admin panel → Themes and click Activate on the theme you want instead.
- Keystone stays installed: its files remain under
extensions/themes/keystone/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 Keystone card and confirm the prompt.
That deletes:
- the theme directory
extensions/themes/keystone/; - its published assets under
public/themes/keystone/; - its uploaded files under
storage/app/public/themes/keystone/; - 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 Keystone 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/keystone/. 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
Where are the motion settings?
Keystone has none: it is a calm theme by design. Its only movements are the light fade-up of the blocks, the numbers counting up, the optional scrolling logo belt and the optional carousel and video autoplay, and all of them are skipped for visitors who ask their device to reduce motion.
Can I use the Marquee, Statement and Collection Wall sections?
Yes. Keystone displays them as static layouts (see Marquee, Statement & Collection Wall), and the section picker offers them while Keystone is active.
How do I change the button in the header?
It follows your add-ons: "Request a Quote" when the Billing add-on is active with quote requests enabled, otherwise "Start Your Project", which opens your contact page. Its colors can be set in the header colors of the Theme Settings.
Why is the utility bar missing?
It only appears when there is something to show: fill in a phone number, email, opening hours or address under Settings, add a social link, or install a second language.
Does the theme work on phones and tablets?
Yes. Below 992px wide the menu button opens the off-canvas menu, the utility bar keeps your phone number, the steps stack vertically and the testimonials and the carousel can be swiped.