Mini-Component-Library

Orbit Design System

Orbit is a foundational design system built with semantic HTML5 and modern CSS. It prioritizes consistency, accessibility, and reusability through the strict use of CSS variables (tokens) and predictable BEM naming conventions.

Features

• CSS Variables: Global tokens for colors, typography, spacing, and shadows.
• No JavaScript: Pure CSS implementation for all visual states.
• Responsive: Mobile-first design principles.
• Accessible: Semantic markup and clear focus states.

Components

Buttons

Buttons are used for actions and navigation.

Primary: Main call-to-action. Secondary: Alternative actions.

<button class="btn btn--primary">Save Changes</button>
<button class="btn btn--secondary">Cancel</button>
<a href="#" class="btn btn--primary">Link Button</a>

Form Inputs

Standard text inputs with labeled grouping and error handling.

Usage: Wrap label and input in .form-group. Use .form-group--error to trigger error styling.

<!-- Default -->
<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="form-input" placeholder="hello@example.com">
</div>

<!-- Error State -->
<div class="form-group form-group--error">
  <label class="form-label">Email</label>
  <input type="email" class="form-input" value="invalid">
  <span class="form-error-message">Invalid email address</span>
</div>

Cards

Flexible content containers with header, body, and footer sections.

<div class="card">
  <div class="card__header">
    <h3 class="card__title">Card Title</h3>
  </div>
  <div class="card__body">
    <p>Main content goes here.</p>
  </div>
  <div class="card__footer">
    <button class="btn btn--primary">Action</button>
  </div>
</div>

Badges

Small labels for status or categorical checks.

Variants: success, warning, error.

<span class="badge badge--success">Active</span>
<span class="badge badge--warning">Pending</span>
<span class="badge badge--error">Failed</span>

Alerts

Contextual feedback messages.

Variants: info, success, error.

<div class="alert alert--info">
  <div class="alert__title">Info</div>
  <div class="alert__text">This is an informational message.</div>
</div>

Navbar

Top-level navigation component.

<nav class="navbar">
  <a href="#" class="navbar__brand">Brand</a>
  <div class="navbar__nav">
    <a href="#" class="navbar__link navbar__link--active">Home</a>
    <a href="#" class="navbar__link">Profile</a>
  </div>
</nav>

Modal

A visual-only dialog component. In a real application, JavaScript would handle the overlay visibility.

<div class="modal-overlay">
  <div class="modal">
    <div class="modal__header">
      <h3 class="modal__title">Title</h3>
      <button class="modal__close">&times;</button>
    </div>
    <div class="modal__body">Request confirmation...</div>
    <div class="modal__footer">
      <button class="btn btn--primary">Confirm</button>
    </div>
  </div>
</div>

Design Tokens (CSS Variables)

This system is built on a set of CSS variables found in :root.

• Colors: --ds-color-primary-*, --ds-color-gray-*, --ds-color-success-*, etc.
• Spacing: --ds-space-xs (4px) to --ds-space-2xl (48px).
• Typography: --ds-font-size-sm to --ds-font-size-2xl.

Example usage in custom CSS:

.my-component {
  padding: var(--ds-space-md);
  color: var(--ds-color-primary-600);
}