Overview
Olive is a premium Larapen CMS theme designed around muted earth-tone aesthetics. It features a carefully curated palette of sage green, terracotta, and clay accents set against a warm cream background, creating an organic, inviting atmosphere for your website.
The theme uses premium typography with Outfit for headings and Satoshi for body text, loaded via the Fontshare API. Every visual element, from rounded corners to warm-toned shadows, contributes to the theme's distinctive organic feel. With 42 sections, 20 page templates, and full dark mode support with warm tones, Olive adapts beautifully to any type of website while maintaining its earthy character.
Key Features
- Transparent Header: The header elegantly overlays your content, creating a seamless visual experience that blends navigation with hero sections.
- Premium Typography: Outfit headings paired with Satoshi body text via Fontshare API deliver a clean, modern reading experience with warmth.
- Earth-Tone Palette: Sage green, terracotta, and clay accents against a warm cream background create an organic, nature-inspired aesthetic.
- 42 Sections: A comprehensive library of beautifully designed sections ready to combine into any page layout.
- Warm Dark Mode: Dark mode uses warm dark tones instead of pure black, maintaining the organic feel.
- Add-on Ready: Full support for all Larapen add-ons with 20 page templates.
Design Details
Typography
- Outfit: Modern, rounded sans-serif for headings. Loaded from Google Fonts.
- Satoshi: Clean, geometric sans-serif for body text. Loaded via the Fontshare API (free, no API key required).
- Base font size: 16px.
Color Palette
| Color | Hex Code | Usage |
|---|---|---|
| Sage Green | #7c8c6e | Primary color for buttons, links, and accents |
| Terracotta | #c67a5c | Secondary color for highlights and call-to-action elements |
| Clay | #a0845c | Accent color for decorative elements and badges |
| Warm Cream | #faf8f5 | Background color |
| Sage Light | #9aab8b | Lighter variant of sage green |
| Sage Dark | #5e6b53 | Darker variant for hover states |
| Terracotta Light | #d9987f | Lighter variant of terracotta |
| Terracotta Dark | #a85e42 | Darker variant for active states |
| Text Primary | #3d3a36 | Main body text |
| Border | #e5e0d8 | Borders and dividers |
All colors in the Olive palette are deliberately muted and desaturated, creating the organic, matte feel that distinguishes the theme. Avoid adding highly saturated or neon colors, as they will clash with the earth-tone aesthetic.
Customization
Navigate to Admin Panel → Appearance → Theme Settings to customize these options:
- Primary Color: Defaults to Sage Green (#7c8c6e). Used for buttons, links, and accents.
- Secondary Color: Defaults to Terracotta (#c67a5c). Used for highlights and call-to-action elements.
- Accent Color: Defaults to Clay (#a0845c). Used for decorative elements and badges.
- Background Color: Defaults to warm cream (#faf8f5). Can be adjusted to any warm tone.
- Layout Style: Wide (1250px container) by default.
- Header Transparency: Enable or disable the transparent header overlay.
- Dark Mode: Toggle warm-toned dark mode support.
Olive uses CSS custom properties prefixed with --ol- for easy customization. You can override these in
your custom CSS to adjust the theme without modifying core files.
Transparent Header
The Olive theme features a transparent header that sits on top of your page content rather than pushing it down, creating a sophisticated, full-screen feel where hero sections extend to the very top of the viewport.
- The header starts fully transparent with white text on dark backgrounds.
- As the user scrolls, the header gains a warm cream background with a subtle shadow.
- Navigation links transition from white to the theme's text color.
- The logo can have separate light/dark variants for each state.
- The transition is smooth and uses CSS transitions for a polished feel.
You can disable the transparent header in Theme Settings and use a standard solid header instead. When using the transparent header, start pages with a hero section that has a background image or dark color so the white header text remains visible.
Page Templates
Core Templates
| Template | Purpose |
|---|---|
| Page | Standard content pages |
| Sectioned | Section-based landing pages |
| Contact | Contact form with map |
| Portfolio | Portfolio gallery and detail |
| Team | Team member showcase |
| FAQ | Frequently asked questions |
| Partners | Partner/client logos |
| Pricing | Pricing plans and tables |
| Quote Request | Quote/estimate request form |
| Account | User account pages |
Add-on Templates
| Template | Add-on |
|---|---|
| Booking | Booking add-on |
| Careers | Careers add-on |
| Classified | Classified add-on |
| Envato | Envato add-on |
| Events | Events add-on |
| Forum | Forum add-on |
| Glossary | Glossary add-on |
| Help Center | Help Center add-on |
| Licenses | Licenses add-on |
| Shop | E-shop add-on |
Content Sections
Olive includes 42 sections that are the building blocks of your pages. Use the Sectioned page template in the admin panel to drag and arrange sections in any order. Each section is designed with Olive's earth-tone aesthetic, featuring rounded corners (0.625rem), warm shadows, and organic spacing.
Section categories include:
- Hero: Banner, Slider, Video, Split
- About: About, About Extended
- Features: Grid, Icons, List
- Services: Services, Services Detailed
- Portfolio: Grid, Masonry, Carousel
- Team: Grid, Carousel
- Testimonials: Cards, Carousel
- Pricing: Tables, Toggle
- FAQ: Accordion, Two-Column
- Partners: Logo Grid, Carousel
- Contact: Form, Split
- CTA: Call To Action, Banner, Newsletter
- Stats: Counter, Highlight
- Timeline: Timeline, Process Steps
- Gallery: Grid, Lightbox
- Blog: Latest, Featured
- Utility: Map, Content Block, Divider, Spacer, Custom HTML
Sections alternate between the warm cream background and a slightly darker cream for visual rhythm.
Footer
The footer uses a 4-column layout with warm styling. It includes brand information with logo and social media links, navigation links from configurable menu groups, and a bottom bar with copyright text, language switcher, and bottom navigation links. The footer uses a warm-toned dark background (not pure black) that complements the earth-tone palette.
Dark Mode
Unlike themes that use pure black for dark mode, Olive uses warm dark tones that feel natural and cohesive with the earth-tone palette.
| Element | Color |
|---|---|
| Background | #1e1c1a |
| Surface | #2a2725 |
| Border | #383432 |
| Text | #e8e2db |
- Respects the user's system preference via
prefers-color-scheme. - A manual toggle is available in the header navigation.
- Preference is saved to local storage and persists across visits.
- All 42 sections have dedicated dark mode styles.
- Images can optionally have reduced brightness in dark mode for eye comfort.
- The sage green, terracotta, and clay accent colors are slightly brightened in dark mode for adequate contrast.
Responsive Design
Olive is fully responsive and mobile-first. All 42 sections, page templates, and the transparent header adapt gracefully from mobile to desktop viewports. The header collapses to a mobile menu on smaller screens, and grid layouts stack vertically for an optimal viewing experience.
Add-on Support
Olive includes styled templates for all major Larapen add-ons. When an add-on is activated in the admin panel, Olive's styled templates are automatically used. Each add-on template follows the earth-tone aesthetic with consistent typography, rounded corners, and warm shadows.
Supported add-ons include Pages, Portfolio, Team, FAQ, Partners, Pricing, Blog, Shop, Booking, Careers, Events, Forum, Help Center, and Glossary. For add-ons not listed, the system falls back to the add-on's default views, which still work but may not match the earth-tone aesthetic exactly.