Single source of truth for colours, typography, and components. Anything displayed here is safe to use in production.
Every colour, space, and radius defined once. Consume via var(--name).
Font family: Outfit, system fallback. Monospace: JetBrains Mono.
Body paragraph — 16px regular. Inline link inside prose. Bold text and italic text and inline code and Ctrl+K keyboard shortcut and highlighted text.
Small text — 14px muted for less important information.
Inline SVGs without explicit width/height inherit 1em sizing, matching the surrounding text. Override per-context where an icon needs to be larger or smaller.
"FlecBase turned our paper prestart checklists into a digital system overnight. The team just… uses it." — Happy customer, probably.
php artisan migrate --force
git pull && fb-deploy
curl -X POST https://api.flecbase.com/v1/sync| Channel | Status | Count |
|---|---|---|
| auth.register | Success | 42 |
| auth.login | Success | 1,284 |
| tenant.user.invite | Pending | 3 |
A bordered container for grouped content. Hover for the accent border.
Separating title area with a background strip.
Head to app.flecbase.com and click Sign Up. Fill in your details and choose a workspace name.
Download the APK and install. Android will ask you to allow installation from this source — that's normal.
Horizontal pill chain with arrows — for showing data flow or sequence. Use .workflow-chain-step--accent to emphasise a key step.
Named end-to-end workflow with distinct stages (office → field → office outcome).
Admin creates Organisation, links People (drivers), creates Assets (vehicles), attaches prestart templates.
Driver opens the app, navigates to their assigned vehicle, completes the prestart checklist.
Admin sees the prestart completion in the CRM. Failed items flagged. Photos attached.
Invite your team, set roles, and get devices connected.
Employees, contractors, customers, contacts.
Companies, clients, suppliers, branches.
Vehicles, equipment, buildings, tools.
Role/feature matrix with ✓ and ✗ cells. Stays readable on narrow screens via a scroll wrapper.
| Capability | Owner | Admin | Staff | Field User |
|---|---|---|---|---|
| Access CRM | ||||
| Access mobile app | ||||
| Manage team |
Stacked Q&A. Wrap each item in <details> for click-to-expand behaviour (no JS needed).
This one opens on click using just the browser's native <details> element. No JS, no library. The + turns into − when open.
Plain FAQ item with no collapse. Use this style when you want all answers visible at once.
Prev/next navigation between docs pages. Drop at the bottom of each doc. Omit one side to show a single centred card.
Teal-tinted section for post-step follow-ups. Softer than .alert-success — use for "now that you've done this, here's what's next" content.
Marketing primitives used at flecbase.com. Each demo below uses the real class names — nothing bespoke to the style guide.
Applied globally on marketing pages via .site-nav-fixed on the outer wrapper. Adds a blurred, sticky top bar. When the page starts with a hero, pair with .hero--with-nav-offset so the hero content isn't hidden behind the bar.
.section wraps a horizontal band — vertical padding, centered content, constrained to --container-wide. Use .section--narrow to drop to --container-narrow. .section--bleed is the full-width variant (edge-to-edge background, content still centered via a nested container). Always pair with .section-header for centered title + subtitle.
Short lede explaining the section's purpose.
Capture data in the field without signal. Sync when you're back in range.
Web dashboard updates the moment a field user hits sync.
Define your own attributes per entity. No schema migrations.
Landing "how it works". For the vertical, docs-style version see .step in Components.
Create a workspace in under a minute.
Get the mobile app onto your Android devices.
Field users work offline, sync when ready.
Web dashboard surfaces everything captured.
Sign up in under a minute — no credit card required.
Lightweight callout for pre-release notes, interest forms, secondary CTAs.
We're building iOS next. Leave your email to be notified when it lands.
Three active layout patterns. Each is a combination of the components above.