Design Language

D'n'A Cruises design language je postaven na moderních principech tech startupů s dual approach - Friendly mode pro crew a Dense mode pro management.

Core Principles

Dual Design Approach

Systém podporuje dva styly podle kontextu použití:

Friendly Mode (Loader/Crew): Přehledné, "ramp friendly" rozhraní s velkými prvky, generózním whitespace, minimálním klikáním
Dense Mode (Producer/Admin): Husté, excel-like tabulky pro management a plánování s maximální informační hustotou

Design Philosophy

Sharp, Modern Aesthetic: Ostré hrany (no rounded corners) jako Cursor/Coder.com - clean, tech-forward look
Minimalistický elegance: Čistý design s generózním whitespace (pro friendly mode)
Moderní typografie: Velké, bold headings s jemnou hierarchy
Visible Glassmorphism: Výrazný glassmorphism efekt s backdrop-blur pro depth
Cyan/Blue Gradients: Moderní cyan/blue gradienty místo plochých barev
Smooth interactions: Plynulé animace a transitions s hover efekty
Dark-first: Dark mode jako primární, s možností light mode
Premium feel: Vysoká kvalita vizuálů, jemné detaily

Color Palette

Primary Colors

Primary Blue

Hex: #3B82F6
Tailwind: blue-500
Usage: Hlavní akční barva pro buttons, links, primary actions

Primary Cyan

Hex: #06B6D4
Tailwind: cyan-500
Usage: Accent barva pro highlights, secondary actions

Primary Gradient

Tailwind: from-blue-600 via-cyan-500 to-blue-500
Usage: Hero sections, prominent CTAs, brand elements

Background Colors

Background Dark

Hex: #0F172A
Tailwind: slate-900
Usage: Hlavní pozadí aplikace

Background Gradient

Tailwind: from-slate-900 via-slate-800 to-slate-900
Usage: Page backgrounds, hero sections

Surface Dark

RGBA: rgba(15, 23, 42, 0.8)
Usage: Semi-transparent surfaces, overlays

Surface Glass

RGBA: rgba(255, 255, 255, 0.1) with backdrop-blur-lg
Usage: Glassmorphism cards, modals, floating elements

Text Colors

Text Primary

Hex: #F8FAFC
Tailwind: slate-50
Usage: Hlavní text, headings

Text Secondary

Hex: #CBD5E1
Tailwind: slate-300
Usage: Sekundární text, descriptions

Text Muted

Hex: #94A3B8
Tailwind: slate-400
Usage: Muted text, placeholders, hints

Status Colors

Success

Hex: #10B981
Tailwind: green-500
Usage: Success messages, positive indicators

Warning

Hex: #F59E0B
Tailwind: amber-500
Usage: Warning messages, caution indicators

Error

Hex: #EF4444
Tailwind: red-500
Usage: Error messages, destructive actions

Info

Hex: #3B82F6
Tailwind: blue-500
Usage: Informational messages, info indicators

Dense Mode Specific Colors

Table Background

Hex: #1E293B
Tailwind: slate-800
Usage: Table backgrounds v dense mode

Table Border

RGBA: rgba(148, 163, 184, 0.2)
Tailwind: border-slate-400/20
Usage: Table cell borders

Row Hover

RGBA: rgba(59, 130, 246, 0.1)
Tailwind: bg-blue-500/10
Usage: Table row hover state

Typography

Font Family

Primary Font

Name: Inter
Fallback: system-ui, -apple-system, sans-serif
Usage: Všechny texty v aplikaci
Source: Google Fonts nebo local

Monospace Font

Name: JetBrains Mono nebo Fira Code
Fallback: 'Courier New', monospace
Usage: Čísla, kódy, data v dense mode tabulkách

Brand Font

Name: Inter (s custom weight pro "D'n'A Cruises")
Usage: Branding, logo text

Font Sizes - Friendly Mode

Size Name	Size	Tailwind	Usage
Display	4rem (64px)	`text-6xl`	Velké hero texty
H1	3rem (48px)	`text-5xl`	Hlavní nadpisy
H2	2rem (32px)	`text-3xl`	Sekční nadpisy
H3	1.5rem (24px)	`text-2xl`	Podsekce
Body Large	1.125rem (18px)	`text-lg`	Důležitý text
Body	1rem (16px)	`text-base`	Standardní text
Body Small	0.875rem (14px)	`text-sm`	Pomocný text
Caption	0.75rem (12px)	`text-xs`	Popisky

Font Sizes - Dense Mode

Size Name	Size	Tailwind	Usage
Table Header	0.875rem (14px)	`text-sm`	Kompaktní table headers
Table Cell	0.8125rem (13px)	`text-[13px]`	Velmi kompaktní table cells
Compact Body	0.875rem (14px)	`text-sm`	Kompaktní body text

Font Weights

Weight Name	Value	Tailwind	Usage
Light	300	`font-light`	Subtle text
Regular	400	`font-normal`	Standardní text
Medium	500	`font-medium`	Důležitý text
Semibold	600	`font-semibold`	Headings, emphasis
Bold	700	`font-bold`	Strong emphasis

Line Heights

Name	Value	Tailwind	Usage
Tight	1.2	`leading-tight`	Headings
Normal	1.5	`leading-normal`	Body text
Relaxed	1.75	`leading-relaxed`	Friendly mode body
Compact	1.3	`leading-[1.3]`	Dense mode text

Components

Friendly Mode Components

Cards

Background: Glassmorphism (rgba(15, 23, 42, 0.7) with backdrop-blur-20px)
Border: border border-white/15 (1px solid)
Padding: Generózní (p-8)
Border Radius: 0 (ostré hrany) - žádné zaoblení
Shadow: shadow-2xl

Example:

<div className="card-friendly">
  {/* Card content - automaticky má glassmorphism a ostré hrany */}
</div>

CSS Utility:

.card-friendly {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0; /* Sharp edges */
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

Buttons

Primary: Cyan/Blue gradient (linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%)) s hover efekty
Secondary: Glassmorphism s border (rgba(255, 255, 255, 0.05) background)
Size: Velké touch targets (min 44x44px)
Border Radius: 0 (ostré hrany) - žádné zaoblení
Hover: transform: translateY(-1px) + shadow pro depth

Example:

<button className="btn-primary">Action</button>
<button className="btn-secondary">Cancel</button>

CSS:

.btn-primary {
  background: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 0; /* Sharp edges */
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0891B2 0%, #2563EB 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(6, 182, 212, 0.3);
}

Inputs

Background: rgba(30, 41, 59, 0.6) (dark glass)
Border: 1px solid rgba(255, 255, 255, 0.1)
Padding: px-4 py-3
Border Radius: 0 (ostré hrany) - žádné zaoblení
Focus: Cyan border (rgba(6, 182, 212, 0.5)) + shadow
Transitions: transition-all

Example:

<input className="input-friendly" />

CSS:

.input-friendly {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0; /* Sharp edges */
}

.input-friendly:focus {
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
  background: rgba(30, 41, 59, 0.8);
}

Icons

Size: Větší (w-6 h-6, w-8 h-8)
Style: Clean line icons
Color: Inherit text color

Dense Mode Components

Tables

Background: bg-slate-800
Border: border border-slate-400/20
Padding: Kompaktní (px-2 py-1.5)
Font: Monospace pro čísla
Line Height: Compact (leading-[1.3])
Font Size: text-sm nebo text-[13px]

Example:

<table className="w-full bg-slate-800 border border-slate-400/20">
  <thead>
    <tr className="border-b border-slate-400/20">
      <th className="px-2 py-1.5 text-sm font-semibold text-left">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-slate-400/20 hover:bg-blue-500/10">
      <td className="px-2 py-1.5 text-[13px] font-mono">12345</td>
    </tr>
  </tbody>
</table>

Buttons (Dense)

Size: Menší (px-3 py-1.5 text-sm)
Inline styling
Kompaktní rounded (rounded)

Inputs (Dense)

Compact: px-2 py-1 text-sm
Inline editing možnosti
Minimal borders

Spacing Scale

Friendly Mode Spacing

Name	Size	Tailwind	Usage
XS	0.5rem (8px)	`space-2`	Tight spacing
SM	1rem (16px)	`space-4`	Small spacing
MD	1.5rem (24px)	`space-6`	Medium spacing
LG	2rem (32px)	`space-8`	Large spacing
XL	3rem (48px)	`space-12`	Extra large spacing
2XL	4rem (64px)	`space-16`	Section spacing

Dense Mode Spacing

Name	Size	Tailwind	Usage
XS	0.25rem (4px)	`space-1`	Very tight spacing
SM	0.5rem (8px)	`space-2`	Small spacing
MD	0.75rem (12px)	`space-3`	Medium spacing
LG	1rem (16px)	`space-4`	Large spacing

Design Tokens

Tailwind Configuration

Všechny design tokens jsou definovány v apps/web/tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        // Custom colors jsou již v Tailwind (slate, blue, cyan, etc.)
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      fontSize: {
        'display': ['4rem', { lineHeight: '1.2' }],
        // ... další velikosti
      },
    },
  },
}

Usage Guidelines

Kdy použít Friendly Mode

Load Session Interface: Pro týmy při nakládce, velké prvky, minimální klikání
Wallboard: TV-friendly, velké, čitelné prvky
Settings: User-friendly rozhraní
Login Page: Moderní, elegantní, generózní spacing
Inventory Interface: Pro crew při inventuře

Kdy použít Dense Mode

Load Planning Interface: Pro Producer/Admin při plánování, excel-like tabulky
Items/Assets Management: Kompaktní tabulky s maximální informací
Kits Management: Dense data interface
Projects Management: Husté zobrazení pro rychlé přehledy
Users Management: Kompaktní tabulky
Audit Log: Dense mode pro rychlé procházení

Hybrid Approach

Některé stránky mohou mít:

Toggle mezi Friendly/Dense mode
Automaticky podle role uživatele
Kontextově podle typu operace

Examples

Friendly Mode Card Example

<div className="card-friendly space-y-6">
  <h2 className="text-5xl font-bold text-white">Card Title</h2>
  <p className="text-lg text-slate-300 font-medium">
    Card content with generous spacing and readable text.
  </p>
  <button className="btn-primary">
    Action
  </button>
</div>

Key Design Elements:

Sharp edges: border-radius: 0 (no rounded corners)
Glassmorphism: Visible backdrop-blur with semi-transparent background
Cyan/Blue gradients: Modern gradient buttons
Large typography: Bold, prominent headings

Dense Mode Table Example

<table className="w-full bg-slate-800 border border-slate-400/20">
  <thead>
    <tr className="border-b border-slate-400/20 bg-slate-800/50">
      <th className="px-2 py-1.5 text-sm font-semibold text-left text-slate-300">ID</th>
      <th className="px-2 py-1.5 text-sm font-semibold text-left text-slate-300">Name</th>
      <th className="px-2 py-1.5 text-sm font-semibold text-right text-slate-300 font-mono">Qty</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-slate-400/20 hover:bg-blue-500/10 transition-colors">
      <td className="px-2 py-1.5 text-[13px] font-mono text-slate-200">12345</td>
      <td className="px-2 py-1.5 text-[13px] text-slate-200">Item Name</td>
      <td className="px-2 py-1.5 text-[13px] font-mono text-right text-slate-200">42</td>
    </tr>
  </tbody>
</table>

For Developers

Using Design Tokens in Code

Všechny design tokens jsou dostupné přes Tailwind třídy:

// Friendly mode card
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8">
  <h1 className="text-5xl font-bold text-slate-50">Title</h1>
  <p className="text-base text-slate-300 leading-relaxed">Content</p>
</div>

// Dense mode table
<table className="bg-slate-800 border border-slate-400/20">
  <td className="px-2 py-1.5 text-[13px] font-mono">Data</td>
</table>

Custom Utilities

Glassmorphism utility:

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

For Designers

Visual References

Design language je inspirován:

Cursor: Sharp edges (no rounded corners), minimalistický, dark-first, clean UI
Coder.com: Sharp, tech-forward aesthetic, professional yet approachable
Noon.ai: Clean cards, generous spacing, modern typography
Cobalt: Smooth gradients, premium feel, elegant interactions

Key Design Principles

Sharp Edges: Všechny prvky mají border-radius: 0 - žádné zaoblení
Visible Glassmorphism: Výrazný backdrop-blur efekt pro depth
Cyan/Blue Gradients: Moderní gradienty místo plochých barev
Large Typography: Bold, prominent headings (text-5xl pro H1)
Hover Effects: Subtle transform a shadow efekty

Design Principles

Whitespace is important: V friendly mode používejte generózní spacing
Information density: V dense mode maximalizujte informační hustotu
Consistency: Používejte stejné design tokens napříč aplikací
Accessibility: Zajistěte dostatečný kontrast a velikost touch targets
Dark-first: Navrhujte primárně pro dark mode

Color Usage

Primary Blue: Pro hlavní akce, CTAs, důležité elementy
Cyan: Pro accent, secondary actions
Status colors: Používejte konzistentně (green=success, red=error, amber=warning, blue=info)
Text hierarchy: Primary > Secondary > Muted pro čitelnost

Branding

Product Name

Produkt se jmenuje "D'n'A Cruises" (s apostrofy).

Logo

Logo zůstává stejné: /img/logo.jpg

Typography for Branding

Pro název produktu použijte:

Font: Inter
Weight: font-bold nebo font-semibold
Size: Podle kontextu (větší na login page, menší v headeru)

Core Principles​

Dual Design Approach​

Design Philosophy​

Color Palette​

Primary Colors​

Background Colors​

Text Colors​

Status Colors​

Dense Mode Specific Colors​

Typography​

Font Family​

Font Sizes - Friendly Mode​

Font Sizes - Dense Mode​

Font Weights​

Line Heights​

Components​

Friendly Mode Components​

Cards​

Buttons​

Inputs​

Icons​

Dense Mode Components​

Tables​

Buttons (Dense)​

Inputs (Dense)​

Spacing Scale​

Friendly Mode Spacing​

Dense Mode Spacing​

Design Tokens​

Tailwind Configuration​

Usage Guidelines​

Kdy použít Friendly Mode​

Kdy použít Dense Mode​

Hybrid Approach​

Examples​

Friendly Mode Card Example​

Dense Mode Table Example​

For Developers​

Using Design Tokens in Code​

Custom Utilities​

For Designers​

Visual References​

Key Design Principles​

Design Principles​

Color Usage​

Branding​

Product Name​

Logo​

Typography for Branding​

Core Principles

Dual Design Approach

Design Philosophy

Color Palette

Primary Colors

Background Colors

Text Colors

Status Colors

Dense Mode Specific Colors

Typography

Font Family

Font Sizes - Friendly Mode

Font Sizes - Dense Mode

Font Weights

Line Heights

Components

Friendly Mode Components

Cards

Buttons

Inputs

Icons

Dense Mode Components

Tables

Buttons (Dense)

Inputs (Dense)

Spacing Scale

Friendly Mode Spacing

Dense Mode Spacing

Design Tokens

Tailwind Configuration

Usage Guidelines

Kdy použít Friendly Mode

Kdy použít Dense Mode

Hybrid Approach

Examples

Friendly Mode Card Example

Dense Mode Table Example

For Developers

Using Design Tokens in Code

Custom Utilities

For Designers

Visual References

Key Design Principles

Design Principles

Color Usage

Branding

Product Name

Logo

Typography for Branding