@everest-fleet/design-system

CSS design system for Everest Fleet — tokens, atoms, molecules, and organism components. Built mobile-first, light theme, with Inter (Agenda fallback) as the brand typeface.

Install

npm install @everest-fleet/design-system

Usage

Import the whole system in your global stylesheet:

@import "@everest-fleet/design-system";

Or pick what you need:

@import "@everest-fleet/design-system/tokens";       /* CSS variables only */
@import "@everest-fleet/design-system/components/button";
@import "@everest-fleet/design-system/components/nav";

What's inside

Design tokens (src/tokens.css)

Brand colours, neutral palette, semantic colour mappings, typography scale, spacing scale (8px base), border radius, shadows, motion, z-index, breakpoints.

:root {
  --color-blue:        #006DB8;
  --color-yellow:      #F1D614;
  --color-navy:        #062F50;
  --space-5:           24px;
  --radius-md:         8px;
  --shadow-cta:        0 8px 24px rgba(241,214,20,0.35);
  --font-family-base:  'Agenda', 'Inter', 'DM Sans', sans-serif;
  /* ... */
}

Components

| File | Components | |------|-----------| | button.css | Primary, secondary, outline, ghost, link, call, whatsapp · sm/md/lg · states | | nav.css | Nav bar with 5 colour variants (white, blue, navy, yellow, transparent) | | cards.css | Plan card, testimonial, feature, city | | forms.css | Input states, form field, lead form | | hero.css | Hero section layouts | | stats-bar.css | Stats display strip | | dto-module.css | Drive-to-Own module | | step-indicator.css | Process visualisation | | testimonial.css | Single + grid + carousel | | footer.css | Default + minimal footer | | fab.css | Floating action buttons | | badges.css | Pills & badges | | decorative.css | Triangle motif, accent dividers, patterns |

Design principles

• Primary colours only — yellow, green, blue, purple, navy (+ neutrals)
• Max font weight: 700 — no extra-bold
• 8px spacing scale — no arbitrary pixel values in components
• Mobile-first responsive — min-width breakpoints
• Auto-layout in Figma — components consume tokens via CSS variables

Storybook

Live preview of every component and variant: see deployment URL in repository.

To run locally:

npm install
npm run storybook

Figma library

The Figma component library mirrors this CSS system 1:1. See the EFDS Figma file.

License

UNLICENSED — internal Everest Fleet use only.