Typography
Base type scale for product and marketing screens. Use semantic headings to preserve hierarchy, then rely on global styles to keep rhythm and color consistent.
Headings
Heading 1 - 56px
Heading 2 - 40px
Heading 3 - 28px
Heading 4 - 24px
Heading 5 - 20px
Heading 6 - 16px
Body Text
Large text - 18px
Regular text - 16px
Small text - 14px
Extra small text - 12px
Font Weights
Light - 300
Regular - 400
Medium - 500
SemiBold - 600
Bold - 700
ExtraBold - 800
Code Example
<div class="page__container">
<h1>Page Title</h1>
<p>Lead paragraph that introduces the page.</p>
</div>
</header>
<section class="page__container">
<h2>Section Heading</h2>
<p>Body copy lives at 16px. Use <small> for helper text.</p>
</section>
Keep a single H1 per page, then descend the scale in order (H2 → H6) to maintain accessibility and predictable spacing.
Forms & Validation
Form elements use the shared form-* naming to align spacing, focus rings, and error states across pages. Keep labels outside inputs, pair errors with .form-error, and toggle states with modifiers like --floating or --error.
Inputs
Floating Label Inputs (for authentication pages)
Inputs with labels that move up when focused or filled
<div class="form-input form-input--floating">
<label class="form-input__label" for="email">Email<span class="text-red">*</span></label>
<input type="email" id="email" placeholder="Email" />
</div>
</div>
Textarea
Select
Checkboxes
Radio Buttons
How to Show Validation Errors
✓ Normal Input:
<input type="email" class="form-input">
</div>
❌ Error Input (Red Border):
<input type="email" class="form-input form-input--error">
</div>
Add class: form-input--error for red border
💬 Error Message:
<input type="email" class="form-input form-input--error">
<span class="form-error">Error message here</span>
</div>
Add element: <span class="form-error"> inside .form-group
🎯 Live Demo
Range Slider
Form Skeleton (Code)
<div class="form-group">
<label class="form-label" for="email">Email</label>
<input id="email" type="email" class="form-input" placeholder="email@example.com" required>
<span class="form-error">Error copy lives here</span>
</div>
<div class="form-group">
<label class="form-label" for="message">Message</label>
<textarea id="message" class="form-textarea" rows="4"></textarea>
</div>
<div class="form-actions">
<button class="btn btn--primary" type="submit">Submit</button>
<button class="btn btn--ghost" type="button">Cancel</button>
</div>
</form>
Keep helper or error text immediately after the control; wrap logical sections in .form-group for consistent spacing.
Filter Components
Composable filter stack with range sliders, checkboxes, and helper tooltips. Structure each block with .filter__group, pair labels with .filter__label, and keep reset actions within the group header for clarity.
Price Range Filter
Code Example
<div class="filter__group">
<div class="filter__header">
<div class="filter__label">
<span>Price range</span>
<button class="filter__tooltip" aria-label="Info">?</button>
</div>
<button class="filter__reset">Reset</button>
</div>
<div class="filter__content">
<div class="filter__range-inputs">... numeric inputs ...</div>
<div class="range-slider">... dual handles ...</div>
</div>
</div>
</aside>
Wire sliders with your preferred JS (we use the dual-handle slider in filter.js) and keep currency/unit markers outside the inputs for better validation.
Page Structure
Layout primitives that keep headings, gutters, and page chrome aligned. Start each page with .page__header for title context, then wrap content in .page__container to control max-width and padding.
Example Layout
Example Page Title
A short introduction to set expectations for the page.
Content Block
Wrap sections, cards, and filters inside .page__container to maintain consistent gutters.
Global Page Classes
Reusable CSS classes for consistent page layouts.
.page__header
PAGE HEADER
<div class="page__container">
<h1>Page Title</h1>
</div>
</div>
.page__container
CONTENT CONTAINER
<p>Your page content</p>
<div class="your-component"></div>
</div>
Icons
SVG sprite that powers every glyph across the product. Reference icons with a <use> tag that points to /assets/icons/MAIN_SPRITE.svg#icon-name; size and color inherit from the surrounding text.
Glyph Set
All sprite symbols rendered in a responsive grid.
Code Example
<svg width="24" height="24" aria-hidden="true">
<use href="/assets/icons/MAIN_SPRITE.svg#icon-download"></use>
</svg>
<!-- Icon inside a button -->
<button class="btn btn--primary">
<span class="btn__icon">
<svg width="16" height="16">
<use href="/assets/icons/MAIN_SPRITE.svg#icon-check"></use>
</svg>
</span>
Save
</button>
Add aria-hidden="true" when icons are decorative; otherwise pair the glyph with visible text or an aria-label.
Table
Responsive table patterns for catalog and document listings. Use the base .table class for simple grids, and add the .table--expandable modifier plus data-expand-target/data-expand-content pairs for nested details. Colspans are intentionally applied on detail rows to keep cell widths aligned with the desktop design spec.
Simple Data Table
| Brand | Code | Name | Price | Stock | Actions |
|---|---|---|---|---|---|
| 555 | 0 261 231 046 | Rod/strut, stabiliser | 1999.79 € | 2 | |
| ABAKUS | 0 241 229 612 | Gas Spring, rear window | 3.38 € | 4 | |
| ABE | 0 261 231 046 | Brake shoe set, parking brake | 13.52 € | 4 |
|
| BMW | 1 987 946 011 | Rod/strut, stabiliser | 8.07 € | 4 |
Expandable Nested Table (Orders)
Table with expandable rows showing order details
Code Example
<table class="table">
<thead>...</thead>
<tbody>
<tr><td>Cell</td>...</tr>
</tbody>
</table>
<!-- Expandable table -->
<div class="table table--expandable">
<table>
<tbody>
<tr class="table__master-row">
<td class="table__expand-cell" data-expand-target="row-1">Order 001</td>
</tr>
<tr class="table__detail-row">
<td colspan="6">
<div class="table__expand-content" data-expand-content="row-1">
...nested content...
</div>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript toggles the detail rows by matching data-expand-target and data-expand-content. Keep dropdown actions inside the master row.
Order Card (Mobile)
Collapsible mobile-first summary card that mirrors the desktop expandable table. Toggled entirely via data attributes and shared SCSS tokens so state changes stay in sync across pages.
Live Preview
ORDER NUMBER 001 27.01.2025
Set oil-filter element
Overview
Mobile-first collapsible card used on My Orders, Cancelled Orders, Order Changes, Shipped Orders, and Statement of Accounts. Visibility is controlled by .visible-md and [data-expanded] attributes; no inline styles are required.
- Root:
.order-cardwith optionaldata-expanded="true|false". - Header:
.order-card__headerwith label/value pairs and.order-card__expand-triggerbutton. - Body:
.order-card__contentwraps details, nested order numbers, items, and actions. - States:
[data-order-number-expanded]and[data-invoice-section-expanded]drive nested toggles. - Shared tokens: labels use
%order-card-label; row gutters use%order-card-row(seeorder-card.scss).
Example Markup
<div class="order-card__header">
<div class="order-card__header-content">
<span class="order-card__header-label">INCOMING<br>ORDER NUMBER</span>
<span class="order-card__header-value">001</span>
</div>
<button class="order-card__expand-trigger" aria-expanded="true" aria-label="Expand">...arrow svg...</button>
</div>
<div class="order-card__content">
<div class="order-card__order-number" data-order-number-expanded="true">
<div class="order-card__order-number-row">...</div>
<div class="order-card__order-number-content">
<div class="order-card__items">...item cards...</div>
<div class="order-card__details">...rows...</div>
<div class="order-card__actions">
<button class="order-card__action-btn">Save to PDF</button>
<button class="order-card__action-btn">Save to Excel</button>
</div>
</div>
</div>
</div>
</div>
JS hook: initOrderCards() wires expand/collapse and sets aria-expanded. Visibility of content is handled purely via the data attributes in CSS.
Notifications & Banners
Centralized messaging components: stacked alerts managed by notificationManager, persistent cookie banners, and smart tooltips bound to data-tooltip attributes.
Alert Notifications (Top Right)
These appear in the top-right corner and auto-dismiss after 5 seconds
Static Examples (Demo Only):
⚠️ These are static HTML examples for demonstration. In production, notifications are created dynamically via JavaScript API.
Successfully Saved.
Price change for one of the items in your order.
We can't calculate your order.
Cookie Consent Banner (Bottom Right)
Fixed position banner for cookie consent - shown below in its actual position
Smart Tooltip
Hover or focus to show tooltip. Auto-positioned to avoid viewport edges.
Static Tooltip Example:
Tooltip
Select the calendar of days you are ready to expect delivery.
Code Examples
window.notificationManager.success('Added to cart', 'Success');
window.notificationManager.warning('Price changed for item', 'Price change');
window.notificationManager.error('Could not calculate order', 'Calculation error');
// Tooltips (auto-initialized on elements with data-tooltip)
<button class="tooltip-trigger"
data-tooltip="Select delivery dates"
data-tooltip-title="Delivery help">
...? icon ...
</button>
// Cookie banner toggle
const banner = document.querySelector('.banner-cookie');
banner.style.display = 'flex'; // show
banner.style.display = 'none'; // hide
Notifications auto-dismiss after 5s; pass { duration: 0 } to keep them persistent.
Modal Dialogs
Universal modal system with small, medium, and large shells. Initialize via data-modal attributes or the Modal class, and control dismissal with data-modal-close, backdrop settings, and ESC handling.
Overview
Universal modal component with smooth animations, flexible sizes, and optional elements.
Usage:
<!-- Modal Structure -->
<div id="myModal" class="modal-overlay" data-modal>
<div class="modal modal--md">
<div class="modal__header">
<h2 class="modal__title">Title</h2>
<button class="modal__close" data-modal-close>×</button>
</div>
<div class="modal__body">
<p>Content</p>
</div>
<div class="modal__footer">
<button class="btn btn--ghost" data-modal-close>Cancel</button>
<button class="btn btn--primary">Confirm</button>
</div>
</div>
</div>
<!-- Trigger Button -->
<button data-modal-open="myModal">Open Modal</button>JavaScript API:
const modal = new Modal({
id: 'myModal',
closeOnBackdrop: true,
closeOnEscape: true,
onOpen: () => console.log('opened'),
onClose: () => console.log('closed')
});
modal.open();
modal.close();
modal.toggle();Data Attributes & Auto-init
<div id="modalExample" class="modal-overlay" data-modal data-modal-close-on-backdrop="false">...</div>
<button data-modal-open="modalExample">Open modal</button>
<!-- JS (auto runs in main bundle) -->
document.addEventListener('DOMContentLoaded', () => {
// Modal auto-init scans for [data-modal] and wires matching triggers.
});
Add data-modal-close to any element inside the modal to close it. Use data-modal-close-on-backdrop=\"false\" or data-modal-close-on-escape=\"false\" to lock the dialog for critical flows.
Colors
Color tokens for brand, functional states, grays, and utilities. Use the SCSS variables in components, or drop the provided utility classes when you need quick overrides.
Brand Colors
Functional Colors
Gray Scale
Text Colors
Background Colors
Utility Classes - Text Colors
Quick utility classes for text colors. All classes use !important for maximum specificity.
Utility Classes - Background Colors
Quick utility classes for background colors. All classes use !important for maximum specificity.
Code Example
$color-brand-blue: #2b2d42;
$color-brand-red: #ef233c;
$color-gray-200: #e8eaed;
// Component usage
.banner {
background: $color-brand-blue;
color: $color-white;
}
// Utility classes
<p class="text-muted">Secondary text</p>
<div class="bg-warning-light">Banner copy</div>
Prefer variables in SCSS modules; lean on utilities for one-off adjustments without introducing new CSS.