Fleetline

Design Specification — Fleetline

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#1C1917), a vivid accent (#EF4444). All type is set in var(--font-sans). Detected font weights: 100, 600. Detected style signatures: technical / mono accents.

Logo asset(s): https://db.fleetline.ai/storage/v1/object/public/fleetline-cdn/fleetline-logo_favicon.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Typography

Primary typeface: var(--font-sans) — stack: var(--font-sans)

Font stacks (most used first)

• var(--font-sans)
• GeistSans
• GeistSans Fallback
• var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)
• var(--font-heading)
• var(--font-mono)

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 600

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 768px

Breakpoints

• 1920px

Animation & Motion

Easing curves

• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.8,0,1,1)
• cubic-bezier(0,0,.2,1)

Keyframes

@keyframes an-shimmer { 0%{background-position:100%}to{background-position:0} }
@keyframes an-blink { 50%{opacity:0} }
@keyframes loading-dots { 0%,to{opacity:0}50%{opacity:1} }
@keyframes an-ellipsis { 0%{width:0}33%{width:.33em}66%{width:.66em}to{width:1em} }
@keyframes wiggle { 0%,to{transform:translate(0)}25%{transform:translate(-1.5px)}75%{transform:translate(1.5px)} }
@keyframes shimmer { 0%{background-position:-200%}to{background-position:200%} }
@keyframes pulse-minimal { 0%{opacity:.6;transform:scale(.8)}50%{opacity:.8;transform:scale(1.2)}to{opacity:.6;transform:scale(.8)} }
@keyframes cursor-blink { 0%,to{opacity:1}50%{opacity:0} }
@keyframes enter { 0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))} }
@keyframes exit { to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))} }
@keyframes spin { to{transform:rotate(1turn)} }
@keyframes ping { 75%,to{opacity:0;transform:scale(2)} }
@keyframes pulse { 50%{opacity:.5} }
@keyframes bounce { 0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none} }
@keyframes accordion-down { 0%{height:0}to{height:var(--radix-accordion-content-height)} }
@keyframes accordion-up { 0%{height:var(--radix-accordion-content-height)}to{height:0} }

Source Design Tokens (CSS custom properties)

:root {
  --font-geist-mono: "GeistMono",ui-monospace,SFMono-Regular,Roboto Mono,Menlo,Monaco,Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
  --font-geist-sans: "GeistSans","GeistSans Fallback";
  --an-border-radius: 16px;
  --an-message-border-radius: var(--an-border-radius);
  --an-input-border-radius: var(--an-border-radius);
  --an-tool-border-radius: 10px;
  --an-message-radius-inner-offset: 4px;
  --an-max-width: 768px;
  --an-background-secondary: #f0f0f0;
  --an-background-tertiary: #f8f8f8;
  --an-foreground: #1a1a1a;
  --an-foreground-muted: #737373;
  --an-foreground-subtle: #a3a3a3;
  --an-border-color: #e4e4e7;
  --an-user-message-bg: #f5f5f5;
  --an-user-message-text: #1a1a1a;
  --an-input-border-color: #e4e4e7;
  --an-input-color: #1a1a1a;
  --an-input-placeholder-color: #a3a3a3;
  --an-input-focus-outline: transparent;
  --an-context-padding: 10px;
  --an-tool-background: #f5f5f5;
  --an-tool-border-color: #e4e4e7;
  --an-tool-color: #1a1a1a;
  --an-tool-color-muted: #737373;
  --an-code-background: #1e1e1e;
  --an-code-color: #d4d4d4;
  --an-diff-added-bg: #22c55e1a;
  --an-diff-added-border: #22c55e80;
  --an-diff-added-text: #15803d;
  --an-diff-removed-bg: #ef44441a;
  --an-diff-removed-border: #ef444480;
  --an-diff-removed-text: #dc2626;
  --an-background: #0a0a0a;
  --an-primary-color: #60a5fa;
  --an-input-background: #0a0a0a;
  --an-send-button-bg: #60a5fa;
  --an-send-button-color: #0a0a0a;
  --stone-50: 60 9.1% 97.8%;
  --stone-100: 60 4.8% 95.9%;
  --stone-200: 20 5.9% 90%;
  --stone-300: 24 5.7% 82.9%;
  --stone-400: 24 5.4% 63.9%;
  --stone-500: 25 5.3% 44.7%;
  --stone-600: 33 5.5% 32.4%;
  --stone-700: 30 6.3% 25.1%;
  --stone-800: 12 6.5% 15.1%;
  --stone-900: 24 9.8% 10%;
  --stone-950: 20 14.3% 4.1%;
  --font-heading: var(--font-geist-sans),system-ui,-apple-system,sans-serif;
  --plan-board-header-height: 36px;
  --plan-board-lane-height: 72px;
  --scrollbar-track: var(--stone-100);
  --scrollbar-thumb: var(--stone-300);
  --scrollbar-thumb-hover: var(--stone-400);
  --scrollbar-timeline-track: var(--stone-200);
  --scrollbar-timeline-thumb: var(--stone-500);
  --scrollbar-timeline-thumb-hover: var(--stone-600);
  --surface-base: var(--stone-50);
  --refine-fade: #fff;
}

Do's and Don'ts

Do

• Do reserve the accent #EF4444 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 600.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-text-primary: #1C1917;
  --color-text-secondary: #57534E;
  --color-primary: #22C55E;
  --color-accent: #EF4444;
  --color-background: #FFFFFF;
  --color-surface: #FAFAFA;
  --color-secondary: #000000;
  --color-border: #E7E5E4;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container: #FAFAF9;
  --color-surface-container-high: #F8F8F8;
  --color-surface-container-highest: #F5F5F5;
  --font-sans: var(--font-sans);
  --font-size-body-md: 16px;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --space-sm: 10px;
  --tracking-label: .06px;
  --container-max: 768px;
}