Interný dizajn manuál

Dizajn manuál

Kompletné dizajnové štandardy pre modulario.com — farby, typografia, medzery, komponenty s živými ukážkami.

Farby

Textové farby sú upravené pre WCAG 2.1 AA (≥ 4.5:1 na bielom). Pôvodné živé odtiene žijú v -accent variantoch — výhradne pre pozadia, č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álna š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, icons (7.1:1)

ink-500

#4e4b66

secondary text

ink-600

#4d4d4e

body text

ink-700

#33373d

headings light

ink-800

#212121

primary text, btns

ink-900

#171717

headings dark, footer

Špeciálne / sémantické

Primary (text/body)

--color-primary

#2e2e2e

Accent green

--color-accent

#2ab67d

Link

--color-brand-link

#0e7490

Typografia

Písma

Primárne — Gabarito

Modulario

Bold 700 — nadpisy UI

Regular 400 — telo 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žitie: "bez Modularia" panel (competitor labels)

Typografická škála

Tag	Veľkosť	Váha	line-height	Živá ukážka
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	Telo textu — bežný obsah stránky
small	0.85em (~17px)	400–600	1.5	Popis, metadáta, sekundárny text
caption	0.72 – 0.78em	600–700	1.5	Labels, popisky metrík

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

Štandardné, čitateľné

Odsadenia a medzery

Tailwind spacing: 1 unit = 0.25 rem = 4 px. Bežné hodnoty na webe:

Vnútorné odsadenia (padding)

p-1 4px

toggle container (p-1)

p-2 8px

malé chipy, tagy

p-3 12px

kompaktné prvky, nav links

p-4 16px

karty, feedback panel

p-6 24px

modul karty, CTA vnútro (px-6)

p-8 32px

väčšie informačné panely

p-12 48px

hero, CTA sekcie (py)

p-16 64px

sekcie na desktope (py-16)

Medzery v gridoch a flexoch (gap)

gap-2 8px

čipy a tagy

gap-3 12px

form inputs

gap-4 16px

modul grid, karty (štandard)

gap-5 20px

ikonky s popismi

gap-6 24px

CTA row, kontaktné údaje

gap-8 32px

hero stats row

gap-10 40px

sekcia nav

Kontajner 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álny padding: 16 / 24 / 32 px

Zaoblenia (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álny rytmus sekcií

Sekcia	py (top / bottom)	Poznámka
Hero	pt-10 pb-6 / md:pt-14 pb-8	S BG obrázkom
Modules	py-12	bg-white
Testimonials	py-16	bg-white
CTA vnútro	py-14 px-6	rounded-3xl gradient bg
CTA wrapper sekcia	pb-20 pt-10	bg-white

Tlačidlá

.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

Pozrieť 2-min 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čidiel

default

:hover

disabled

Normálny default

Hover :hover

CTA rad — hero pattern

Pozrieť 2-min demo

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

Čipy a odznaky

.hero-chip

MODULARIO – modulárne cloudové ERP a CRM riešenie

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 textom

.efektTextu — gradient text

s Modulariom

Zákazníci hovoria

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

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

Použitie: toggle label, sekcia supertitle, nadpisy s dôrazom

Stat chip — hero metriky

18 000+ Aktívnych používateľov

200+ Firiem používa Modulario

18 Modulov v platforme

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)

Fakturácia

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 viditeľný — 2 px pseudoelement.

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

Vždy viditeľný (opacity 1)

.gradient-border-hover

Hover gradient border

Prejdi myšou — gradient okraj sa objaví.

opacity 0 → 1 pri hover (200ms)

Kombinuj s ring-1 ring-ink-100

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

Pripravení začať? Dohodnite si konzultáciu zadarmo.

Kontaktujte nás a do 24 hodín vám navrhneme riešenie.

Dohodnúť konzultáciu

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)

Prepínač (Toggle tabs)

Modules toggle (s / bez Modularia)

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

Aktívny: bg-white shadow-sm · r-8

Aktívny label: .efektTextu font-semibold

Neaktívny: 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)

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

letter-spacing: 1px na tab texte

Gradienty

.brand-gradient-bg

Pozadie CTA blokov, hero chip pozadie

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

.brand-gradient-text

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

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

.efektTextu

Toggle label, sekcia supertitle (clip text)

#ebb22d → #3bc4ef (300 deg)

gradient-border ::before

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

#21acd7 → #1aa46c → #d69f1f

Ikonky

Modul SVG ikony (inline, stroke="currentColor")

Import: import.meta.glob("?raw") → render cez <Fragment set:html>. Farba ikony je riadená CSS color (Tailwind text-[#…]).

Fakturácia #a16207

Účtovníctvo #0e7490

Vyťažovanie dokladov #15803d

Cenové ponuky #a16207

Dochádzka #0e7490

Plánovanie #15803d

Nábor #15803d

Súbory #0e7490

Zmluvy #a16207

Evidencia #15803d

Farby ikon — pravidlo

orange

text-[#a16207]

cyan

text-[#0e7490]

green

text-[#15803d]

ink

text-ink-800

Lucide ikony (pre moduly bez custom SVG)

lucide:workflow Pracovné postupy

lucide:graduation-cap Vzdelávanie

lucide:users CRM

lucide:package Sklad

lucide:factory Výroba

lucide:shopping-bag Nákup

lucide:wrench Údržba

lucide:list-ordered Čakateľník

Formuláre 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)

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

Pozícia: 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)]

Animácia otvárania: fadeSlideUp — translateY(12px) + scale(0.97) → (0, 1) / 160ms

Toast po odoslaní: 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álne)

:focus-visible

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

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

Sekcie a layoutové vzory

Linky v texte (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

Vypnutie: .no-underline (buttons stylizované ako linky)

Pozadie sekcií — striedanie

bg-white

väčšina sekcií (default)

bg-[#f4f4f4]

toggle kontajner, striedajúca sekcia

.brand-gradient-bg

CTA blok (vnútri bg-white obaľovacej sekcie)

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 vrstvenie

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 krajoch (8% / 92%)

@media (prefers-reduced-motion) — animácia vypnutá