Interní design manuál

Design manuál

Kompletní designové standardy pro modulario.com — barvy, typografie, mezery, komponenty s živými ukázkami.

Barvy

Textové barvy jsou upravené pro WCAG 2.1 AA (≥ 4.5:1 na bílém). Původní živé odstíny žijí v -accent variantách — výhradně pro pozadí, čipy, gradienty.

Brand paleta

Yellow

--color-brand-yellow

#a16207 (text, WCAG AA)

--color-brand-yellow-accent

#d69f1f (bg / gradient)

#ebb22d (light focus)

Orange

--color-brand-orange

#9a3412 (text, WCAG AA)

--color-brand-orange-accent

#fbae17 (bg / gradient)

Green

--color-brand-green

#15803d (text, WCAG AA)

--color-brand-green-accent

#1aa46c (bg / gradient)

Cyan

--color-brand-cyan

#0e7490 (text, WCAG AA)

--color-brand-cyan-accent

#21acd7 (bg / gradient)

#3bc4ef (light focus)

Ink — neutrální škála

ink-50

#f5f5f5

chip bg

ink-100

#ebebeb

dividers, rings

ink-200

#e2e2e2

chip border, btn border

ink-300

#cfd0d4

placeholder

ink-400

#4b5563

labels, ikony (7.1:1)

ink-500

#4e4b66

sekundární text

ink-600

#4d4d4e

body text

ink-700

#33373d

nadpisy light

ink-800

#212121

primární text, btns

ink-900

#171717

nadpisy dark, footer

Speciální / sémantické

Primary (text/body)

--color-primary

#2e2e2e

Accent green

--color-accent

#2ab67d

Link

--color-brand-link

#0e7490

Typografie

Písma

Primární — Gabarito

Modulario

Bold 700 — nadpisy UI

Regular 400 — tělo textu

--font-sans, --font-display

Gabarito, ui-sans-serif, system-ui…

Variable font váhy: 400 – 900

Self-hosted: /fonts/gabarito-latin.woff2

Akcentové — Caveat

Excel

Salesforce

Trello

--font-accent / utility: .font-accent

Caveat, cursive

Variable font váhy: 400 – 700

Použití: "bez Modularia" panel (competitor labels)

Typografická škála

Tag	Velikost	Váha	line-height	Živá ukázka
h1	1.75em (~35px)	900	1.08	Nadpis H1
h2	clamp(1.5rem, 3.2vw, 2.4em)	900	1.08	Nadpis H2
h3	1.25em (~25px)	900	1.08	Nadpis H3
body	20px (base)	400	1.5	Tělo textu — běžný obsah stránky
small	0.85em (~17px)	400–600	1.5	Popis, metadata, sekundární text
caption	0.72 – 0.78em	600–700	1.5	Labels, popisky metrik

Headings (h1–h5)

line-height: 1.08 · letter-spacing: -0.01em

Kompaktní, tight, váha 900

Body text

line-height: 1.5 · letter-spacing: 0

Standardní, čitelné

Odsazení a mezery

Tailwind spacing: 1 unit = 0.25 rem = 4 px. Běžné hodnoty na webu:

Vnitřní odsazení (padding)

p-1 4px

toggle container (p-1)

p-2 8px

malé čipy, tagy

p-3 12px

kompaktní prvky, nav links

p-4 16px

karty, feedback panel

p-6 24px

modul karty, CTA vnitřek (px-6)

p-8 32px

větší informační panely

p-12 48px

hero, CTA sekce (py)

p-16 64px

sekce na desktopu (py-16)

Mezery v gridech a flexech (gap)

gap-2 8px

čipy a tagy

gap-3 12px

form inputs

gap-4 16px

modul grid, karty (standard)

gap-5 20px

ikony s popisky

gap-6 24px

CTA row, kontaktní údaje

gap-8 32px

hero stats row

gap-10 40px

sekce nav

Kontejner stránky

.container-page

mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8

max-width: 80 rem (1280 px) · horizontální padding: 16 / 24 / 32 px

Zaoblení (border-radius)

rounded (4px)

focus outline

rounded-lg (8px)

toggle tab, tagy

rounded-xl (12px)

chip, feedback panel

rounded-2xl (16px)

widget, panely

rounded-3xl (24px)

modul karta, CTA blok

rounded-full

hero tabs, pills, btn icon

15px (--radius-btn)

btn-primary, btn-secondary

28px

dashboard preview

Vertikální rytmus sekcí

Sekce	py (top / bottom)	Poznámka
Hero	pt-10 pb-6 / md:pt-14 pb-8	S BG obrázkem
Modules	py-12	bg-white
Testimonials	py-16	bg-white
CTA vnitřek	py-14 px-6	rounded-3xl gradient bg
CTA wrapper sekce	pb-20 pt-10	bg-white

Tlačítka

.btn-primary

bg: var(--color-primary) = #2e2e2e

hover bg: var(--color-ink-800) = #212121

border: 2px solid primary

padding: 14px 20px · font: 1rem / 500

border-radius: var(--radius-btn) = 15px

transition: bg, border, color — 180ms ease

.btn-secondary

Podívat se na 2min demo

bg: white → hover: var(--color-ink-50)

border: 2px solid var(--color-ink-200)

padding: 14px 20px · font: 1rem / 500

border-radius: 15px · transition: bg 150ms ease

Stavy tlačítek

default

:hover

disabled

Normální default

Hover :hover

CTA řada — hero pattern

Podívat se na 2min demo

flex-col na mobilu → sm:flex-row · gap-3

Čipy a odznaky

.hero-chip

MODULARIO – modulární cloudové ERP a CRM řešení

bg: linear-gradient(135deg, #f4d98f → #fdd49b → #9ad9b5 → #8cd9ed)

border: none · border-radius: 12px (--radius-chip)

padding: 6px 12px · gap: 10px · font: 0.72em / 400

⚠ Ikona je vždy VPRAVO za textem

.efektTextu — gradient text

s Modulariem

Zákazníci říkají

gradient: linear-gradient(300deg, #ebb22d 0%, #3bc4ef 100%)

-webkit-background-clip: text · -webkit-text-fill-color: transparent

Použití: toggle label, sekce supertitle, nadpisy s důrazem

Stat chip — hero metriky

18 000+ Aktivních uživatelů

200+ Firem používá Modulario

18 Modulů v platformě

value: .brand-gradient-text font-black text-[1.15em]

label: text-ink-500 font-semibold text-[0.72em]

layout: flex items-baseline gap-1.5 · wrap gap-8

Karty

Modul karta (link)

Fakturace

rounded-3xl · bg-white · ring-1 ring-ink-100

shadow: 0 2px 12px rgba(0,0,0,0.04)

hover: -translate-y-0.5 + shadow 0 6px 24px

padding: p-6 · gap: gap-4

.gradient-border-card

Gradient border karta

Statický gradient okraj vždy viditelný — 2 px pseudoelement.

gradient border: cyan → green → yellow (135°)

Vždy viditelný (opacity 1)

.gradient-border-hover

Hover gradient border

Najeďte myší — gradient okraj se objeví.

opacity 0 → 1 při hover (200ms)

Kombinujte s ring-1 ring-ink-100

CTA blok (rounded-3xl + brand-gradient-bg)

Připraveni začít? Domluvte si konzultaci zdarma.

Kontaktujte nás a do 24 hodin vám navrhneme řešení.

Domluvit konzultaci

rounded-3xl · .brand-gradient-bg · shadow-[0_6px_40px_rgba(0,0,0,0.08)]

padding: px-6 py-14 · text-center (produkční hodnota = py-14)

Přepínač (Toggle tabs)

Modules toggle (s / bez Modularia)

Container: bg-[#f4f4f4] · r-12 · border-2 white · p-1

Aktivní: bg-white shadow-sm · r-8

Aktivní label: .efektTextu font-semibold

Neaktivní: text-ink-600 (bez bg)

Hero view tabs (pill style)

Container: rounded-full · border ink-200 · p-1

shadow: 0 4px 16px rgba(0,0,0,0.06)

Aktivní: bg-white + ring-1 ring-ink-200 + shadow-sm

letter-spacing: 1px na tab textu

Gradienty

.brand-gradient-bg

Pozadí CTA bloků, hero chip pozadí

#f4d98f → #fdd49b → #9ad9b5 → #8cd9ed

.brand-gradient-text

Číselné hodnoty hero, metriky (clip text)

#d69f1f → #fbae17 → #1aa46c → #21acd7

.efektTextu

Toggle label, sekce supertitle (clip text)

#ebb22d → #3bc4ef (300 deg)

gradient-border ::before

.gradient-border-card / .gradient-border-hover

#21acd7 → #1aa46c → #d69f1f

Ikony

Modulové SVG ikony (inline, stroke="currentColor")

Import: import.meta.glob("?raw") → render přes <Fragment set:html>. Barva ikony je řízena CSS color (Tailwind text-[#…]).

Fakturace #a16207

Účetnictví #0e7490

Vytěžování dokladů #15803d

Cenové nabídky #a16207

Docházka #0e7490

Plánování #15803d

Nábor #15803d

Soubory #0e7490

Smlouvy #a16207

Evidence #15803d

Barvy ikon — pravidlo

orange

text-[#a16207]

cyan

text-[#0e7490]

green

text-[#15803d]

ink

text-ink-800

Lucide ikony (pro moduly bez custom SVG)

lucide:workflow Pracovní postupy

lucide:graduation-cap Vzdělávání

lucide:users CRM

lucide:package Sklad

lucide:factory Výroba

lucide:shopping-bag Nákup

lucide:wrench Údržba

lucide:list-ordered Čekací listina

Formuláře a interaktivita

Input / Textarea

border: 1px solid ink-200 · rounded-xl

focus: border-ink-400 (transition 150ms) — bez outline

padding: px-3 py-2.5 · font-size: 14px

placeholder: text-ink-400

Feedback widget (bottom-right)

Komponenta: src/components/feedback/FeedbackWidget.tsx (Preact island)

Pozice: fixed bottom-6 right-6 z-[9999]

Trigger button: rounded-full bg-ink-800 px-4 py-3

Panel: w-[360px] rounded-2xl border border-ink-100 shadow-[0_8px_40px_rgba(0,0,0,0.18)]

Animace otvírání: fadeSlideUp — translateY(12px) + scale(0.97) → (0, 1) / 160ms

Toast po odeslání: 4s auto-dismiss fadeSlideUp + fadeOut

Screenshot: max vstup 2000×2000px, komprimovaný canvas → 1200px JPEG 0.82

Webhook: POST application/x-www-form-urlencoded → Apps Script

Focus outline (globálně)

:focus-visible

outline: 2px solid var(--color-brand-cyan-light) = #3bc4ef

outline-offset: 2px · border-radius: 4px

Sekce a layoutové vzory

Linky v textu (WCAG 1.4.1)

Linky v p, li, dd, blockquote, article, .prose dostávají automaticky underline

text-decoration-thickness: 1px · hover: 2px · text-underline-offset: 3px

Vypnutí: .no-underline (buttons stylizované jako linky)

Pozadí sekcí — střídání

bg-white

většina sekcí (default)

bg-[#f4f4f4]

toggle kontejner, střídající se sekce

.brand-gradient-bg

CTA blok (uvnitř bg-white obalující sekce)

Header

sticky top-0 · bg-white · border-b border-ink-100

Logo + nav linky + LanguageSwitcher + CTA button (.btn-primary)

Mobile: hamburger → animated drawer overlay

Z-index vrstvení

Element	z-index	Kód
Sticky header	sticky (flow)	`sticky top-0`
Brand page nav	50	`z-50`
Cookie banner / modals	50	`z-50`
Feedback widget	9999	`z-[9999]`

Marquee (klientský pás)

.marquee-track — animation: marquee 40s linear infinite

.marquee-fade — mask-image: transparent na krajích (8% / 92%)

@media (prefers-reduced-motion) — animace vypnutá