Introduction

Speed Cloud UI is the official CSS library of Speed Cloud: lightweight, modern, and built to be distributed and consumed via CDN. It provides a solid foundation of components, utilities, and design tokens that follow the Speed Cloud brand guidelines, without imposing a complex architecture.

The library is:

On-brand: Colors, typography (Titillium Web) and logo follow the official Speed Cloud charter
Lightweight: Minimal CSS, no JavaScript dependencies
Accessible: Built with semantic HTML and WCAG guidelines
Customizable: Extensive CSS variables for theming
Versioned: Immutable releases for production stability
Fast: Optimized for minimal file size and network performance

Installation

Quick Start

Add this single line to your HTML head:

<link rel="stylesheet" href="https://cdn.syselia.net/css/core/1.0.0/core.min.css">

Including Components

To use additional components, add both files:

<link rel="stylesheet" href="https://cdn.syselia.net/css/core/1.0.0/core.min.css">
<link rel="stylesheet" href="https://cdn.syselia.net/css/components/1.0.0/components.min.css">

CSS vs Minified CSS

Use minified (.min.css) in production: Smaller file size, faster loading, recommended for all production sites.

Use unminified (.css) for development: Easier to debug, read source maps, and understand the original code.

File size comparison:

core.css ~30 KB (development)
core.min.css ~23 KB (production)
components.css ~22 KB (development)
components.min.css ~13 KB (production)

Versions

All CSS files are versioned and immutable. Once published, a version never changes. Always use specific version numbers in production.

Current Versions

Library	Version	URL Pattern	Status
Core	1.0.0	`/css/core/1.0.0/core.min.css`	Stable
Components	1.0.0	`/css/components/1.0.0/components.min.css`	Stable

Versioning Strategy

This library follows Semantic Versioning (SemVer):

MAJOR: Breaking changes to CSS classes or variables
MINOR: New features, backward compatible
PATCH: Bug fixes, no new features

Pinning Versions

Always pin versions in production. Never use latest without testing, as new versions may contain changes.

⚠️ Avoid: https://cdn.syselia.net/css/core/latest/core.min.css - Use specific versions instead

Core Library

The core library provides essential styles, reset rules, typography, and foundational components.

What's Included

CSS variables for colors, spacing, typography, radius, shadows, and z-index
Extended reset (typography, images, lists, blockquote, tables, forms)
12-column responsive grid system (.container, .row, .col-*) plus a CSS Grid alternative
Buttons: solid, ghost, sizes, and button groups
Full form controls: text inputs, textarea, select, checkbox, radio, switch/toggle, input groups, file input, validation states
Cards (.card, .card-header, .card-body, .card-footer)
Alerts, including a dismissible variant with a close button
Badges (.badge, .badge-primary, .badge-secondary, .badge-success, .badge-warning, .badge-danger)
A comprehensive utility system: flexbox, position, overflow, borders, sizing, backgrounds, text, and more

Example: Buttons

Live Preview

Primary

Secondary

Danger

Disabled

<button class="button button-primary">
  Primary Button
</button>

<button class="button button-secondary">
  Secondary Button
</button>

<button class="button button-danger">
  Danger Button
</button>

Example: Cards

Live Preview

Card Title

This is a card component. It provides a container for content with consistent styling and spacing.

<div class="card">
  <div class="card-header">
    <h4>Card Title</h4>
  </div>
  <div class="card-body">
    <p>Card content goes here</p>
  </div>
  <div class="card-footer">
    <button class="button">Action</button>
  </div>
</div>

Button Variants

Live Preview

Ghost

Small

Large

Button Group

<div class="button-group">
  <button class="button button-secondary">Day</button>
  <button class="button button-secondary">Week</button>
  <button class="button button-secondary">Month</button>
</div>

Typography

Headings, body text, and inline elements are styled by the reset — no classes required.

Live Preview

Heading 1

Heading 2

Heading 3

Regular paragraph text with an inline link, some bold and italic text, and inline code.

Speed Cloud UI ships with a fully styled typographic reset. — Documentation

Unordered list item
Another item

Press Ctrl + C to copy. Use mark to highlight text, CSS for abbreviations, and H₂O / 10² for sub/superscript.

Small print text, e.g. for footnotes or fine print.

<h1>Heading 1</h1>
<p>Text with <strong>bold</strong>, <em>italic</em>, <code>inline code</code>.</p>

<blockquote>
  Quoted text.
  <cite>— Source</cite>
</blockquote>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd>. Use <mark>mark</mark> to highlight.</p>

Grid System

A 12-column responsive grid: .container, .row, and .col-* (with .col-md-* / .col-lg-* breakpoint variants). A CSS Grid alternative is also available via .grid and .grid-cols-*.

Live Preview

col-4

<div class="row">
  <div class="col-4">...</div>
  <div class="col-4">...</div>
  <div class="col-4">...</div>
</div>

<!-- Stacks on mobile, 3-up from md breakpoint -->
<div class="row">
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
</div>

Form Controls

Live Preview

Checkbox — checked

Radio — option A

Radio — option B

Enable notifications

<div class="form-check">
  <input type="checkbox" id="c1" checked>
  <label for="c1">Checkbox</label>
</div>

<label class="switch">
  <input type="checkbox" checked>
  <span>Enable notifications</span>
</label>

Input Group & Validation

Live Preview

https://

Email Veuillez entrer une adresse email valide.

<div class="input-group">
  <span class="input-group-addon">https://</span>
  <input type="text" placeholder="votre-site.com">
</div>

<input type="email" class="is-invalid">
<span class="invalid-feedback">Email invalide.</span>

Dismissible Alert

Live Preview

Cette alerte peut être fermée.

<div class="alert alert-info alert-dismissible">
  Cette alerte peut être fermée.
  <button class="alert-close" aria-label="Fermer">&times;</button>
</div>

Components

The components library extends core with rich, interactive UI elements — including modal, dropdown, tabs, accordion, off-canvas, toast, popover, skeleton loaders, and a stepper. Include components.min.css after core.min.css. Almost every interactive component here is pure CSS, built on native HTML (<details>, :target, checkbox/radio hacks) — no JavaScript framework required.

Navigation

Live Preview

Tables

Live Preview

Feature	Core	Components
Buttons	✓	✓
Navigation	—	✓
Tables	—	✓

Alerts

Live Preview

ℹ️ Information alert - Use for general information

✓ Success alert - Use when an action succeeds

⚠️ Warning alert - Use to warn about something

✗ Error alert - Use when something fails

Pagination

Live Preview

←
1
2
3
→

Badges

Live Preview

Primary Badge

Secondary Badge

Success Badge

Dropdown

Built on the native <details>/<summary> elements — no JavaScript required.

Live Preview

Accordion

Also built on <details>/<summary> — each item opens independently, no JavaScript.

Live Preview

Qu'est-ce que Speed Cloud UI ?

La bibliothèque CSS officielle de Speed Cloud, distribuée via CDN.

Faut-il du JavaScript ?

Non — la quasi-totalité des composants interactifs fonctionnent en CSS pur.

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-header">Question 1</summary>
    <div class="accordion-body">Réponse 1</div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-header">Question 2</summary>
    <div class="accordion-body">Réponse 2</div>
  </details>
</div>

Tabs

Radio inputs + labels, pure CSS. Supports up to 5 tabs per group with this technique.

Live Preview

Profil Sécurité Facturation

Contenu de l'onglet Profil.

Contenu de l'onglet Sécurité.

Contenu de l'onglet Facturation.

<div class="tabs">
  <input type="radio" name="tabset" id="tab-1" class="tab-input" checked>
  <label for="tab-1" class="tab-label">Profil</label>
  <input type="radio" name="tabset" id="tab-2" class="tab-input">
  <label for="tab-2" class="tab-label">Sécurité</label>

  <div class="tab-panel">Contenu Profil</div>
  <div class="tab-panel">Contenu Sécurité</div>
</div>

Modal

CSS-only via the :target technique — an anchor link opens it, another closes it.

Live Preview

Ouvrir la modale

Off-canvas / Drawer

Checkbox-hack technique — a hidden checkbox toggles a sliding panel, no JavaScript.

Live Preview

Ouvrir le menu

<input type="checkbox" id="drawer" class="off-canvas-toggle">
<label for="drawer" class="off-canvas-backdrop"></label>
<aside class="off-canvas">
  <div class="off-canvas-header">
    <h3>Menu</h3>
    <label for="drawer" class="modal-close">&times;</label>
  </div>
  <div class="off-canvas-body">...</div>
</aside>
<label for="drawer" class="button button-primary">Ouvrir</label>

Toast

Positioning and animation are pure CSS. Since a toast is triggered by an app event, mounting/dismissing it is left to a couple of lines of your own JavaScript.

Live Preview

Enregistré avec succès.

<div class="toast-container toast-container-bottom-right">
  <div class="toast toast-success">
    <div class="toast-body">Enregistré avec succès.</div>
  </div>
</div>

<script>
// Minimal JS to mount a toast on some app event:
document.querySelector('.toast-container').insertAdjacentHTML('beforeend',
  '<div class="toast"><div class="toast-body">Done!</div></div>');
</script>

Popover

A richer, click/hover/focus-triggered tooltip for longer content — CSS only.

Live Preview

Skeleton Loader

Live Preview

<div class="skeleton skeleton-avatar"></div>
<div class="skeleton skeleton-title"></div>
<div class="skeleton skeleton-text"></div>

Stepper

Live Preview

✓Compte
2Détails
3Confirmation

<ol class="stepper">
  <li class="stepper-item completed">
    <span class="stepper-circle">&#10003;</span>
    <span class="stepper-label">Compte</span>
  </li>
  <li class="stepper-item active">
    <span class="stepper-circle">2</span>
    <span class="stepper-label">Détails</span>
  </li>
</ol>

Timeline

Live Preview

Février 2025

Charte graphique publiée

Palette, typographie et logo officiels de Speed Cloud.
Août 2026

Speed Cloud UI v1.0.0

Première version de la bibliothèque CSS, distribuée via CDN.

<ul class="timeline">
  <li class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-date">Février 2025</div>
    <h4>Charte graphique publiée</h4>
    <p>Description</p>
  </li>
</ul>

Rating

A reversed radio group — pure CSS, keyboard accessible, no JavaScript.

Live Preview

★ ★ ★ ★ ★

<div class="rating">
  <input type="radio" id="star5" name="rating">
  <label for="star5" title="5 stars">★</label>
  <input type="radio" id="star4" name="rating">
  <label for="star4" title="4 stars">★</label>
  <input type="radio" id="star3" name="rating" checked>
  <label for="star3" title="3 stars">★</label>
</div>

Stat / KPI Card

Live Preview

12.4K

Utilisateurs actifs

↑ 8.2%

2.1%

Taux de rebond

↓ 1.4%

<div class="stat-card">
  <div class="stat-value">12.4K</div>
  <div class="stat-label">Utilisateurs actifs</div>
  <span class="stat-change stat-change-up">↑ 8.2%</span>
</div>

Empty State

Live Preview

📭

Aucun résultat

Essayez de modifier vos filtres de recherche.

<div class="empty-state">
  <div class="empty-state-icon">📭</div>
  <h4>No results</h4>
  <p>Try adjusting your search filters.</p>
  <button class="button button-primary button-small">Reset</button>
</div>

Notification Banner

Site-wide announcement bar, dismissible via a checkbox hack (no JavaScript). For a dismissal that persists across page loads, pair it with a couple of lines of your own JS to remember the choice (e.g. in localStorage).

Live Preview

Icons

42 line icons drawn to match the stroke style of the Speed Cloud logo, distributed as css/icons/1.0.0/icons.min.css. Each icon is an inline SVG applied via mask-image, so it inherits and recolors with color — no icon font, no JavaScript, no external requests.

Installation

<link rel="stylesheet" href="https://cdn.syselia.net/css/core/1.0.0/core.min.css">
<link rel="stylesheet" href="https://cdn.syselia.net/css/icons/1.0.0/icons.min.css">

All Icons

Live Preview — click any icon to copy its class name

check

close

chevron-down

chevron-up

chevron-left

chevron-right

arrow-right

arrow-left

plus

minus

search

menu

user

settings

home

mail

bell

heart

star

trash

edit

download

upload

external-link

info

warning

lock

eye

calendar

clock

sun

moon

arrow-up

arrow-down

filter

refresh

copy

share

more-vertical

shield

log-out

phone

<span class="icon icon-check"></span>
<span class="icon icon-heart"></span>
<span class="icon icon-settings"></span>

Sizes & Colors

Icons inherit color, so they work with the existing .text-* utilities, and scale with .icon-xs / .icon-sm / (default 1.25rem) / .icon-lg / .icon-xl / .icon-2xl.

Live Preview

Sizes

Colors

In a button

<span class="icon icon-lg icon-heart text-brand"></span>

<button class="button button-primary">
  <span class="icon icon-sm icon-download"></span> Download
</button>

Utility Classes

A complete set of utility classes for spacing, layout, flexbox, positioning, borders, sizing, and typography — enough to build most layouts without writing custom CSS.

Spacing

.m-0 … .m-xl, .m-auto — margin (all sides)

.mt-*, .mb-*, .ml-*, .mr-* — directional margins

.mx-auto, .mx-md, .my-md, .my-lg — axis margins

.p-0 … .p-xl, .px-*, .py-*, .pt-*, .pb-*, .pl-*, .pr-* — padding

.gap-0 … .gap-xl — flex/grid gap

Typography

.text-center, .text-left, .text-right, .text-justify — alignment

.text-primary, .text-secondary, .text-tertiary, .text-brand, .text-success, .text-warning, .text-danger — colors

.text-xs … .text-2xl — font sizes

.font-light, .font-normal, .font-semibold, .font-bold, .font-black — font weights

.text-uppercase, .text-lowercase, .text-capitalize — case transforms

.text-truncate, .text-nowrap, .text-wrap, .text-break — wrapping/overflow

.leading-tight, .leading-normal, .leading-loose — line-height

Display & Flexbox

.hidden, .block, .inline, .inline-block, .flex, .inline-flex, .grid-display — display values, with .md\:* / .lg\:* responsive variants for hidden/block/flex

.flex-row, .flex-col, .flex-wrap, .flex-1, .flex-grow, .flex-shrink-0 — flex behavior

.items-start/center/end/stretch, .justify-start/center/end/between/around, .self-start/center/end — flex alignment

.flex-center — shorthand for centered flex content

Grid & Layout

.container, .container-sm/md/lg/xl/2xl, .container-fluid — max-width wrappers

.row, .col, .col-1 … .col-12, .col-md-*, .col-lg-* — 12-column responsive grid (see Core → Grid System)

.grid, .grid-cols-1/2/3/4/6 — CSS Grid alternative

Position & Overflow

.static, .relative, .absolute, .fixed, .sticky — position values

.inset-0, .top-0, .right-0, .bottom-0, .left-0 — offsets

.overflow-hidden, .overflow-auto, .overflow-scroll, .overflow-visible, .overflow-x-auto, .overflow-y-auto

Sizing, Borders & Backgrounds

.w-full, .w-auto, .w-1/2, .w-1/3, .w-1/4, .max-w-full, .h-full, .min-h-screen

.border, .border-0, .border-t/b/l/r, .border-brand — borders

.rounded-none/sm/md(default)/lg/full — border radius

.bg-primary, .bg-secondary, .bg-tertiary, .bg-brand, .bg-transparent — backgrounds

.shadow-none/sm/md/lg — box shadows

Media & Text Clamping

.aspect-square, .aspect-video, .aspect-portrait — fixed aspect-ratio boxes for images/embeds

.object-cover, .object-contain, .object-fill — how media fills its box

.line-clamp-1/2/3 — truncate text to N lines with an ellipsis

Print

.print-hidden — hides an element only in @media print, e.g. navigation or buttons that shouldn't appear on a printed page

Other

.opacity-0/50/75/100 — opacity values

.cursor-pointer, .cursor-not-allowed, .cursor-default

.select-none, .pointer-events-none — interaction control

.sr-only — visually hidden, still readable by screen readers

CSS Variables

All colors, spacing, typography, and other design tokens are available as CSS variables. The values below are the official Speed Cloud brand colors — use them directly, or override them to adapt the library while keeping the same class names.

Speed Cloud Brand Palette

--brand-lightest

#f1e7fd

Lightest tint — page text on dark backgrounds, light-mode surfaces

--brand-light

#d8bdfa

Light tint — secondary text, hover states

--brand-primary

#8a4dfd

Primary brand color — buttons, links, accents

--brand-dark

#592aa9

Dark tint — hover/active states, borders

--brand-darker

#290654

Darker tint — card and section backgrounds

--brand-darkest

#130326

Darkest tint — default page background

Functional State Colors

These are not part of the brand palette — they are standard, accessible status colors used for alerts, badges and form validation.

--color-success

#10b981

Success state color

--color-warning

#f59e0b

Warning state color

--color-danger

#dc2626

Danger/Error color

--color-info

#3b82f6

Informational color

Typography

--font-family-sans

Titillium Web

Official Speed Cloud typeface, loaded from Google Fonts in core.css

Spacing Scale

--spacing-xs

0.25rem (4px)

Extra small spacing

--spacing-sm

0.5rem (8px)

Small spacing

--spacing-md

1rem (16px)

Medium spacing (default)

--spacing-lg

1.5rem (24px)

Large spacing

--spacing-xl

2rem (32px)

Extra large spacing

Using Variables in Your CSS

:root {
  --brand-primary: #8a4dfd;
  --brand-darkest: #130326;
  --brand-lightest: #f1e7fd;
}

body {
  background: var(--brand-darkest);
  color: var(--brand-lightest);
}

.custom-button {
  background: var(--brand-primary);
  color: var(--brand-lightest);
}

Responsive Design

Speed Cloud UI is mobile-first and responsive by default. All components adapt to different screen sizes.

Breakpoints

--breakpoint-sm

640px

Small devices

--breakpoint-md

768px

Tablets

--breakpoint-lg

1024px

Desktops

--breakpoint-xl

1280px

Large desktops

Responsive Behavior

All components work on mobile by default
Navigation adapts to smaller screens
Tables become scrollable on mobile
Buttons stack on small devices
Spacing and font sizes scale appropriately

Example: Responsive CSS

/* Mobile first approach */
.container {
  padding: var(--spacing-md);
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: var(--spacing-lg);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Personnalisation

Le logo, la police et la palette de couleurs sont ceux de la Charte graphique Speed Cloud (Février 2025).

Logo

Live Preview

Sur fond clair

Sur fond sombre

Favicon / icône seule

Fichiers : assets/logo.svg (variante violette, pour fonds clairs), assets/logo-dark.svg (variante claire, pour fonds sombres), assets/favicon.svg (icône seule, favicon du navigateur). Pour remplacer le logo dans le futur, il suffit de garder les mêmes noms de fichiers et chemins ; le nom affiché à côté (attribut alt, en-tête, pied de page) suit automatiquement la config BRAND décrite plus bas.

Police d'écriture

Titillium Web

The quick brown fox jumps over the lazy dog

Speed Cloud

Chargée automatiquement par core.min.css depuis Google Fonts. Pour un environnement sans dépendance externe, auto-hébergez Titillium Web et remplacez la règle @import en tête de fichier.

Couleurs de marque

Toutes les couleurs de marque sont pilotées par 6 variables (voir la section Variables). Il suffit de les redéfinir après l'inclusion de core.min.css pour adapter l'ensemble de la bibliothèque à une évolution de charte, sans toucher aux classes existantes.

Mode clair / sombre

Le thème sombre est l'identité par défaut de la marque. Un thème clair est disponible en opt-in via data-theme="light" sur <html> ou <body> — les mêmes 6 couleurs de marque sont simplement réutilisées dans l'autre sens, donc tous les composants restent cohérents dans les deux modes.

Live Preview — cliquez pour basculer

Aperçu du thème

Ce bloc utilise --bg-primary / --text-primary ; basculez le thème pour voir les mêmes composants s'adapter.

Badge

<html data-theme="light"> <!-- or omit for dark (default) -->

<button onclick="
  const html = document.documentElement;
  const isLight = html.getAttribute('data-theme') === 'light';
  html.setAttribute('data-theme', isLight ? 'dark' : 'light');
  localStorage.setItem('theme', isLight ? 'dark' : 'light');
">
  <span class="icon icon-sun"></span> Toggle theme
</button>

<script>
  // Restore the saved preference on page load
  const saved = localStorage.getItem('theme');
  if (saved) document.documentElement.setAttribute('data-theme', saved);
</script>

Les interdits

⚠️ Ne jamais recolorer le logo en dehors de la palette officielle (pas de vert, rouge, ou autre teinte hors charte) et ne jamais l'appliquer sur un fond dégradé doré ou à faible contraste.

Autres éléments personnalisables

Nom du projet : titre et meta-données dans <head> de index.html
Espacements et rayons : --spacing-* et --radius-* dans core.css
Icônes et images : dossier assets/

Complete Examples

Basic Landing Page

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>My Site</title>
  <link rel="stylesheet"
        href="https://cdn.syselia.net/css/core/1.0.0/core.min.css">
</head>
<body>
  <header>
    <h1>Welcome</h1>
    <p>This is a simple site using Speed Cloud UI</p>
  </header>

  <main>
    <div class="card">
      <div class="card-body">
        <h2>Content</h2>
        <p>Your content here</p>
        <button class="button button-primary">
          Get Started
        </button>
      </div>
    </div>
  </main>
</body>
</html>

Form with Validation

<form>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="you@example.com">
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" placeholder="Your message..."></textarea>
  </div>

  <div class="alert alert-info">
    All fields are required
  </div>

  <button type="submit" class="button button-primary">
    Submit
  </button>
</form>

Changelog

Version history and release notes for Speed Cloud UI.

1.0.0 — August 1, 2026

Added

Initial release of Speed Cloud UI
Full alignment with the Speed Cloud brand charter: color palette, Titillium Web typeface, and the official logo
Core CSS with extended reset, typography, 12-column grid system, and forms
Button styles with multiple variants, sizes, and button groups
Full form controls: checkbox, radio, switch/toggle, input groups, file input, validation states
Card component system
Alert (incl. dismissible) and badge components
New interactive components, all CSS-only: modal, dropdown, tabs, accordion, off-canvas/drawer, toast, popover, skeleton loader, stepper
Icons library: 42 line icons, recolorable via currentColor, no icon font or JavaScript
Opt-in light theme via data-theme="light", using the same 6 brand colors in reverse
New components: Timeline, Rating (CSS-only), Notification Banner, Stat/KPI Card, Empty State
New utilities: aspect-ratio, object-fit, multi-line text clamping, print visibility
Official Speed Cloud logo integrated (assets/logo.svg, logo-dark.svg, favicon.svg), replacing the earlier placeholders
Centralized BRAND config: project name, tagline, and version now update everywhere (title, meta tags, header, footer) from one place, alongside the logo
Comprehensive CSS variables, including a full z-index scale for stacking contexts
Responsive design for all screen sizes
Complete documentation and examples for every component

Features

25+ CSS components included
100+ utility classes
Mobile-first responsive design
WCAG 2.1 AA accessibility compliance
Minified and unminified versions
Components library for advanced UI, almost entirely JavaScript-free

Documentation

Interactive component examples
Installation instructions
Variable reference guide
Responsive design guide
Versioning strategy explained

Introduction

Installation

Quick Start

Including Components

CSS vs Minified CSS

Versions

Current Versions

Versioning Strategy

Pinning Versions

Core Library

What's Included

Example: Buttons

Example: Cards

Card Title

Button Variants

Typography

Heading 1

Heading 2

Heading 3

Grid System

Form Controls

Input Group & Validation

Dismissible Alert

Components

Navigation

Tables

Alerts

Pagination

Badges

Dropdown

Accordion

Tabs

Modal

Confirmer l'action

Off-canvas / Drawer

Toast

Popover

Skeleton Loader

Stepper

Timeline

Charte graphique publiée

Speed Cloud UI v1.0.0

Rating

Stat / KPI Card

Empty State

Aucun résultat

Notification Banner

Icons

Installation

All Icons

Sizes & Colors

Utility Classes

Spacing

Typography

Display & Flexbox

Grid & Layout

Position & Overflow

Sizing, Borders & Backgrounds

Media & Text Clamping

Print

Other

CSS Variables

Speed Cloud Brand Palette

Functional State Colors

Typography

Spacing Scale

Using Variables in Your CSS

Responsive Design

Breakpoints

Responsive Behavior

Example: Responsive CSS

Personnalisation

Logo

Police d'écriture

Couleurs de marque

Mode clair / sombre

Les interdits

Autres éléments personnalisables

Complete Examples

Basic Landing Page