Design System
01 — Buttons
Buttons
Variants
Sur fond dark
Tailles
02 — Badges & Tags
Badges & Tags
Badges
Tags
Status
Status pills
Compact, sentence-case pills for in-context status indicators. Slot an <Icon> before the label — the badge auto-spaces via gap-1.5.
03 — Alerts
Alerts
04 — Cards
Cards
Shadow Card
With shadow-card and hover lift effect.
Bordered Card
With base-300 border, no shadow.
Filled Card
With base-200 background fill.
05 — Form Inputs
Inputs
Helper text goes here
06 — Icons
Icons
Two icon sets are used across the site. Pick the one that matches the visual weight you need.
Sizes
h-4 w-4
16px — inline
h-5 w-5
20px — default
h-6 w-6
24px — card header
h-8 w-8
32px — decorative
h-16 w-16
64px — illustration
Color Variants
base-content
primary
base-content/20
success
warning
error
Primary set: Streamline Plump Color
Colorful, multi-color filled icons — use these as the default across the site.
Usage: <Icon name="streamline-plump-color:icon-name" class="h-5 w-5" />
3d-coordinate-axis
application-add
arrow-expand
arrow-right-circle-1
arrow-right-circle-2
arrow-turn-down-large
bag-suitcase-4
block-1
broken-link-2
building-office
bus
cake-slice
check-thick
circle-and-square-shape
circle-clock
code-monitor-2
cog
crop-selection
dashboard-1
delete-keyboard
download-box-2
dumbell
earth-1
exit-full-screen
eye-optic
file-folder
file-search
gallery-2
government-building-1
graph-bar-increase
hand-held
heart-rate-pulse-graph
hierarchy-1
home-1
horizontal-menu-circle
hot-air-balloon
information-circle
layers-1
lightbulb
lightning-cloud
like-1
location-pin
mail-send-email-message
map-fold
module
multiple-file-1
one-finger-tap
padlock-key
paint-palette
pen-tool
pencil-circle
quotation-2
recycle-bin-2
ringing-bell-notification
rotate-left
search-visual
share-link
shield-1
shopping-cart-add
star-medal
store-2
synchronize
target-3
task-list-edit
trending-content
upload-box-1
warehouse-1
warning-diamond
wrench-circle
Secondary set: Lucide (classic iconography)
Classic, single-color UI iconography (chevrons, close, menu, etc.) — use when Streamline Plump Color would feel too strong.
Usage: <Icon name="lucide:icon-name" class="h-5 w-5" />
menu
x
chevron-down
chevron-right
arrow-right
arrow-up-right
info
circle-check
circle-x
triangle-alert
sparkles
search
plus
minus
external-link
phone
calendar
clock
settings
07 — Section Container
Section Container
Layout wrapper: <DsSectionContainer bg="bg-base-200/50" max-width="max-w-4xl" center />
Default — max-w-7xl, py-24 (reduced here), left-aligned
Centered — max-w-4xl, bg-base-200/50, text-center
08 — Page Hero
Page Hero
Centered hero banner with optional badge, title (slot), subtitle, and CTA. Used on all pages except home.
Build an online store that
drives revenue
A turnkey solution for launching your online store with modern tooling.
08b — Home Hero
Home Hero
Split hero with left-aligned copy and right-side image/illustration. Used on the homepage only.
Stop managing
your tech
Start growing
your business
You have a real business challenge. We turn it into a product that performs.
09 — Content + Image Section
Content + Image Section
Two-column alternating layout with badge, title, tagline, body, and image placeholder.
Image left (default)
Ownership
Full ownership from day one
Your code, your infrastructure, your data.
We hand over the source code, the hosting credentials, and the deployment pipeline. No vendor lock-in.
- Open-source stack
- Self-hosted infrastructure
- Complete documentation
Image right
Modern tooling
Built with the right tools
Best-in-class frameworks for every layer.
We pick the technology that fits your project — not the other way around. From headless CMS to custom APIs.
- Nuxt / Next.js / Astro
- Headless CMS integration
- API-first architecture
10 — Feature Grid
Feature Grid
3-column grid of features. Two variants: icon (default) and divider.
Icon variant (default)
Clarity
See the full picture
Comprehensive audit covering strategy, technology, and user experience.
Dual View
Business meets tech
We bridge the gap between business goals and technical implementation.
Decisions
Act with confidence
Actionable recommendations prioritised by impact and effort.
Divider variant
Performance
Sub-second load times with optimised assets and edge delivery.
Mobile-first
Responsive layouts that look great on every screen size.
Security
HTTPS, CSP headers, and dependency auditing out of the box.
11 — Cross-Sell Banner
Cross-Sell Banner
Horizontal banner linking to a related service or solution page.
Looking for e-commerce?
We also build high-converting online stores on Shopify and custom platforms.
12 — CTA Card
CTA Card
Final call-to-action card with spring entrance animation.
Ready to build something great?
Tell us about your project and get a free estimate within 48 hours.
Start your project13 — Project Card
Project Card
Horizontal card with image, category badge, title, description, tags, and CTA link. Alternates image direction.
Image left (default)
Image right
14 — Solution Card
Solution Card
Centered card with icon circle, title, subtitle, description, and CTA button.
Real estate
Show better, sell faster
Buying property is a big decision. We build the digital tools that make it easier for your clients to choose.
See moreE-commerce
Built to sell, designed to grow
Most e-commerce projects fail because they start with technology instead of strategy. We do it the other way around.
See more15 — Testimonial Card
Testimonial Card
Quote card with quote icon, testimonial text, and author info with initials avatar.
"They understood our needs perfectly and delivered a product that exceeded all expectations."
Jane Doe
CTO, Acme Corp
"The team was responsive, professional, and truly cared about the quality of the final product."
John Smith
Founder, Startup Inc
"Working with them felt like having an in-house team. Communication was seamless throughout."
Alice Martin
Product Manager, TechCo
16 — Image Carousel
Image Carousel
Swipeable image carousel with two variants: landscape (default) and phone (3-device peek layout).
Landscape (default)
Phone
17 — Project Section
Project Section
Full-width project detail section with title, tags, paragraphs, CTA, and media slot (carousel or placeholder). Alternates image direction.
Image left (default)
Project Alpha
A cloud-based platform for managing team workflows with real-time collaboration and automated reporting.
The platform integrates with existing tools and provides role-based access control for enterprise teams.
Image right, shaded background
Project Beta
A companion mobile app designed around simplicity, translating complex data into clear well-being indicators.
Getting started requires no technical skill — a device to plug in, an app to open, pairing in minutes.
18 — Logo Carousel
Logo Carousel
Infinite scrolling logo strip. Logos are greyscale by default, full color on hover. Pauses on hover.
Single row
Double row (used on home page)
19 — Service Card
Service Card
Centered card with title, description, and optional CTA link. Used in the services orbit on the homepage.
20 — Tab Navigation
Tab Navigation
Pill-style tab bar with route-based active state. Used in app pages (design system, etc.).
21 — Headers
Headers
Site navigation header and app header bar. The site header is the main AppHeader used on all public pages. The app header (DsAppHeader) is a thin top bar for fullscreen app pages.
Site navigation (AppHeader)
App header — basic (title only)
Finish SelectorApp header — with actions
Plan EditorApp header — with breadcrumb sub-header
For app-level trails driven by runtime state (tree navigation, wizards), render DsBreadcrumb in a sub-header strip. Each item can be a link (to), a button (onClick), or a plain label (neither — useful for a non-navigable project/context prefix).
Alven AppApp header — with breadcrumb, full site nav drawer + CTAs
Pass a breadcrumb array to render an inline breadcrumb trail on desktop. On narrow viewports (<lg) it collapses to the current page label plus a burger button. The drawer exposes two slots: #mobile-nav (the complete site navigation — drop in <AppMobileSiteNav /> for the standard nav) and #mobile-cta (page-specific actions, rendered under a divider). The drawer supports ESC, click-outside, route-change close, body scroll lock, and focus return.
Alven Tech22 — OG Image Templates
OG Image Templates
Satori-rendered templates used for Open Graph preview images (1200 × 630). Sizes use cqw units so this preview scales pixel-perfectly with the Satori output. Edit sizes here and in app/components/OgImage/*.satori.vue together.
Without image — title + subtitle + description
Alven Tech We build digital products
that drive growth
Websites, mobile apps, and custom software for ambitious businesses.
With presentation image
Alven Tech Plan Selector
Aerial — Remote Care