OSiris Design System

Quick Start

Include the CSS in your project:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/noway0w/Design-System-OSiris@main/osiris.css" />

Note: For production, consider using a CDN like jsDelivr or GitHub Pages once deployed.

Core Actions

Primary Button

<button class="btn-primary">Solid Button</button>
<button class="btn-primary gradient">Gradient Button</button>

Icon Button

Toggle Switches

Toggle 1

Toggle 2

Toggle 3

Toggle 3 Usage

The animated toggle requires specific HTML structure and dependency on core-actions.css.

<div class="checkbox-wrapper-44">
  <label class="toggleButton">
    <input type="checkbox">
    <div>
      <svg viewBox="1 4 37 37">
        <path d="M14,24 L21,31 L39.7428882,11.5937758 C35.2809627,6.53125861 30.0333333,4 24,4 C12.95,4 4,12.95 4,24 C4,35.05 12.95,44 24,44 C35.05,44 44,35.05 44,24 C44,19.3 42.5809627,15.1645919 39.7428882,11.5937758" transform="translate(-2.000000, -2.000000)"></path>
      </svg>
    </div>
  </label>
</div>

Dashboard

Metric Tile (KPI)

Total Revenue

$12,450 +12%

Active Users

1,203 -3%

Filter Chips

Status: Active ✕

Role: Admin ✕

Date: Today ✕

Tiles

Current settings

Record new guest

Security mode

Current OSiris state

IP detected 195.139.147.156

FPS client 4 frame/sec

RAM in usage 550 Mb

Server load 11,7%

Current local weather

Temperature

-4,8°C

Humidity

77 %

Memory of the Day

User detected

Edouard

+1.2%

AAPL

$150.00

Gradient Card

Adapts to theme

Tiles Usage

The dashboard tiles are modular components designed for various content types.

Content Tile (Image Background)

Use for immersive content like "Memory of the Day". The image acts as a full-bleed background.

<div class="content-tile">
  <img src="path/to/image.png" class="content-tile-img" alt="Description">
  <div class="content-tile-overlay">
    <div class="content-tile-title">Title Here</div>
  </div>
</div>

User Profile Tile

Designed for user status. Set the background image via inline styles or a custom class.

<div class="user-profile-tile" style="background-image: url('path/to/bg.png');">
  <div class="user-status-header">
    <span class="user-status-text">User detected</span>
    <div class="user-status-dot"></div>
  </div>
  <div class="user-name">Edouard</div>
</div>