moviefriends · Designsystem
moviefriends Brand – Designsystem
moviefriendsmoviefriendsmoviefriends
Dein Film. Deine Freunde.
Hier steht, wie moviefriends aussieht und klingt – für Website, Studio, HQ und die spätere iPhone- und iPad-App. Alle Werte kommen aus einer Quelle, dem Token-Paket @moviefriends/design-tokens. Logos, App-Icons und Favicons gibt es unter Downloads.
Kapitel
- 01MarkeName, Tagline, Versprechen, Leo Lux und die Tonalität von moviefriends.
- 02LogoFilmstern und Wortmarke: Varianten, Schutzzone, Mindestgrößen, Do und Don't.
- 03FarbenAlle Farben mit Hex, RGB, CSS-Variable, Tailwind-Klasse und WCAG-Kontrast.
- 04TypografieBig Shoulders und Instrument Sans: Rollen, Größen, Textstile.
- 05Abstände & Radien4-px-Raster, Radien, Größen, Schatten und Bewegung.
- 06KomponentenGrundsätze für Buttons, Karten, Formulare, Fokus und Status.
- 07BildspracheKinolicht, Menschen als Stars, Skizzen, KI-Kennzeichnung und Alt-Texte.
- 08Social MediaFormate 1080 × 1080, 1080 × 1920 und 1200 × 630 mit Sicherheitsbereichen.
- 09DownloadsLogos, App-Icons, Favicons, Tokens und Schriften – einzeln oder als ZIP.
Für Apps und KI
Alle Regeln und Werte sind maschinenlesbar und dürfen von jeder App, aus der Cloud und von KI-Agenten direkt geladen werden (öffentlich, CORS offen).
design-system.mdAlle Designregeln als Markdown – für Menschen und KI-Agenten.
tokens.jsonAlle Werte im W3C-Design-Tokens-Format: einzige Quelle der Wahrheit.
llms.txtIndex für Sprachmodelle nach llmstxt.org.
brand-kit.jsonAlle Downloads mit Maßen, Größe und SHA-256-Prüfsumme.
- Next.js + Tailwind 4
@import "@moviefriends/design-tokens/tailwind-theme.css"; - CSS
color: var(--color-gold); - TypeScript
import { tokens } from "@moviefriends/design-tokens"; - React
<Wordmark suffix="HQ" /> - SwiftUI
MFColor.gold · MFFont.display(34)