XXL Heading (3.5rem)

XL Heading (2.75rem)

Large Heading (1.75rem)

Medium Heading (1.25rem)

Small Text (1rem)

Extra Small Text (0.875rem)

Double Extra Small Text (0.75rem)

<!-- Default Button -->
<button class="Button Button--primary">Click Me</button>

<!-- Outlined Button -->
<button class="Button Button--outlined Button--primary">Outlined</button>

<!-- Small Button -->
<button class="Button Button--primary Button--small">Small</button>

<!-- Small Outlined Button -->
<button class="Button Button--outlined Button--success Button--small">Small Outlined</button>

<span class="Badge Badge--success">Active</span>
<span class="Badge Badge--warning Badge--pill">Pending</span>

<div class="Alert Alert--success">
  <strong>Success!</strong> Operation completed.
</div>

<div class="Card">
  <div class="Card__title">Card Title</div>
  <p>Card content goes here.</p>
</div>

<table class="Table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

--brand-primary
--brand-secondary
--brand-accent
--brand-dark

--semantic-success
--semantic-warning
--semantic-danger
--semantic-info

--fs-xxl: 3.5rem
--fs-xl: 2.75rem
--fs-lg: 1.75rem
--fs-md: 1.25rem
--fs-sm: 1rem
--fs-xs: 0.875rem
--fs-xxs: 0.75rem

• .Button - Button component
• .Badge - Badge component
• .Alert - Alert component
• .Card - Card component
• .Table - Table component
• .Form - Form component
• .Modal - Modal component
• .Nav - Navigation component

.Button--primary
.Button--secondary
.Button--outlined
.Button--small
.Button--large
.Button--rounded

.Badge--success
.Badge--warning
.Badge--pill
.Badge--small

<div class="Form">
  <div class="Form__group">
    <label class="Form__label Form__label--required">Name</label>
    <input type="text" class="Form__input" placeholder="...">
  </div>
  <div class="Form__granularity-buttons">
    <label class="Form__granularity-btn active">Daily</label>
    <label class="Form__granularity-btn">Monthly</label>
  </div>
</div>

<div class="Tabs">
  <nav class="nav-tabs">
    <a class="nav-link active">Tab 1</a>
    <a class="nav-link">Tab 2</a>
  </nav>
  <div class="Tabs__content">...</div>
</div>

<div class="Icon Icon--circular Icon--medium Icon--success">
  <i class="bi bi-check"></i>
</div>

<button class="StatusButton StatusButton--success">
  <i class="bi bi-check-circle"></i> Success
</button>

<!-- Full responsive listing with actions -->
<div class="Listing Listing--responsive">
  <div class="Listing__item">
    <div class="Listing__content Listing__content--single-line">
      <div class="Listing__main">
        <div class="Listing__status Listing__status--supplier">S</div>
        <div class="Listing__info">
          <div class="Listing__name">Item Name</div>
        </div>
      </div>
      <div class="Listing__amount">1,234 kWh</div>
      <div class="Listing__actions">
        <a class="Listing__action Listing__action--primary">View</a>
        <a class="Listing__action Listing__action--secondary">Edit</a>
      </div>
    </div>
  </div>
</div>

<!-- Compact + responsive combo -->
<div class="Listing Listing--compact Listing--responsive">
  ...
</div>

<!-- Standard table with row states -->
<table class="Table Table--small Table--hoverable">
  <thead>
    <tr class="Table__header">
      <th class="Table__header--sortable">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Table__row Table__row--success">
      <td class="Table__cell--positive">+100</td>
    </tr>
  </tbody>
</table>

<!-- Responsive table (cards on mobile) -->
<table class="Table Table--responsive">
  <thead>
    <tr class="Table__header">
      <th>Name</th>
      <th>Status</th>
      <th>Amount</th>
      <th class="Table__cell--actions">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Table__row">
      <td data-label="Name">Item Name</td>
      <td data-label="Status">Active</td>
      <td data-label="Amount">1,234 CZK</td>
      <td class="Table__cell--actions">
        <button class="Button Button--primary">View</button>
      </td>
    </tr>
  </tbody>
</table>

<div class="ProgressBar">
  <div class="ProgressBar__fill ProgressBar__fill--success" style="width: 72%;">
    <span class="ProgressBar__label">72%</span>
  </div>
</div>

<!-- Striped variant -->
<div class="ProgressBar">
  <div class="ProgressBar__fill ProgressBar__fill--warning ProgressBar__fill--striped"
       style="width: 45%;"></div>
</div>

<!-- Text lines -->
<div class="Skeleton Skeleton--text" style="width: 90%;"></div>
<div class="Skeleton Skeleton--text" style="width: 75%;"></div>

<!-- Circle (avatar placeholder) -->
<div class="Skeleton Skeleton--circle" style="width: 3rem; height: 3rem;"></div>

<!-- Rectangle (card placeholder) -->
<div class="Skeleton Skeleton--rect" style="width: 100%; height: 120px;"></div>

<div class="KPICard">
  <div class="KPICard__label">Monthly Revenue</div>
  <div class="KPICard__value">124,500 CZK</div>
  <div class="KPICard__trend KPICard__trend--up">&#9650; +12%</div>
</div>

<!-- Compact variant -->
<div class="KPICard KPICard--compact">...</div>

<!-- With sparkline area -->
<div class="KPICard">
  ...
  <div class="KPICard__sparkline">
    <svg viewBox="0 0 120 32">...</svg>
  </div>
</div>

<div class="Toolbar">
  <div class="Toolbar__group">
    <button class="Button Button--primary Button--small">Add</button>
    <button class="Button Button--outlined Button--primary Button--small">Refresh</button>
  </div>
  <div class="Toolbar__separator"></div>
  <div class="Toolbar__group">
    <button class="Button Button--secondary Button--small">Export</button>
  </div>
</div>

/* Override brand colors per-application */
:root {
  --theme-brand-primary: hsla(33, 100%, 61%, 1);    /* Wattlink orange */
  --theme-brand-secondary: hsla(169, 47%, 49%, 1);  /* Wattlink teal   */
  --theme-brand-dark: hsla(240, 75%, 13%, 1);       /* Deep navy       */
  --theme-brand-accent: hsla(240, 93%, 29%, 1);     /* Royal blue      */
}

/* All components inherit from these properties automatically.
   Switch .Box--light for a white-background variant. */

<%= calendar_month(
  date: @date,
  events: @events,
  prev_path: my_path(date: @date.prev_month),
  next_path: my_path(date: @date.next_month)
) do |event| %>
  <span class="Calendar__event-title"><%= event.title %></span>
  <div class="Calendar__event-actions">
    <%= link_to icon("eye"), event, class: "Calendar__event-action" %>
    <%= link_to icon("pencil"), edit_event_path(event), class: "Calendar__event-action" %>
  </div>
<% end %>

Events must respond to:
  .starts_on  (Date)
  .ends_on    (Date)
  .color      (optional: "primary" | "secondary" | "accent" | "success" | "warning" | "danger" | "info" | "purple" | "dark")

<div class="PeriodRange__buttons">
  <button class="PeriodRange__btn">Day</button>
  <button class="PeriodRange__btn active">
    <span class="PeriodRange__check">&#10003;</span>
    Week
  </button>
  <button class="PeriodRange__btn">Month</button>
</div>

• .Button - Buttons & actions
• .Badge - Status labels
• .Alert - Feedback messages
• .Card - Content containers
• .Table - Data tables
• .Form - Form elements
• .Modal - Dialog overlays
• .Tabs - Tab navigation
• .Nav - App navigation
• .Pagination - Page controls
• .Icon - Icon containers
• .StatCard - Metric cards
• .StatusButton - State buttons
• .Box - Content boxes
• .Listing - List items
• .FilterPanel - Filter sidebar
• .ProgressBar - Progress indicators
• .Skeleton - Loading placeholders
• .KPICard - KPI dashboard cards
• .Toolbar - Action toolbars
• .Avatar - User avatars
• .PricingCard - Pricing tiers
• .Timeline - Activity feeds
• .Calendar - Month calendar
• .CalendarFilter - Calendar event filters
• .FileUpload - File upload area
• .PeriodRange - Period selectors

.Button--primary / --secondary / --success / --danger / --warning / --info
.Button--outlined / --small / --large / --rounded

.Badge--success / --warning / --danger / --pill / --small / --large

.Table--transparent / --small / --hoverable / --collapsible
.Table__row--success / --warning / --danger / --highlighted / --grouped
.Table__cell--numeric / --positive / --negative / --code

.Card--accent-bg / --accent-bg-transparent
.Card__metric / __metric-icon / __metric-label / __metric-value

.StatCard--compact / --border-success / --border-warning / --border-danger
.StatusButton--pending / --running / --success / --error

.Icon--circular / --small / --medium / --large / --xlarge
.Icon--production / --consumption / --sharing / --success / --warning

.Box--compact / --supercompact / --light / --accent-bg
.Listing--compact / --responsive / .Listing__action--primary / --secondary / --danger
.Listing__badge--success / --warning / --info / --secondary

.Nav--vertical / .FilterPanel__toggle / .FilterPanel__group

.ProgressBar__fill--success / --warning / --danger / --info / --primary
.ProgressBar__fill--striped / .ProgressBar__label

.Skeleton--text / --circle / --rect

.KPICard--compact / .KPICard__trend--up / --down
.KPICard__sparkline

.Toolbar__group / .Toolbar__separator

.PricingCard / .PricingCard--featured
.Timeline / .Timeline__item / .Timeline__marker
.Avatar / .Avatar--small / --medium / --large / --xlarge

.Calendar / .Calendar__header / __title / __nav / __nav--placeholder
.Calendar__day--outside / --today / --weekend
.Calendar__event--primary / --secondary / --accent / --success / --warning / --danger / --info / --purple / --dark
.Calendar__event--continues-before / --continues-after
.Calendar__event-title / .Calendar__event-actions / .Calendar__event-action
.CalendarFilter__btn--success / --purple / --danger / --dark / --info
.CalendarFilter__dot

.Listing__info-primary / .Listing__info-secondary

.FileUpload__container / --has-file / --drag-over
.FileUpload__upload-button / __upload-icon / __upload-text / __upload-help
.FileUpload__file-info / __file-icon / __file-name / __file-actions
.FileUpload__current-file / __current-label / __current-name / __download-link

.PeriodRange__buttons / .PeriodRange__btn / .PeriodRange__check