Bluestone Design System

📋 O tomto manuálu

Design systém využívající modrou paletu s hlavní barvou #424A5D. Obsahuje ukázky komponent a barevných kombinací.

Manuál slouží jako reference pro jednotný vzhled aplikací. Všechny komponenty používají CSS proměnné pro snadné přizpůsobení.

Co manuál obsahuje:

🎨 Barevná paleta

11 odstínů modré + 6 akcentových barev pro kategorie

🔘 Komponenty

Tlačítka, formuláře, karty a další UI prvky

📐 Layout

Grid systém a responzivní pravidla

🎨 Barevná paleta

Hlavní modrošedá paleta

--blue-950

#1a1d26

--blue-900

#2a2f3d

--blue-800

#353b4d

HLAVNÍ

#424A5D

--blue-600

#525c72

--blue-500

#6b7689

--blue-400

#8892a6

--blue-300

#a8b1c3

--blue-200

#c8d0de

--blue-100

#e4e8f0

--blue-50

#f4f6f9

Akcentové barvy pro kategorie

Komunikace

#06b6d4

Schůzky

#6366f1

Poznámky

#f59e0b

Úkoly

#10b981

Důležité

#f43f5e

Speciální

#8b5cf6

🔘 Tlačítka

Základní varianty

Kategorie s barevným akcentem

Priority s animovanými kolečky

Velikosti a speciální stavy

Speciální stavy

<!-- Základní tlačítko -->
<button class="btn">TLAČÍTKO</button>

<!-- Primární tlačítko -->
<button class="btn primary">PRIMÁRNÍ AKCE</button>

<!-- Tlačítko kategorie s ikonou -->
<button class="btn komunikace">
    <span class="icon">📞</span> KOMUNIKACE
</button>

<!-- Priorita s animovaným kolečkem -->
<button class="btn priority-high">
    <span class="priority-dot"></span>VYSOKÁ
</button>

<!-- Tlačítko pouze s ikonou -->
<button class="btn icon-only">
    <span class="icon">⚙️</span>
</button>
            

📝 Formulářové prvky

Textové pole

Textarea s focus efektem

Vyhledávací pole s ikonou

<!-- Input s modrým focus efektem -->
<input type="text" class="input" placeholder="Zadejte text...">

<!-- Textarea -->
<textarea class="textarea" placeholder="Text..."></textarea>

<!-- Vyhledávání s ikonou -->
<input type="text" class="input search-input" placeholder="Vyhledat...">
            

🏗️ Komponenty

Status bar

Připraveno k práci

Zpracovávám data...

✓ Úspěšně dokončeno

✗ Nastala chyba při zpracování

Storage info s gradientem

Využití úložiště: 2.34 MB z 10 MB (23%)

Toggle sekce s animací

📂 Uložené záznamy (12) ▼

Historie položky s hover efekty

📞 KOMUNIKACE • Dnes 14:32 • 127 slov Vysoká

Důležitý hovor s klientem ohledně nového projektu. Požaduje úpravy designu...

📝 POZNÁMKA • Včera 16:45 • 45 slov Normální

Připravit podklady pro zítřejší prezentaci. Nezapomenout na grafy...

✅ ÚKOL • 25.1.2025 • 89 slov Nízká

Dokončit implementaci nových komponent do konce týdne...

Badges

Výchozí Úspěch Varování Chyba

<!-- Status bar -->
<div class="status-bar info">Zpracovávám data...</div>

<!-- Card komponenta -->
<div class="card">
    <div class="card-header">
        <div class="card-title">Název karty</div>
    </div>
    <div class="card-body">
        Obsah karty...
    </div>
</div>

<!-- Badge -->
<span class="badge success">Dokončeno</span>
            

💼 Ukázka použití

Příklad kombinace komponent:

Vyberte kategorii:

Nastavte prioritu:

💡 Tip: Použijte klávesové zkratky pro rychlejší práci

📊 Využití: 4.2 MB (42%)

📐 Grid System

Základní rozložení pomocí gridu:

2 sloupce

Sloupec 1

Sloupec 2

3 sloupce

1/3

2/3

3/3

<!-- 2 sloupce -->
<div class="grid grid-2">
    <div>Sloupec 1</div>
    <div>Sloupec 2</div>
</div>

<!-- 3 sloupce (responzivní) -->
<div class="grid grid-3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
            

🎨 Přepínač témat

Ukázka možností pro přepínání barevných variant. Lze umístit inline nebo jako plovoucí tlačítko.

Inline varianta

Plovoucí varianta s animací

✨ Animace a přechody

Příklady dostupných animací:

Hover efekty

Interaktivní prvky reagují na hover:

🎯

Hover Card

Hover History Item

🚀 Implementace

1. Základní struktura

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moje Aplikace - Bluestone Design</title>
    
    <!-- Bluestone CSS -->
    <link rel="stylesheet" href="bluestone-design.css">
    
    <!-- Inter font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="demo-container">
        <!-- Váš obsah -->
    </div>
</body>
</html>
            

2. CSS proměnné

Barvy a hodnoty jsou definovány pomocí CSS proměnných:

:root {
    /* Hlavní barva */
    --primary: #424A5D;
    
    /* Použití */
    background-color: var(--blue-700);
    color: var(--blue-100);
    border: 1px solid var(--blue-200);
    box-shadow: var(--shadow-lg);
}
            

3. Responzivní design

Breakpoint na 768px:

Grid se přepíná na 1 sloupec na mobilech
Tlačítka zabírají plnou šířku
Padding a mezery se přizpůsobují
Fonty se škálují

4. Doporučené postupy

✅ Správně

Používat CSS proměnné
Zachovat hierarchii komponent
Dodržovat barevnou paletu
Testovat responzivitu

❌ Špatně

Hardcodovat barvy
Přepisovat základní styly
Ignorovat hover stavy
Zapomenout na mobily

🛠️ Utility třídy

Pomocné třídy pro rychlé úpravy:

Zarovnání textu

.text-center    /* Zarovnat na střed */
.text-left      /* Zarovnat vlevo */
.text-right     /* Zarovnat vpravo */
            

Barvy textu

.text-primary   /* Hlavní modrá */
.text-secondary /* Světlejší modrá */
.text-success   /* Zelená */
.text-warning   /* Oranžová */
.text-error     /* Červená */
            

Spacing

/* Margin top */
.mt-sm  /* 8px */
.mt-md  /* 12px */
.mt-lg  /* 16px */
.mt-xl  /* 20px */

/* Margin bottom */
.mb-sm  /* 8px */
.mb-md  /* 12px */
.mb-lg  /* 16px */
.mb-xl  /* 20px */

/* Padding */
.p-sm   /* 8px */
.p-md   /* 12px */
.p-lg   /* 16px */
.p-xl   /* 20px */
            

📌 Poznámky k použití

💡 Testováno v moderních prohlížečích (Chrome, Firefox, Safari, Edge)

Hlavní barva #424A5D - tmavě modrošedá
Akcentové barvy - používají se pro kategorie a priority
Animace - trvání max 0.3s
Focus stavy - outline pro přístupnost
Hover efekty - posun o 2px nahoru + stín
Stíny - modravý nádech
Border radius - 4px až 8px

Shrnutí

🎨

Barevná paleta

Modrá škála + akcenty

🔘

Komponenty

Připravené k použití

📱

Responzivní

Funguje na všech zařízeních

S ❤️ vytvořil Pavel z MELIORO Systems