Brand v kóde.

Tento dokument je sprievodca pre programátorov projektu clubup.sk. Obsahuje hotové dizajn-tokeny, CSS premenné, Tailwind preset, ukážky komponentov a checklist toho, čo musí PR spĺňať z hľadiska značky.

01Inštalácia

Brand kit je súčasťou marketingového webu — všetky logá, tokeny aj manuál sú v website/brand/ a po nasadení verejne dostupné na https://clubup.sk/brand/. Pre použitie v aplikáciách (študent, admin) referencujte CSS / Tailwind preset priamo z tohto priečinka v repe.

# V monorepe — referencuj priamo
src/apps/app/app/globals.css:
  @import '../../../../website/brand/tokens/clubup-tokens.css';

# V externom projekte — kópia alebo CDN
curl https://clubup.sk/brand/tokens/clubup-tokens.css -o ./brand/tokens/clubup-tokens.css

# Alebo cez git submodul (pre nezávislé projekty)
git submodule add https://github.com/ltksolutions/clubup brand-upstream

02Štruktúra brand priečinka

03Rýchle odkazy

04Farby

05Typografia

Dva fonty z Google Fonts + jeden monospace. Importujte ich na začiatku každej HTML stránky alebo cez CSS @import.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,700&display=swap">

06Spacing & radius

8-bodový systém. Všetky odsadenia a veľkosti = násobky 4 px. Žiadne 7, 13, 25.

/* Spacing */
--clubup-space-1: 4px;
--clubup-space-2: 8px;
--clubup-space-3: 12px;
--clubup-space-4: 16px;   /* gap default */
--clubup-space-5: 24px;   /* card padding default */
--clubup-space-6: 32px;
--clubup-space-7: 48px;   /* section gap */
--clubup-space-8: 64px;

/* Radius */
--clubup-radius-sm: 6px;    /* buttons, inputs */
--clubup-radius-md: 8px;    /* icon containers */
--clubup-radius-lg: 12px;   /* cards */
--clubup-radius-xl: 16px;   /* modals */

07CSS premenné

Importujte tokens/clubup-tokens.css raz, na vrchole vašej globálnej kaskády.

/* app.css */
@import './brand/tokens/clubup-tokens.css';

/* Použitie */
.btn-primary {
  background: var(--clubup-blue);
  color: var(--clubup-paper);
  padding: var(--clubup-space-2) var(--clubup-space-4);
  border-radius: var(--clubup-radius-sm);
  font-family: var(--clubup-font-sans);
  font-weight: 500;
  transition: var(--clubup-dur-base) var(--clubup-ease);
}
.btn-primary:hover { background: var(--clubup-blue-2); }

08Tailwind preset

// tailwind.config.js
const clubup = require('./brand/tokens/tailwind.config.js');

module.exports = {
  presets: [clubup],
  content: ['./src/**/*.{ts,tsx,html}'],
};

Po nastavení máte k dispozícii triedy ako bg-clubup-navy, text-clubup-blue, shadow-clubup-card, rounded-lg (12 px).

09React komponenty — ukážky

Button

export function Button({ variant = 'primary', ...props }) {
  const styles = {
    primary:   'bg-clubup-blue text-white hover:bg-clubup-blue-2',
    secondary: 'bg-clubup-navy text-white hover:bg-clubup-navy-2',
    outline:   'bg-transparent border border-clubup-navy text-clubup-navy',
    ghost:     'bg-transparent text-clubup-blue hover:bg-clubup-pale',
  };
  return <button
    className={`px-4 py-2 rounded-sm font-medium text-sm transition ${styles[variant]}`}
    {...props}
  />;
}

Card

export function Card({ icon, title, children }) {
  return (
    <div className="bg-white border border-clubup-line rounded-lg p-5 shadow-clubup-card">
      <div className="w-8 h-8 rounded-md bg-clubup-pale text-clubup-blue grid place-items-center mb-3">
        {icon}
      </div>
      <h4 className="text-clubup-navy font-semibold mb-1">{title}</h4>
      <p className="text-clubup-gray text-sm leading-relaxed">{children}</p>
    </div>
  );
}

Logo komponent

import primary from '@/brand/logo/clubup-logo-primary.svg';
import dark    from '@/brand/logo/clubup-logo-dark.svg';

export function Logo({ variant = 'primary', height = 40 }) {
  const src = variant === 'dark' ? dark : primary;
  return <img src={src} height={height} alt="ClubUp" />;
}

10Ikony

Ikony sú inline SVG, 24×24 viewBox, stroke 1.8 px, stroke-linecap="round". Skopírujte konkrétnu ikonu z icons.html klikom na ikonu — uloží sa do schránky ako SVG.

// Príklad — ikona „dashboard“
export const DashboardIcon = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <rect x="3" y="3" width="8" height="10" rx="1.5"
          stroke="currentColor" strokeWidth="1.8" />
    <rect x="13" y="3" width="8" height="6" rx="1.5"
          stroke="#388FC3" strokeWidth="1.8" />
    </* ... */>
  </svg>
);

11PR checklist

Pred mergom skontrolujte:

• Žiadne hardcoded HEX hodnoty v kóde — všetko cez var(--clubup-*) alebo Tailwind triedy.
• Žiadny font okrem Poppins / JetBrains Mono. Logotyp je v krivkách.
• Spacing a radius hodnoty z 8-bodového systému (4, 8, 12, 16, 24, 32…).
• Logo iba zo schválených SVG variantov v website/brand/logo/.
• Ikony stroke 1.8, 24×24 grid, jeden blue akcent.
• Texty po slovensky, tykanie funkcionárom (viď Hlas a tón).
• Kontrast textu vs. pozadia ≥ 4.5:1 (WCAG AA).

12Vlastníctvo a zmeny

Značku vlastní LTK Solutions s.r.o. Akékoľvek úpravy manuálu, loga alebo tokenov musia prejsť cez Pull Request s reviewom dizajnéra. Otázky cez Issues alebo e-mailom.