Moje pojazdy
Nowa rezerwacja
Historia wizyt

🎨 Fixistory Design System

Complete style guide and component library

Version: 2.0.0  |  Last Updated: February 2, 2026  |  Status: ✅ Production Ready

Design Tokens

CSS custom properties that define the visual language of Fixistory.

Using Design Tokens

/* CSS */
.my-element {
    color: var(--color-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

Colors

Brand colors and semantic color palette.

Primary Colors

Primary
--color-primary
#667eea
Primary Dark
--color-primary-dark
#5568d3
Primary Light
--color-primary-light
#e0e7ff
Secondary
--color-secondary
#764ba2

Semantic Colors

Success
--color-success
#10b981
Warning
--color-warning
#f59e0b
Error
--color-error
#ef4444
Info
--color-info
#3b82f6

Typography

Font sizes, weights, and line heights.

Heading 1 - 2.5rem/700
Heading 2 - 2rem/600
Heading 3 - 1.5rem/600
Heading 4 - 1.25rem/600
Body Text - 1rem/400
Small Text - 0.875rem/400

Spacing

Consistent spacing scale from 0.25rem to 4rem.

--spacing-xs (0.25rem / 4px)
--spacing-sm (0.5rem / 8px)
--spacing-md (1rem / 16px)
--spacing-lg (1.5rem / 24px)
--spacing-xl (2rem / 32px)

Buttons

Button variants and sizes for all actions.

Button Variants

<button class="fixistory-btn fixistory-btn-primary">Primary Button</button>
<button class="fixistory-btn fixistory-btn-secondary">Secondary Button</button>
<button class="fixistory-btn fixistory-btn-success">Success Button</button>
<button class="fixistory-btn fixistory-btn-danger">Danger Button</button>
<button class="fixistory-btn fixistory-btn-outline">Outline Button</button>
<button class="fixistory-btn fixistory-btn-ghost">Ghost Button</button>

Button Sizes

<button class="fixistory-btn fixistory-btn-primary fixistory-btn-xs">Extra Small</button>
<button class="fixistory-btn fixistory-btn-primary fixistory-btn-sm">Small</button>
<button class="fixistory-btn fixistory-btn-primary">Medium (Default)</button>
<button class="fixistory-btn fixistory-btn-primary fixistory-btn-lg">Large</button>
<button class="fixistory-btn fixistory-btn-primary fixistory-btn-xl">Extra Large</button>

Button States

Form Inputs

Text inputs, selects, textareas, and form elements.

Text Input

We'll never share your email with anyone else. 
<div class="fixistory-form-group">
    <label class="fixistory-label">
        Email Address <span class="label-required">*</span>
    </label>
    <input type="email" class="fixistory-input" placeholder="Enter your email">
    <span class="fixistory-help-text">We'll never share your email.</span>
</div>

Select Dropdown

Textarea

Input States

Looks good!
This field is required.

Alerts

Alert messages for success, error, warning, and info states.

Alert Variants

Success! Your changes have been saved.
Error! Something went wrong. Please try again.
Warning! Your session will expire in 5 minutes.
Info! New features are available. Check them out! 
<div class="fixistory-alert fixistory-alert-success">
    <strong>Success!</strong> Your changes have been saved.
</div>
<div class="fixistory-alert fixistory-alert-error">
    <strong>Error!</strong> Something went wrong.
</div>

Cards

Container cards for grouping content.

Basic Card

Card Title

This is the card body content. You can put any content here including text, images, buttons, and more.

<div class="fixistory-card">
    <div class="fixistory-card-header">
        <h3>Card Title</h3>
    </div>
    <div class="fixistory-card-body">
        <p>Card content goes here.</p>
    </div>
    <div class="fixistory-card-footer">
        <button class="fixistory-btn fixistory-btn-primary">Action</button>
    </div>
</div>

Badges

Small count and labeling components.

Badge Variants

Primary Success Warning Danger 
<span class="fixistory-badge fixistory-badge-primary">Primary</span>
<span class="fixistory-badge fixistory-badge-success">Success</span>
<span class="fixistory-badge fixistory-badge-warning">Warning</span>
<span class="fixistory-badge fixistory-badge-danger">Danger</span>

Complete Form Example

A complete form demonstrating all form elements working together.

Optional: Provide any additional information.