Overview
Technology is a dark-mode-first theme built for tech companies, startups, and developers. It embraces a dark-first design philosophy with an OLED-friendly color palette, blue glow accents, and a typeface stack that blends geometric headings with efficient body text and a distinct monospace font for code and labels.
With 42 reusable sections, 22 page templates, and the leanest build of any Larapen theme (25 SCSS files, 5 JS files), Technology delivers a striking visual identity while maintaining fast load times and easy maintenance.
Key Features
- Dark-Mode First: The primary design uses a rich dark palette with elevated surfaces. Dark is the default; light mode is secondary and fully supported.
- Glow & Gradient Effects: Subtle blue glow effects on interactive elements and gradient highlights add depth without overwhelming the content.
- Monospace Accents: Fira Code is used for labels, badges, metadata, and code blocks, reinforcing the developer-forward aesthetic.
- OLED-Friendly: The base dark color (#111119) is nearly black but avoids pure black, reducing OLED smearing while preserving deep contrast.
- 42 Reusable Sections: Build pages from 42 pre-designed sections covering heroes, features, CTAs, pricing, testimonials, galleries, and more.
- Leanest Build: With only 25 SCSS files and 5 JS files, Technology is the leanest theme in the collection.
- Surface Level System: Layered surfaces create visual depth without relying on shadows.
- 22 Page Templates: Dedicated templates for all core pages and add-ons.
Design Details
Typography
The Technology theme uses three carefully chosen fonts to create a distinctive tech-forward identity:
| Font | Usage | Details |
|---|---|---|
| Space Grotesk | All headings | Geometric and tech-forward with distinctive character shapes |
| Inter | Body text | Modern and highly legible at all sizes, optimized for screen reading |
| Fira Code | Code, labels, badges, metadata | Adds the developer/terminal aesthetic throughout the theme |
Each font can be changed in Theme Settings.
Color Palette
| Color | Hex Code | Usage |
|---|---|---|
| Primary / Arctic Blue | #3b82f6 | Primary interactive color, glow effects, and gradient highlights |
| Secondary / Blue | #2563eb | Secondary buttons and accents |
| Accent / Deep Blue | #3159a1 | Deeper accents and hover states |
| Dark / Background | #111119 | Page background (OLED-friendly near-black) |
| Surface Level 1 | #18181f | Cards, panels, code blocks |
| Surface Level 2 | #222230 | Nested cards, dropdowns, hover states |
| Elevated | #2a2a3a | Modals, popovers, top-level overlays |
All colors use CSS custom properties prefixed with --tc-. Changing the primary color in Theme Settings
automatically updates all glow effects, gradients, borders, hover states, and focus rings across all components.
Surface Level System
The theme uses layered surfaces to create visual depth without relying on shadows. Each level is a slightly lighter shade of the base dark color, allowing you to visually distinguish nested elements.
| Level | Color | Usage |
|---|---|---|
| Base | #111119 | Page background, body |
| Surface 1 | #18181f | Cards, panels, code blocks |
| Surface 2 | #222230 | Nested cards, dropdowns, hover states |
| Elevated | #2a2a3a | Modals, popovers, top-level overlays |
Customization
All visual aspects can be configured from the admin panel under Appearance → Theme Settings. Changes apply immediately without needing to rebuild anything.
- Primary, secondary, and accent colors
- Heading, body, and monospace fonts
- Layout width and container style
- Header style (sticky or static)
- Dark mode default and toggle behavior
- Glow effect intensity
Glow & Gradient Effects
The Technology theme uses subtle blue glow effects to draw attention to interactive elements and gradient highlights for visual emphasis.
- Hover States: Cards, buttons, and links gain a subtle glow on hover for interactive feedback.
- Active/Focus States: Form inputs and interactive elements show a glow ring when focused.
- Hero Backgrounds: Radial gradient glows create ambient light effects behind hero content.
- Gradient Text: Key headings use a blue gradient fill for a striking visual accent.
Glow intensity levels range from subtle (20px spread) to medium (40px) to strong (60px).
Monospace Accents
Fira Code is used throughout the theme to reinforce the developer/terminal aesthetic:
- Section Labels: Small uppercase labels above section headings use Fira Code for a terminal-inspired feel.
- Badges & Tags: Category tags, status badges, and metadata chips all use the monospace font.
- Code Blocks: Inline code and fenced code blocks use Fira Code with ligature support enabled.
- Counters & Numbers: Stat counters and numeric values use monospace for a data-driven appearance.
Page Templates
The Technology theme includes 22 page templates for the core platform and all supported add-ons. Each template follows the dark-mode-first design language.
Available templates: Page, Full-Width, Sectioned, Portfolio, Contact, Blog, Shop, FAQ, Pricing, Team, Partners, Events, Booking, Careers, Classified, Forum, Glossary, Help Center, Licenses, Account, Quote Request, and Envato.
Content Sections
Build landing pages by combining any of the 42 pre-designed sections. Each section is responsive and follows the Technology design system. Use the "Sectioned" page template in the admin panel to drag-and-drop sections.
Sections include hero variants (Default, Split, Video, Animated), features (Grid, List, Alternating), about and services, portfolio (Grid, Masonry, Carousel), testimonials, pricing (Table, Toggle), CTAs and newsletter, stats (Counter, Bar), timeline and process steps, FAQ (Accordion, Two Column), contact forms, partner logos (Logo, Marquee), galleries (Grid, Lightbox), maps and video, tabs and accordion content, and unique Technology sections like Code Showcase and Terminal Block.
Sticky Header
The Technology theme uses a fixed-position header that stays visible as users scroll. It uses a translucent backdrop with blur for a modern, polished feel.
| Property | Value | Description |
|---|---|---|
| Position | Fixed | Stays at the top of the viewport at all times |
| Height | 72px | Space for logo, navigation, and action buttons |
| Backdrop | blur(16px) | Frosted-glass effect that lets content show through |
The header automatically collapses to a hamburger menu on mobile screens with a smooth off-canvas slide-in animation.
Dark Footer
The footer uses the darkest surface level to anchor the page, with a multi-column layout for navigation, social links, and legal information. It includes optional newsletter signup integration when the Newsletter add-on is active, and a compact bottom section with copyright, legal links, and language switcher.
Dark Mode
Unlike other themes where dark mode is optional, Technology is designed dark-first. The dark palette is the primary experience, and the light variant is built on top of it.
- Why Dark First: Tech audiences prefer dark interfaces. Dark mode reduces eye strain, looks professional on developer screens, and makes glow effects more impactful.
- Light Mode Support: A complete light mode is included and can be toggled by visitors. All surfaces, text colors, and effects have light-mode equivalents.
- OLED Friendly: The base background uses #111119 instead of pure black to prevent OLED smearing artifacts while maintaining deep contrast.
- Admin Toggle: Configure whether dark mode is the default, whether visitors can toggle it, and whether to respect the user's system preference.
The theme uses Bootstrap's data-bs-theme attribute for dark/light toggling. Dark mode requires no
attribute (it is the default). Light mode is activated by setting data-bs-theme="light".
Responsive Design
Every section, template, and component is fully responsive with a mobile-first approach. The header collapses to a hamburger menu, grids reflow to single columns, and touch targets are sized appropriately for mobile devices.
Add-on Support
The Technology theme includes pre-built views for all Larapen add-ons. Each add-on template follows the dark-first design with glow effects and monospace accents.
Primary add-ons with dedicated designs include Blog, Shop, Portfolio, FAQ, Pricing, and Team. Additional add-on templates are provided for Events, Booking, Careers, Classified, Forum, Glossary, Help Center, Licenses, Partners, and Newsletter.