Remixes of www.fleetops.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Fleetops
description: |
FleetOps' design system embodies a commanding, no-nonsense aesthetic tailored
for the trucking and fleet operations industry. The visual language
prioritizes clarity and trustworthiness through a sophisticated dark-dominant
palette anchored by deep charcoals and off-blacks, punctuated by deliberate
moments of white and subtle accent colors. The design conveys operational
rigor—a platform built for serious logistics professionals—while maintaining
approachable moments through generous whitespace and carefully weighted
typography. Hero sections leverage dramatic dark gradients and atmospheric
imagery (trucking landscapes) to establish gravitas. Neutral sections
alternate between deep surfaces and light bands (#F6F5F3), preventing visual
monotony while keeping focus sharp. Interactions and micro-movements (button
skew, link translate) inject controlled personality without undermining
professionalism.
source:
url: "https://www.fleetops.com/"
pagesAnalyzed: 1
extractedAt: 2026-11-04
tokensMeasured: true
colors:
primary: "#FFFFFF"
canvas: "#08090A"
surface: "#0F1215"
surface-alt: "#F6F5F3"
on-primary: "#08090A"
ink: "#BABABA"
body: "#9AA0A8"
muted: "#6B7280"
faint: "#62656E"
accent-1: "#7BD389"
accent-2: "#3987E5"
accent-3: "#E03E57"
accent-4: "#E47F8D"
accent-5: "#F6AEB9"
neutral-1: "#8A8F98"
typography:
display-xl:
fontFamily: "Aspekta Variable"
fontSize: 72px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -2.88px
display-lg:
fontFamily: "Aspekta Variable"
fontSize: 56px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -2.24px
display-md:
fontFamily: "Aspekta Variable"
fontSize: 52.16px
fontWeight: 400
lineHeight: 1.1
letterSpacing: -2.09px
display-md-tight:
fontFamily: "Aspekta Variable"
fontSize: 52.16px
fontWeight: 400
lineHeight: 0.92
letterSpacing: -2.09px
display-sm:
fontFamily: "Aspekta Variable"
fontSize: 44px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -1.76px
heading:
fontFamily: "Aspekta Variable"
fontSize: 30px
fontWeight: 500
lineHeight: 1.15
letterSpacing: -0.9px
quote:
fontFamily: "Aspekta Variable"
fontSize: 21px
fontWeight: 400
lineHeight: 1.45
letterSpacing: -0.21px
body-lg:
fontFamily: "Aspekta Variable"
fontSize: 18px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-md:
fontFamily: "Aspekta Variable"
fontSize: 17px
fontWeight: 400
lineHeight: 1.6
letterSpacing: -0.2px
body-sm:
fontFamily: "Aspekta Variable"
fontSize: 16px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-xs:
fontFamily: "Aspekta Variable"
fontSize: 15px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
body-xs-loose:
fontFamily: "Aspekta Variable"
fontSize: 15px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-xs-strong:
fontFamily: "Aspekta Variable"
fontSize: 15px
fontWeight: 600
lineHeight: 1.63
letterSpacing: 0px
button:
fontFamily: "Aspekta Variable"
fontSize: 14px
fontWeight: 500
lineHeight: 1.63
letterSpacing: 0px
label:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
caption:
fontFamily: Inter
fontSize: 11.5px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
code-xl:
fontFamily: "Roboto Mono"
fontSize: 46.08px
fontWeight: 400
lineHeight: 1
letterSpacing: -0.92px
code-lg:
fontFamily: "Roboto Mono"
fontSize: 15px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0.38px
textTransform: uppercase
code-md:
fontFamily: "Roboto Mono"
fontSize: 14px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0.35px
textTransform: uppercase
code-sm:
fontFamily: "Roboto Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
code-sm-uppercase:
fontFamily: "Roboto Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0.72px
textTransform: uppercase
rounded:
none: 0px
xs: 24px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 48px
borderWidths:
thin: 1px
shadows:
sm: "rgba(15, 23, 42, 0.22) 0px 22px 60px 0px"
md: "rgba(255, 255, 255, 0.15) 0px -1px 0px 0px inset"
lg: "oklab(0.999994 0.0000455678 0.0000200868 / 0.14902) 0px 1px 0px 0px inset, oklab(0 0 0 / 0) 0px -1px 0px 0px inset"
xl: "rgba(12, 14, 24, 0.4) 0px 18px 44px -18px"
elevationStrategy: layered-micro
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#1D1D1D"
textMuted: "#707070"
border: "#D8D8D8"
accent: "#707070"
accentFg: "#FFFFFF"
focusRing: "#8F8F8F"
elevation: shadow
dark:
bg: "#08090A"
surface: "#0F1215"
surfaceRaised: "#222528"
text: "#BABABA"
textMuted: "#9AA0A8"
border: "#1D1E1F"
accent: "#FFFFFF"
accentFg: "#08090A"
focusRing: "#FFFFFF"
elevation: "border+surface"
gradients:
- context: hero
kind: linear
value: "linear-gradient(to right top, oklab(0 0 0 / 0.75) 0%, oklab(0 0 0 / 0.45) 50%, oklab(0 0 0 / 0.2) 100%)"
- context: hero
kind: linear
value: "linear-gradient(104deg, rgb(24, 24, 24) 32%, rgba(24, 24, 24, 0.97), rgba(24, 24, 24, 0.9), rgba(24, 24, 24, 0.79), rgba(24, 24, 24, 0.64) 52%, rgba(24, 24, 24, 0.5), rgba(24, 24, 24, 0.36), rgba(24, 24, 24, 0.22), rgba(24, 24, 24, 0.1) 68%, rgba(24, 24, 24, 0.05), rgba(24, 24, 24, 0) 72%)"
- context: section
kind: radial
value: "radial-gradient(farthest-side, rgba(96, 110, 145, 0.11) 0%, rgba(96, 110, 145, 0.11) 12%, rgba(96, 110, 145, 0) 92%)"
- context: section
kind: linear
value: "linear-gradient(rgb(224, 62, 87), rgb(224, 62, 87))"
- context: section
kind: mixed
value: "radial-gradient(85% 100% at 0px 104%, rgba(153, 153, 153, 0.32), rgba(153, 153, 153, 0) 64%), radial-gradient(80% 95% at 100% -6%, rgba(149, 149, 149, 0.27), rgba(149, 149, 149, 0) 60%), linear-gradient(45deg, rgb(38, 38, 38), rgb(24, 24, 24), rgb(36, 36, 36))"
- context: section
kind: linear
value: "linear-gradient(to right, rgba(236, 240, 248, 0.38) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgba(236, 240, 248, 0.38) 1px, rgba(0, 0, 0, 0) 1px)"
components:
button-text:
textColor: "oklab(0.138949 -0.00118052 -0.00269531)"
height: 50px
padding: "12px 24px 12px 24px"
fontSize: 16px
fontFamily: "Roboto Mono"
fontWeight: 400
lineHeight: 1.63
backgroundColor: "oklab(0.999994 0.0000455678 0.0000200868)"
button-primary:
typography: "{typography.code-md}"
textColor: "{colors.on-primary}"
height: 42.75px
padding: "10px 20px 10px 20px"
backgroundColor: "{colors.primary}"
button-filled:
textColor: "{colors.primary}"
height: 31.5px
padding: "6px 12px 6px 12px"
fontSize: 12px
fontFamily: Inter
fontWeight: 500
lineHeight: 1.63
backgroundColor: "rgb(20, 22, 27)"
button-icon:
typography: "{typography.body-xs-loose}"
textColor: "oklab(0 0 0 / 0.25)"
height: 44px
backgroundColor: "oklab(0 0 0 / 0.1)"
button-text-sm:
typography: "{typography.button}"
textColor: "rgb(247, 248, 248)"
height: 42.75px
padding: "10px 16px 10px 16px"
card:
typography: "{typography.body-xs-loose}"
textColor: "{colors.on-primary}"
backgroundColor: "{colors.surface}"
card-featured:
textColor: "{colors.on-primary}"
padding: "13px 24px 13px 24px"
fontSize: 15px
boxShadow: "rgba(15, 23, 42, 0.16) 0px 14px 44px 0px"
fontFamily: Inter
fontWeight: 400
lineHeight: 1.63
backgroundColor: "{colors.primary}"
card-sm:
typography: "{typography.body-xs-loose}"
textColor: "{colors.primary}"
navigation:
typography: "{typography.body-xs-loose}"
textColor: "rgb(247, 248, 248)"
height: 72px
footer:
typography: "{typography.body-xs-loose}"
textColor: "rgb(247, 248, 248)"
padding: "0px 0px 40px 0px"
link:
typography: "{typography.code-lg}"
textColor: "{colors.primary}"
padding: "12px 24px 12px 24px"
backgroundColor: "{colors.canvas}"
link-sm:
typography: "{typography.body-xs-loose}"
textColor: "rgb(247, 248, 248)"
states:
other-hover:
target: other
state: hover
borderColor: "rgba(0, 0, 0, 0.2)"
other-focus:
target: other
state: focus
borderColor: "rgba(255, 255, 255, 0.32)"
other-disabled:
target: other
state: disabled
opacity: 0.6
button-hover:
target: button
state: hover
transform: "translate(0px) skew(-12deg)"
card-hover:
target: card
state: hover
backgroundColor: "rgba(255, 255, 255, 0.035)"
nav-hover:
target: nav
state: hover
opacity: 0.75
link-hover:
target: link
state: hover
transform: "translate(3px)"
breakpoints:
- width: 375
containerWidth: 360
gridColumns: 4
navLinksVisible: 2
menuToggleVisible: true
headingPx: 34
bodyPx: 15
sectionPaddingX: 20
- width: 768
containerWidth: 753
gridColumns: 4
navLinksVisible: 2
menuToggleVisible: true
headingPx: 56
bodyPx: 15
sectionPaddingX: 24
- width: 1024
containerWidth: 1009
gridColumns: 5
navLinksVisible: 6
menuToggleVisible: true
headingPx: 67
bodyPx: 15
sectionPaddingX: 24
- width: 1280
containerWidth: 1265
gridColumns: 5
navLinksVisible: 6
menuToggleVisible: true
headingPx: 72
bodyPx: 15
sectionPaddingX: 24
- width: 1440
containerWidth: 1425
gridColumns: 5
navLinksVisible: 6
menuToggleVisible: true
headingPx: 72
bodyPx: 15
sectionPaddingX: 24
coverage:
statesFound: 52
gradientsFound: 8
rolesUnassigned: 6
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
FleetOps' design system embodies a commanding, no-nonsense aesthetic tailored for the trucking and fleet operations industry. The visual language prioritizes clarity and trustworthiness through a sophisticated dark-dominant palette anchored by deep charcoals and off-blacks, punctuated by deliberate moments of white and subtle accent colors. The design conveys operational rigor—a platform built for serious logistics professionals—while maintaining approachable moments through generous whitespace and carefully weighted typography. Hero sections leverage dramatic dark gradients and atmospheric imagery (trucking landscapes) to establish gravitas. Neutral sections alternate between deep surfaces and light bands ({colors.surface-alt} — #F6F5F3), preventing visual monotony while keeping focus sharp. Interactions and micro-movements (button skew, link translate) inject controlled personality without undermining professionalism.
Key Characteristics
{colors.primary} — #FFFFFF): White serves as the dominant accent color and primary call-to-action fill. Used in hero buttons ("GET STARTED"), active states, and brand emphasis. High contrast against dark surfaces ensures maximum visibility and click readiness.{colors.accent-1} — #7BD389): Decorative accent with no measured semantic role. Deployed in hero graphics and illustrative elements to add visual interest without signifying operational status.{colors.accent-2} — #3987E5): Decorative accent. Observed in hero backgrounds and design flourishes; no interaction state or semantic meaning assigned.{colors.accent-3} — #E03E57): Decorative accent. Present in gradient overlays and visual hierarchy; does not denote error or danger in this system.{colors.accent-4} — #E47F8D): Decorative accent used in secondary visual treatments and background patterns.{colors.accent-5} — #F6AEB9): Decorative accent. Appears in subtle background gradients and tertiary design elements.{colors.canvas} — #08090A): Page background. Deep near-black providing primary dark surface. Also used as label color and primary text on branded (white) backgrounds.{colors.surface} — #0F1215): Card and panel background. Slightly lighter than canvas to create subtle depth separation for contained content blocks.{colors.surface-alt} — #F6F5F3): Light section band. Deployed in alternating content regions to break visual monotony and establish rhythm. High contrast with canvas for readability.{colors.ink} — #BABABA): Primary heading and prominent text color. Mid-tone gray providing legible hierarchy without the harshness of pure white.{colors.body} — #9AA0A8): Body copy and standard paragraph text. Slightly more muted than headings while remaining readable across dark and light surfaces.{colors.muted} — #6B7280): Captions, secondary text, and metadata. Lower contrast for non-critical information and supporting details.{colors.faint} — #62656E): Tertiary text, placeholder content, and lowest-hierarchy information. Used sparingly to avoid legibility issues.{colors.neutral-1} — #8A8F98): Supporting neutral. Intermediate tone for borders, dividers, and subtle backgrounds.No error, success, or warning colors are declared by the site. Status indication relies on contextual messaging and typography rather than a formalized semantic palette. (See Known Gaps.)
Primary: Aspekta Variable
Aspekta Variable, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifSecondary: Inter
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifMonospace: Roboto Mono
Roboto Mono, 'Courier New', monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Aspekta Variable | 72px | 400 | 1.05 | -2.88px | Hero heading; tight, aggressive tracking |
| Display LG | Aspekta Variable | 56px | 400 | 1.05 | -2.24px | Major section heading; compact vertical rhythm |
| Display MD | Aspekta Variable | 52.16px | 400 | 1.1 | -2.09px | Large heading with tight line spacing variant (0.92 also measured) |
| Display SM | Aspekta Variable | 44px | 400 | 1.05 | -1.76px | Secondary hero / featured content heading |
| Heading | Aspekta Variable | 30px | 500 | 1.15 | -0.9px | Section subheading; increased weight for emphasis |
| Quote | Aspekta Variable | 21px | 400 | 1.45 | -0.21px | Testimonial or featured quote text |
| Body LG | Aspekta Variable | 18px | 400 | 1.63 | 0px | Large body paragraphs; prominent supporting copy |
| Body MD | Aspekta Variable | 17px | 400 | 1.6 | -0.2px | Standard paragraph and mixed-content text |
| Body SM | Aspekta Variable | 16px | 400 | 1.63 | 0px | Primary body copy and default text size |
| Body XS | Aspekta Variable | 15px | 400 | 1.4 | 0px | Secondary body; slightly tighter line-height |
| Body XS (Loose) | Aspekta Variable | 15px | 400 | 1.63 | 0px | List items and text with standard spacing |
| Body XS (Strong) | Aspekta Variable | 15px | 600 | 1.63 | 0px | Emphasized secondary text; weight bump for prominence |
| Button | Aspekta Variable | 14px | 500 | 1.63 | 0px | Primary button label; mid-tone weight and size |
| Label | Inter | 12px | 400 | 1.63 | 0px | Table header, form label; minimal and clear |
| Caption | Inter | 11.5px | 400 | 1 | 0px | Tiny metadata, image captions, fine print |
| Code XL | Roboto Mono | 46.08px | 400 | 1 | -0.92px | Large code display; extremely compact |
| Code LG | Roboto Mono | 15px | 400 | 1.63 | 0.38px | Code snippet; uppercase transform applied |
| Code MD | Roboto Mono | 14px | 400 | 1.63 | 0.35px | Medium code label; uppercase, expanded tracking |
| Code SM | Roboto Mono | 12px | 400 | 1 | 0px | Small inline code or data identifier |
| Code SM (Uppercase) | Roboto Mono | 12px | 400 | 1.63 | 0.72px | Uppercase label; highly expanded tracking |
{typography.display-xl}) at -2.88px tracking tightens the 72px headline, while body text ({typography.body-sm}) sits at 0px for legibility.Primary (Large)
{colors.primary} (#FFFFFF){colors.canvas} (#08090A){rounded.none} (0px — sharp corners)transform: translate(0px) skew(-12deg) — dramatic skew effect for engagement feedbackPrimary (Medium)
{colors.primary} (#FFFFFF){colors.canvas} (#08090A){rounded.none} (0px)rgb(8, 9, 10), maintaining high contrastFilled (Tertiary)
rgb(20, 22, 27) (very dark, near-black){colors.primary} (#FFFFFF){rounded.none} (0px)rgb(28, 28, 31) or rgb(40, 40, 40) depending on contextIcon
oklab(0 0 0 / 0.1) (10% dark overlay)oklab(0 0 0 / 0.25) (25% dark, muted icon){rounded.none} (0px)Text (Small)
rgba(0, 0, 0, 0))rgb(247, 248, 248) (near-white, high contrast){rounded.none} (0px)Default (Dark)
{colors.surface} (#0F1215)rgb(8, 9, 10) (note: this is the canvas dark, suggesting inverted context or nested dark-on-dark content){rounded.none} (0px — sharp corners)var(--color-border-strong), background lightens to rgba(255, 255, 255, 0.035) for subtle liftFeatured (Light)
{colors.primary} (#FFFFFF)rgb(8, 9, 10) (dark text on light)rgba(0, 0, 0, 0) (transparent border for layout consistency){rounded.none} (0px)rgba(15, 23, 42, 0.16) 0px 14px 44px 0px (soft depth on featured cards)rgba(0, 0, 0, 0), background shifts to rgb(242, 244, 247) (slightly grayed)Default (Small, Dark)
rgba(0, 0, 0, 0) (transparent, used for layout/grouping){colors.primary} (#FFFFFF){rounded.none} (0px)rgba(255, 255, 255, 0.05) or rgb(255, 255, 255) depending on contentNo form input components (text fields, selects, checkboxes) were measured on the landing page. Input styling must be derived from future page captures or documented separately. (See Known Gaps.)
Default (Header)
rgba(0, 0, 0, 0) (transparent; sits over hero gradient)rgb(247, 248, 248) (off-white, high contrast on dark){rounded.none} (0px)rgba(255, 255, 255, 0.15) 0px -1px 0px 0px inset)rgb(237, 237, 240)Default (Large)
{colors.canvas} (#08090A){colors.primary} (#FFFFFF){rounded.none} (0px)var(--color-text-primary), and transform: translate(3px) moves the link rightwardDefault (Small)
rgba(0, 0, 0, 0) (transparent)rgb(247, 248, 248) (off-white){rounded.none} (0px)var(--color-text-primary), transform: translate(3px) applied for directional feedbackDefault
rgba(0, 0, 0, 0) (transparent; sits on canvas)rgb(247, 248, 248) (off-white){rounded.none} (0px)FleetOps employs a consistent base-unit spacing scale:
{spacing.xxs} = 4px — micro gaps, tightest spacing{spacing.xs} = 8px — small internal padding, narrow gutters{spacing.sm} = 12px — standard compact spacing{spacing.md} = 16px — primary spacing unit for component internals (button padding, standard gaps){spacing.lg} = 20px — generous spacing for readable blocks{spacing.xl} = 24px — large gap for visual breathing room{spacing.xxl} = 28px — extra-large spacing for section separation{spacing.xxxl} = 32px — substantial gap between major content areas{spacing.section} = 40px — section padding and major vertical rhythm{spacing.band} = 48px — large section bands and hero zonesUsage Context: Buttons use {spacing.md} (16px) internally; cards use 0px padding and let content control; sections use {spacing.section} (40px) or {spacing.band} (48px) for vertical rhythm.
| Viewport | Max Width | Content Column | Grid Columns |
|---|---|---|---|
| 375px | 360px | 360px | 4 |
| 768px | 753px | 753px | 4 |
| 1024px | 1009px | 1009px | 5 |
| 1280px | 1265px | 1265px | 5 |
| 1440px | 1425px | 1425px | 5 |
Strategy: Fluid container widths that respect viewport. At mobile (375px), a single column dominates with 360px of usable space. Tablet (768px) maintains 4-column grid for flexible layouts. Desktop (1024px+) expands to 5-column grid with consistent 1009–1425px max widths. Section padding remains {spacing.section} (40px) on left/right across all sizes, maintaining consistent margin treatment.
Whitespace in FleetOps balances density with legibility. Dark surfaces ({colors.canvas}, {colors.surface}) can tolerate closer visual spacing because the color contrast is high. Light sections ({colors.surface-alt}) use generous breathing room to reduce cognitive load on the eye. Hero copy blocks sit loose in the hero zone, with {spacing.band} (48px) separating headlines from supporting text. Alternating light/dark bands provide visual rest and signal content structure without explicit borders.
{rounded.none} = 0px — applied to all interactive and container components (buttons, cards, modals, badges). Sharp, rectilinear geometry is the system default, reinforcing precision and operational clarity.{rounded.xs} = 24px — soft corner treatment for specific decorative or secondary elements (e.g., avatar frames, illustrative containers).{rounded.full} = 9999px — pill-shape rendering. Applied to avatars to create perfect circles.Per Component:
| Level | Treatment | Use |
|---|---|---|
| Flat | None | Default cards, buttons, navigation, most surfaces |
| Small | rgba(15, 23, 42, 0.22) 0px 22px 60px 0px | Modals; deepest lift for layered overlays |
| Medium | rgba(255, 255, 255, 0.15) 0px -1px 0px 0px inset | Navigation inset highlight; subtle top-edge lift |
| Large | oklab(0.999994 0.0000455678 0.0000200868 / 0.14902) 0px 1px 0px 0px inset, oklab(0 0 0 / 0) 0px -1px 0px 0px inset | Custom layered inset treatment; barely perceptible depth |
| XL | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(12, 14, 24, 0.4) 0px 18px 44px -18px | Custom stacked shadows; deep depth for featured content |
Shadow Philosophy: FleetOps employs a layered-micro elevation strategy. Rather than relying on thick, obvious shadows, the system stacks multiple near-transparent layers and inset highlights to suggest depth subtly. The modal shadow (rgba(15, 23, 42, 0.22)) provides the most pronounced lift, while navigation uses an inset border to suggest surface separation. This approach maintains visual sophistication while keeping the interface clean and minimal. Large XL shadows combine multiple zero-opacity layers with a single meaningful drop shadow, creating a "floating on glass" effect.
0.30) — disable/reduce vibrancy0.25) — subtle overlay, muted icon0.38) — reserved for specific visual treatments0.50) — half-transparent for overlay and hover states0.70) — reduced but still prominent; secondary hover state1.00) — fully opaque; default(Specific numeric z-index values extracted but not consistently semantic; general hierarchy: base content < dropdowns < modals/toasts implied from shadow elevation.)
{colors.primary}) as the primary accent for calls-to-action and brand emphasis. Pair it with dark backgrounds for maximum contrast and click readiness.{rounded.none} — 0px) on all interactive and container components. The rectilinear aesthetic is foundational to brand clarity.{spacing.md} = 16px). Margins and padding should be 4px, 8px, 12px, 16px, 20px, 24px, etc.—never arbitrary values.{colors.surface} vs. {colors.canvas}) to establish hierarchy; reserve shadows for high-emphasis overlays (modals).translate, skew). Motion is subtle but present and adds personality.{colors.accent-1} through {colors.accent-5} plus green, blue, red) are illustrative only. Do not map them to error/warning/success without explicit brand guidance.{colors.surface-alt}) as a default card background. It is reserved for alternating section bands to provide visual rhythm; standard cards are dark ({colors.surface}).| Breakpoint | Viewport Width | Content Column | Grid Columns | Key Changes |
|---|---|---|---|---|
| Mobile | 375px | 360px | 4 | Single-column layout; nav toggle visible; heading scales to 34px |
| Tablet | 768px | 753px | 4 | Wider content; nav links remain minimal (2 visible); heading grows to 56px |
| Desktop (MD) | 1024px | 1009px | 5 | Full nav visible (6 links); grid expands; heading ~67px |
| Desktop (LG) | 1280px | 1265px | 5 | Max-width constrained; heading 72px; full feature set |
| Desktop (XL) | 1440px | 1425px | 5 | Same width constraints; heading 72px; no further scaling |
Collapse Point: Navigation transitions from hamburger menu (hidden) to visible link list between 375px and 1024px. At 375px–768px, only 2 nav links are shown and a menu toggle is present. At 1024px+, all 6 main navigation links display and the toggle is no longer necessary.
No explicit touch-target data was extracted from the landing page. However, the measured button heights (50px primary, 42.75px secondary, 31.5px filled) and icon size (44px × 44px) suggest a system designed for large, thumb-friendly targets. Minimum recommended touch target is 44px × 44px based on component measurements.
padding-x) is 20px at 375px and increases to 24px at 768px+ for consistent margin treatment.{colors.primary} — #FFFFFF) — use for high-emphasis buttons and brand marks on dark backgrounds{colors.canvas} — #08090A) — deep dark, primary page surface{colors.surface} — #0F1215) — slightly lighter dark for layered content{colors.surface-alt} — #F6F5F3) — light alternating sections{colors.ink} — #BABABA) — mid-tone gray for prominent text{colors.body} — #9AA0A8) — standard paragraph color{colors.muted} — #6B7280) — captions and low-priority info{colors.faint} — #62656E) — metadata, placeholders#7BD389), Blue (#3987E5), Red (#E03E57), Light Red (#E47F8D), Blush (#F6AEB9) — used in illustrations and gradients only; no semantic meaningAll interactive components are sharp-cornered (0px border-radius). Buttons, cards, modals, badges must be rectilinear to maintain brand identity.
White (#FFFFFF) is the primary accent and CTA fill. Place it on dark backgrounds for maximum pop. Do not confuse white with a neutral or background color—it is the hero accent.
Display text uses aggressive negative letter-spacing (display XL: -2.88px, display LG: -2.24px). This compresses large headlines into a premium, high-contrast aesthetic. Body and small text sit at 0px letter-spacing.
Standard body line-height is 1.63. This applies across body sizes (16px, 17px, 18px) and buttons. Maintain this for consistent vertical rhythm.
Spacing multiples are non-negotiable. Use {spacing.md} (16px) as the base unit. All padding, margin, and gaps should be 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, or 48px—never arbitrary values.
Color blocking (surface changes) over shadow depth is the depth strategy. Hover states shift background or border color, not shadow. Exceptions: modals and featured cards get shadows only.
Aspekta Variable is the hero font for display and body; Inter handles utility (labels, captions); Roboto Mono is for code and uppercase data labels. Do not mix families on a single line.
Opacity levels (30%, 25%, 50%, 70%, 100%) are discrete. Do not invent intermediate opacity values; use these five levels for consistency.
Z-index structure: base (1–6), dropdown (10–30). Do not layer content outside these ranges without explicit justification.
Mobile breakpoint is 375px with 360px usable width and 4-column grid. Desktop breakpoint is 1024px with 5-column grid and full navigation visible. Test responsiveness at all five measured points (375px, 768px, 1024px, 1280px, 1440px).
No semantic color palette. The site does not declare error, success, warning, or info states in its markup. Status indication must rely on contextual messaging and typography until a formal semantic ramp is defined.
Six decorative accent colors lack measurable semantic roles. Green (#7BD389), Blue (#3987E5), Red (#E03E57), Light Red (#E47F8D), and Blush (#F6AEB9) appear in hero graphics and background gradients but have no measured interaction states or use outside illustration. Do not assume these map to status or emotion; treat them as decorative only.
No form input styling extracted. Text fields, select dropdowns, checkboxes, radio buttons, and form validation states were not present on the landing page. Input component styling must be derived from application pages behind authentication or future design specs.
Interaction states are incomplete. Only hover, focus, focus-visible, and disabled states were measured. Active, visited, and aria-pressed states are not documented from the landing page. Implement these conservatively or defer to future captures.
Dark mode or light-mode switching not measured. The site appears to use a single-theme design (dark-dominant with light alternating sections). No evidence of a light-mode toggle or systematic dark-mode inversion was captured.
No motion/animation timing functions extracted. Hover transforms (skew, translate) are recorded, but transition duration, easing (ease-in, cubic-bezier), and animation delays were not measured. Use default browser timings (200–300ms ease-out recommended) until specifics are confirmed.
No data-table styling or complex grid patterns. The landing page does not include extensive tabular content. Table headers, sorting states, and data-cell styling must be inferred or captured separately.
No accessible focus indicators measured explicitly. Focus states shift color and border; formal focus rings or outlines were not defined. Implement WCAG 2.1 AA compliant focus indicators (e.g., 2px outline at 3:1 contrast) as a fallback.
Single page analyzed. Only the FleetOps landing page was captured. Interior application pages, user dashboards, settings, and authentication flows were not visited. This design system is optimized for the public-facing hero and feature sections; application-specific components may require extension.
No animation or micro-interaction library documented. Button skew transform and link translate are noted, but a comprehensive animation system (spring physics, entrance/exit transitions, loading states, spinners, progress indicators) is not defined here.