Pilot Design System

A retro-technical design system featuring industrial and governmental aesthetics, machine-readable visual language, and minimalist monochromatic palette.

Navigation Menu - Technical Variant

Technical styling with enhanced borders

TECHNICAL_NAV
  • Section 01
  • Section 02
  • Section 03
  • More
  • Section 01
  • Section 02
  • Section 03
  • More

    • Buttons

    Interactive controls with industrial styling

    Primary
    Secondary
    Outline
    Ghost
    Technical Variant
    Disabled
    Loading

    Cards

    Container components with technical frames

    Standard Card

    Basic card component with bordered styling and standard padding.

    Action

    Technical Card

    Card with corner bracket decorations for technical aesthetic.

    MODULE-01

    Minimal card without header or footer slots.

    Stat Cards

    Metric display cards with trend indicators for financial KPIs

    Progress

    Linear progress bars for budgets and goals with percentage labels

    Additional info below progress

    Form Elements

    Inputs with machine-readable styling

    Commodity Input

    Financial input with currency symbol and decimal formatting

    Custom Currency Symbols

    Use currency-symbol attribute for custom symbols or non-standard currencies

    Toggle

    Switch toggle for settings with industrial on/off styling

    AUTO-SAVE
    DEBUG MODE
    NOTIFICATIONS

    Select Components

    Dropdown selection with technical bracket styling

    Virtual Scrolling (100+ Options)

    Renders only visible options for performance. Scroll to see virtualization in action.

    Datepicker

    Date selection with grid-based calendar

    Badges & Labels

    Status indicators and technical labels

    Primary Success Warning Error
    <CODE> Outline
    Default Label Technical Label Code Label
    Industrial SYS-001 240

    Status Indicators

    System status with animated indicators

    Online
    Warning
    Error
    Neutral

    Terminal

    Console and command-line interfaces

    npm install industrial-design-system
    [INFO] System initialized
    [SUCCESS] Modules loaded: 12/12
    [DEBUG] Connection established
    $ _

    Code Blocks

    Syntax-highlighted code display

    const system = { id: 'SYS-001', name: 'Industrial Design System', version: '1.0.0', status: 'operational', modules: ['core', 'ui', 'patterns'] }; function initialize(config) { console.log(`Initializing ${config.name}...`); return system; } #!/bin/bash echo "Installing Pilot Design System..." npm install npm run build echo "Installation complete"

    Panels

    Collapsible container components

    Save Configuration › Core Module: Active UI Module: Active API Module: Maintenance

    Annotations

    Callout boxes for technical notes

    This is a standard note annotation for general information and clarifications. Technical specifications require precise formatting and validation. Warning: Modifying these settings may affect system stability. Important: Backup your data before proceeding with system updates.

    Grid System

    Technical grid layouts with optional overlays

    Grid Item 1 Grid Item 2 Grid Item 3 Grid Item 4 Grid Item 5 Grid Item 6 Grid Item 7 Grid Item 8

    Dividers

    Section separators with technical styling

    Standard divider:

    Dashed divider:

    Technical divider with label:

    Vertical divider:

    Left content Right content

    Measurements

    Technical measurement displays

    Horizontal:

    Vertical:

    Tabs

    Tab navigation for content sections

    Default Horizontal:

    Account overview content with balance and recent activity. Transaction history and detailed records. Account settings and preferences.

    Technical Variant:

    First quarter financial data and analysis. Second quarter performance metrics. Third quarter projections and trends.

    Vertical Orientation:

    System configuration and monitoring. Network settings and connectivity. Security settings (restricted). System logs and audit trail.

    CSS Patterns

    Utility classes for technical styling

    Technical Label

    Boxed Label

    Code Label

    Technical Border
    Border with Corners
    Full Technical Frame
    Module Header

    Module content with technical styling and ID label.

    Grid Background Pattern

    Container

    Max-width wrapper with technical borders for page sections

    Small Container (640px)

    size="sm" with default padding

    Content in Small Container

    This container has a max-width of 640px and is centered.
    Medium Container with Borders

    size="md" bordered with technical corners

    Bordered Container

    This container features technical corner brackets and larger padding.
    Large Container (1024px) - Default

    size="lg" is the default, perfect for main content sections

    Main Content Container

    This is the default container size with 1024px max-width. Ideal for most page content sections.

    Card 1 Card 2 Card 3
    Extra Large Container (1280px) - With Technical Borders

    size="xl" bordered padding="xl" - Maximum width with technical styling

    Wide Container with Technical Borders

    This extra-wide container (1280px) with technical corner brackets and XL padding is perfect for dashboards and data-heavy layouts.
    Full Width Container (100%)

    size="full" bordered - Spans entire width of parent

    Full-Width Layout

    This container spans 100% of its parent width with technical borders and default padding.

    Typography

    Font families and styling

    Space Grotesk - Display Font

    IBM Plex Sans - Body text font for general content

    IBM Plex Mono - Monospace font for code: const x = 42;

    JetBrains Mono - Technical labels and system text

    Chakra Petch - Industrial headings

    Bar Chart

    Horizontal bar charts for category comparison with technical styling

    Slot-Based Data (Recommended)

    Use pilot-chart-data elements for a more readable, maintainable API

    With Legend & Animation
    Interactive (Clickable Bars)

    Click any bar to see the event detail in console

    Vertical Bar Chart

    Column chart style with bars growing bottom-to-top using orientation="vertical"

    Basic Vertical Chart

    Use orientation="vertical" to display bars as columns

    Vertical with All Features
    Comparison: Horizontal vs Vertical

    Horizontal (Default)

    Vertical

    Interactive Vertical Chart

    Click any bar to see the event detail in console

    Pie Chart

    Circular charts for displaying categorical data proportions with technical styling

    Slot-Based Data (Recommended)

    Use pilot-chart-data elements for a more readable, maintainable API

    With Legend & Animation
    Interactive (Clickable Slices)

    Click any slice to see event detail in console

    Small Size
    Default Size
    Large Size

    Area Chart

    Line charts with filled area below for displaying trends over time

    Slot-Based Data (Recommended)

    Use pilot-chart-data elements for a more readable, maintainable API

    With Values & Animation
    With Legend & Values
    Interactive (Hover & Click)

    Hover over points for tooltips, click for event details in console

    Error Trend
    Performance Metrics