Style guide

Elevate B2B

A dark product site: one near-black surface, one grey hairline for every edge, white as the only accent and a single green for what is live. DM Sans carries every size, so the display sizes are told apart by weight and tracking alone.

Variables
--el-*
Defined in
app/demo/elevate-b2b/elevate.css
Values
Read live from that file, so this page always matches it.

Colour

The whole palette, grouped by the job each colour does. Components only paint with these.

Surfaces

--el-bg
The page, and every band, card and field on it
--el-bg-2
The outline button's hover
--el-bg-3
The selected hero tab

Ink

--el-fg
Headings, labels and anything read first
--el-ink
Body copy
--el-placeholder
Field placeholders

Accent

--el-fill
The primary button
--el-on-fill
Its label

Lines and fields

--el-line
Every edge on the site
--el-line-bar
The bar's bottom rule, a shade off the rest
--el-line-input-hover
A field's border on hover
--el-line-hover
A field's border on focus, a hero tab's on hover
--el-focus-ring
The halo round a focused field

Signal

--el-green
The launch badge's text
--el-green-bg
The launch badge's fill
--el-dot
The live dot in the hero badge
--el-dot-ring
Its halo

Typography

The ramp, largest first. Each class sets its own face, size, leading, weight and tracking, and the display sizes step down at the breakpoints.

Display.el-6xl

Unlock the Full Experience

Display 5xl.el-5xl

Choose your perfect plan

Heading 4xl.el-4xl

Page Not Found

Heading 3xl.el-3xl

Department of Justice Tablet

Heading 2xl.el-2xl

Analytics in real time

Heading xl.el-xl

Pay once, unlock everything

Lead.el-large

Take your FiveM roleplay experience to the next level.

Body.el-base

Access reports, records, and key data whenever you need them.

Small.el-small

Essential tools for small departments.

Corners

Every radius in the template. Nothing rounds on a value of its own.

--el-radius
Buttons, the email field, the hero tabs, the tags. 0, as in the original
--el-radius-pill
The hero badge

Spacing

The page rhythm. These step down at the breakpoints, so the readings follow the window. Each bar is drawn at its real length.

--el-section
Above a band, and below it on a phone
--el-gap
Between blocks in a band
--el-gutter
Page edge
--el-container
The widest a column gets

Motion

How long things take and how they ease. Hover a row to run it: durations on the house ease, easings on one duration long enough to show the curve.

Durations

--el-dur-fast
The footer's social marks
--el-dur-hover
Link colour, the FAQ question
--el-dur
Buttons, the email field, the logo
--el-dur-slow
The hero tabs, the FAQ panel and its caret

Easings

--el-ease
Buttons and the FAQ caret
--el-ease-expo
The email field and the logo
--el-ease-quart
The hero tabs
--el-ease-circ
The FAQ panel

Breakpoints

Where the layout changes. A media query cannot read a variable, so these are the one set of numbers written straight into the stylesheet and the components.

max-width: 991px
Tablet: the rhythm tightens, the bar drops its links, grids go to one or two columns and the screenshots stop being cropped.
max-width: 767px
Large phone: the rhythm steps down again, headers and forms stack, the comparison table scrolls sideways.
max-width: 479px
Phone: the gutter halves and buttons go full width.

Components

The template's building blocks, live. Hover them: this is how they behave on the pages.

ButtonsElevateButton. One shape at one 40px height: primary for the call to act, outline and ghost for what sits beside it.
Email captureEmailForm: the field and its submit button. Sending it swaps in the thank-you line, as the original does.
BadgesLiveBadge over the hero, Badge over the home plan, OutlineBadge over every FAQ.

It’s finally here.

Launch offer (20 Units)Popular
PricePrice: the figure, its currency mark and the price it replaces. Bold on the pricing page.
240€
300€
320€
599€
BenefitsThe template's only bullet, the same in all four places.
  • Access to core CAD functionalities
  • Limited to 2 users per department
  • 5 pre-configured call types
  • Basic incident reporting tools
Feature rowFeatureRow: three up, two from tablet, one on a phone.
Manage your officers

Organize, supervise, and optimize your team's tasks efficiently from an intuitive interface.

Check the information in real time

Access reports, records, and key data whenever you need them, without missing a detail.

Maximum immersion

Experience the most realistic police experience with tools designed to fully immerse you in the role.

IconsIcon: a fixed 20, 24 or 32px box the glyph fills, painted in the text colour whatever the file says.
Section titleSectionTitle: the heading and its line on a 60ch measure, centred or left, with an optional action beside it.

Choose your
perfect plan

Pay once, get access forever.

Join waitlist
TabsHeroTabs: the product screens, one panel at a time, with the strip held in view while it scrolls.
The Dashboard screen of the tablet
FAQFaqs: every row opens and closes on its own.

We haven't announced the exact release date yet, but our goal is to launch it in early 2025. We want to make sure everything is thoroughly tested and working perfectly before the launch.

In V1, we have focused on including the most essential features. However, for V2, we plan to introduce features such as:

- Messaging or email system: to facilitate internal communication.


- Dispatch: a tool to manage notification systems and assign units efficiently.


- Management of references, names, and colors: for more detailed and personalized control.


And this is just the beginning. We will continue to reveal more features as the launch approaches.

Currently, the tablet development is based on the QB Core framework, but we plan to expand it to be compatible with ESX in the future.

The price will be announced as the launch date gets closer. Additionally, we will offer a special pre-sale discount, available for a limited time.

Absolutely! The tablet will be updated periodically. In version 1, we’ve included the features we consider most essential, but we’ll continue adding new ones with each update.

If you have a feature in mind or can't find what you're looking for, feel free to send us a message. We’ll be happy to work on it and make it even more complete.

© 2025 Copyright. Flab Community. All rights reserved

Style guide