Smart Courts.
Die Zukunft des Padel.
Das verbindliche Design-System für PadelSmart — App, Web und alle Touchpoints. Premium & tech in der Optik, verspielt & nahbar im Charakter. Dunkel ist die Heimat der Marke.
Logo-System
Fünf Varianten. Die Wortmarke ist primär, die Herz-Mark das Signature-/App-Icon-Element. Immer mit Schutzraum (≥ Höhe des „p") und nie verzerren, neu einfärben oder mit Effekten überlagern.
Header · Splash · App-Name
App-Icon · Favicon · Signature
Do
- Schutzraum rund ums Logo freihalten
- Auf dunklem Grund die lila/weiße Marke, auf hell die dunkle „P"
- Herz-Mark als App-Icon & Favicon
Don't
- Nicht verzerren oder Seitenverhältnis ändern
- Nicht umfärben außerhalb der Markenfarben
- Keine Schatten/Outlines/Gradients aufs Logo
Maskottchen
Anthropomorpher Tennisball im Retro-Cartoon-Stil (Rubberhose) — lila Cap mit „P", Cartoon-Handschuhe, Sneakers. Die Fun-/Charakter-Ebene der Marke: Loader, Empty-States, Badges, Sticker, und als Scroll-Companion mit Sprechblasen. Vier Posen für verschiedene Momente.
CI/mascot/ und padelsmart-web/img/mascot/.Farben
Lila führt, Neon ist der sparsame Energie-Akzent (aktive States, CTAs, Live-Indikatoren — nie als Fläche). Dunkel-Töne tragen die Marke.
Kernfarben
Dunkel & Flächen
Semantisch & Support
#05010E; das App-Design-System (design-tokens.json) nutzt #08070D (bg) / #1F1F2B (surface) und text-muted #9893A8 statt #8D86A3. Vor Flutter-Build auf eine Quelle festziehen.Typografie
Baloo 2 (rund, sportlich) für Headlines, Logo-Feel & große Zahlen — Inter für UI, Body, Buttons, Labels.
Design-Tokens
Quelle der Wahrheit: CI/design-tokens.json → via Tokens Studio in Figma → Handoff an Flutter. Token-Namen = der Vertrag zwischen Design & Backend.
Spacing (px)
Radius & Border
Border: hairline 1px · thick 2px. Elevation im App-System bevorzugt über Flächen-/Border-Kontrast, nicht über Schlagschatten.
Frontend-Implementierung (Web · CSS Custom Properties)
/* :root — kanonische Web-Tokens (padelsmart-web) */ --brand:#7206FF; --brand-2:#A06AFF; --neon:#C0FF03; --void:#05010E; --panel:#15102B; --panel-2:#221741; --text:#ECE9F5; --dim:#8D86A3; --line:rgba(255,255,255,.10); --success:#C0FF03; --warning:#F5B84B; --danger:#FF4D6D;
Komponenten
18 Core-Komponenten — einmal mit Variants & States gebaut, alle ~150 Screens setzen sich daraus zusammen. Das ist die Build-Liste für Frontend (Flutter) & das Figma-System.
Buttons (Variants)
Motion & Interaktion
Bewegung schafft Tiefe & Premium-Gefühl — immer mit prefers-reduced-motion-Fallback.
- Parallax-Hintergrund — tiefe Glow-Ebene scrollt mit ~22% Geschwindigkeit (langsamer als Vordergrund).
- 3D-Device-Mockup — Perspektive-Tilt + Glas-Glare + tiefer Schatten + Lila-Glow, sanftes Floaten, richtet sich bei Hover auf.
- Content-Wall — unscharfe, gekippte Bild-Collage hinter dem Phone, Ränder radial ausgefadet.
- Reveal-on-Scroll — Sektionen faden + steigen leicht auf (opacity + translateY).
- Maskottchen-Companion — leichtes Idle-Bob; beim Reinscrollen poppt pro Sektion eine Sprechblase mit Spruch auf.
- Neon sparsam bewegen (Live-Dots pulsen), Gradients nur in Hero-/Branding-Momenten.
Tonalität
Wie die Marke spricht — verbale Identität.
So klingen wir
- Kurz, direkt, sportlich — kein Bullshit
- Premium, aber nahbar (Maskottchen = Augenzwinkern)
- Du-Ansprache, Deutsch zuerst
- Konkret & nutzenorientiert („Tür per App auf", nicht „innovative Zugangslösung")
Beispiele
- „Slot buchen & Tür per App öffnen."
- „Spiel, wo PadelSmart ist."
- Nicht: Floskeln, Buzzword-Stapel, Behörden-Deutsch
Tech & Assets
Aktueller Stand — wo was lebt, für Frontend & Backend.
Frontend
- App: Flutter (Hedi). Design-System = diese Tokens; Screens prototypisiert als HTML/Stitch.
- Web: Vanilla HTML/CSS/JS auf Cloudflare Pages, Fonts self-hosted.
- Figma:
design-tokens.json→ Tokens Studio → Variables; Komponenten → Screens.
Live-URLs
- Landingpage: padelsmart-web.pages.dev
- App-Prototyp: padelsmart-app-full.pages.dev
- Screen-Raster: …/raster & …/raster-main
- Kunden-Portal: padelsmart-portal.pages.dev
Asset-Ablage
projects/padelsmart/CI/ ├─ logos/ # Wortmarke, Herz-Mark, weiß, P-Mark (SVG/PNG) ├─ fonts/ # Baloo 2 (500–800) · Inter (300–700) ├─ mascot/ # M1–M4 (4 Posen, PNG — freistellen ausstehend) ├─ design-tokens.json # Farbe/Typo/Spacing/Radius/Border ├─ BRAND-KIT.md · FIGMA-DESIGNSYSTEM.md · STITCH-PROMPTS.md └─ index.html # diese Seite padelsmart-web/img/screens/ # gerenderte App-Screens (Content-Wall)
Quellen: BRAND-KIT.md · design-tokens.json · FIGMA-DESIGNSYSTEM.md · Live-Build padelsmart-web. Erstellt von Dream Digital Production Comp.