Logo

Die Wortmarke liegt als WebP unter shared/assets/logo, die Quelle als PNG unter docs/design (Git LFS). Vite hasht den Import. Die Logo-Primitive mit den Varianten full und mark (Spec §2.1) folgt, sobald eine SVG-Fassung existiert.

import wordmark from '@/shared/assets/logo/pixelpakt-wordmark.webp'

<header className="bg-ink">
  <img src={wordmark} alt="Pixel Pakt" className="w-full max-w-(--container-xs)" />
</header>

pixel-shadow-lg auf Paper

pixel-shadow-lg auf Ink

glow

pixel-shadow glow-lg, data-accent=games

<img src={wordmark} className="pixel-shadow" />
<img src={wordmark} className="glow" />          /* Akzent: brand oder data-accent */
<div data-accent="games"><img src={wordmark} className="pixel-shadow glow-lg" /></div>

Brand

Die Marke als Komponente: Wortmarke als Bild, wo Platz ist, sonst die Textfassung in der Display-Font – Regenbogen auf „Pixel“, Weiß auf „Pakt“, Strays in derselben Farbe (Font-Feature ss03, strays-text). Nur auf dunklen Flächen.

autoPixel Pakt

image md

text smPixel Pakt

text mdPixel Pakt

text lgPixel Pakt

<Brand />                       /* auto: Fenster schmaler ziehen */
<Brand variant="image" size="md" />
<Brand variant="text" size="lg" to={null} />

Farben

Alle Farben sind Token in app.css. Utilities: bg-*, text-*, border-*. Es gibt keine Standard-Tailwind-Palette und keine arbitrary values.

<div className="bg-paper">…</div>
<span className="bg-paper-muted">Chip</span>
<header className="bg-ink text-fg-on-dark">…</header>

<h1 className="text-fg">Headline</h1>
<p className="text-fg-muted">Fließtext</p>
<footer className="bg-ink text-fg-on-dark-muted">…</footer>

<span className="text-brand-text">Link</span>
<button className="bg-brand-hot text-fg-on-dark">Beitreten</button>

/* direkt – nur in Ausnahmen, sonst über data-accent (nächster Abschnitt) */
<span className="text-news-text">Releases</span>

<span className="size-2 bg-online" aria-hidden />

Akzent-System

data-accent am Elternteil setzt --accent, --accent-deep und --accent-text. Primitives nutzen nur bg-accent, text-accent-text, border-accent – und wissen nichts von Kategorien.

<article data-accent="news">
  <span className="bg-accent px-2 text-ink">Badge</span>
  <h3 className="text-accent-text">Titel</h3>
  <button className="border-2 border-accent">→</button>
</article>

<section className="bg-ink" data-surface="dark">
  <h2 className="text-copy">Headline</h2>
  <p className="text-copy-muted">Subline</p>
  <hr className="border-rule" />
  <div data-accent="games"><a className="text-accent-copy">Link</a></div>
</section>

<div className="border-2 border-accent">…</div>

Gradients

bg-grad-* für Flächen, text-grad-* für Headline-Zeilen. Gradient-Text bleibt echter Text; ohne background-clip-Support fällt er auf --accent zurück.

<button className="bg-grad-cta px-5 py-3 text-fg-on-dark">Jetzt Teil des Pakts werden</button>

<h1 className="font-display text-hero">
  Different <span className="text-grad-warm">Games.</span>
  <span className="text-grad-cool">One Pakt.</span>
</h1>

Typografie

font-display ist die eigene PixelPakt-Font: COLRv1, jede Zelle ein schattierter Pixel-Würfel, die Buchstaben nehmen die Textfarbe. Kleinbuchstaben nutzen die Großbuchstaben-Glyphen. font-body ist Inter mit System-Fallback. Die Root-Schriftgröße ist fluid, alles in rem skaliert mit.

<h1 className="font-display text-hero leading-tight">Different Games. One Pakt.</h1>

<h2 className="font-display text-3xl strays">Different Games.</h2>
<h2 className="font-display text-3xl strays-overhang">Different Games.</h2>

<article data-accent="events">
  <h3 className="font-display strays strays-accent">Pixel Pakt Night</h3>
</article>

<h3 className="font-display strays strays-games">…</h3>

<span className="text-grad-logo strays-text">Pixel</span>
<span className="text-fg-on-dark strays-text">Pakt</span>
<p className="text-news strays-text">Grün mit grünen Strays</p>

<div className="bg-ink text-fg-on-dark">
  <h2 className="font-display strays strays-accent">Werde Teil des Pakts</h2>
  <h2 className="font-display strays strays-paper">Werde Teil des Pakts</h2>
</div>

<h1 className="font-display text-hero leading-tight strays strays-accent">
  Different <span className="text-grad-warm">Games.</span>
</h1>

<h2 className="font-display strays pixel-shadow">Aktuelle News</h2>
<div data-accent="events">
  <h2 className="font-display strays strays-accent glow">Pixel Pakt Night</h2>
</div>

<h2 className="font-display-strays text-3xl strays">
  Spiele verbinden<br />Menschen
</h2>

<p className="font-display">ÄÖÜß 0123456789 .,!?:;-+=/()</p>

<p className="text-lg leading-body">…</p>
<p className="eyebrow text-brand">Immer up to date</p>

Spacing

Neun Stufen, alle in rem. Dazu gutter (fluid, 1–4rem) und touch (2.75rem = 44px Mindest-Touchziel). Komponenten setzen keine Außenabstände – der Elternteil verteilt über Stack, Cluster, Grid.

<div className="p-4 gap-5">…</div>   /* 1rem padding, 1.5rem gap */
<main className="px-gutter">…</main>
<button className="min-h-touch">…</button>

Breakpoints

Mobile-first. Media Queries nur in Widgets und Pages für Spaltenlogik, Komponenten reagieren per Container Query (@xs … @2xl) auf ihre eigene Breite.

<div className="grid-cols-1 sm:grid-cols-2 md:grid-cols-3">…</div>
<div className="@container"><p className="@sm:text-lg">…</p></div>

Container

Zentrierter Seitenrahmen: volle Breite bis max-w-site (3072px), seitlicher Gutter fluid. Das einzige Primitive, das Seitenbreite kennt.

<Container as="section" className="py-7">
  …
</Container>

Stack

Vertikaler Fluss mit einheitlichem Abstand. Ersetzt jede Form von margin-bottom.

<Stack gap={3}>
  <Box />
  <Box />
  <Box />
</Stack>

<Stack gap={2} align="start">…</Stack>

Cluster

Horizontale Gruppe, die umbricht: Buttons, Chips, Meta-Zeilen, Navigation.

<Cluster gap={2}>
  <Chip>RPG</Chip><Chip>Co-op</Chip><Chip>Indie</Chip>
</Cluster>

<Cluster justify="between">
  <Logo /> <Nav />
</Cluster>

Grid

Spaltenraster mit Token-Gap. Feste Spalten je Breakpoint, oder auto-fill nach Mindestbreite – letzteres nur wo auch mehr Inhalt existiert (News-Übersicht, Server-Liste).

<Grid cols={{ base: 1, sm: 2, md: 3 }} gap={5}>
  <ArticleCard /> ×3
</Grid>

<Grid min="12rem" gap={4}>
  <ServerCard /> ×n
</Grid>

Card

Fläche mit Pixel-Ecken (quadratische Kerben, Größe --pixel-notch). Die Kerben leben nur hier. Zwei geclippte Ebenen: außen Rahmenfarbe, innen um --border-w eingerückt die Füllung.

<Card>Paper</Card>
<Card tone="dark">Dark</Card>

<Grid cols={{ base: 2, md: 4 }}>
  <div data-accent="news"><Card tone="dark" interactive>…</Card></div>
  …
</Grid>

<Card padding="none"><CoverImage /></Card>
<Card padding="lg">…</Card>

/* nur Demo – im Produkt bleibt der Token global */
<div style={{ '--pixel-notch': '1rem' }}><Card>…</Card></div>

Divider

Trennlinie in der Rahmenfarbe der aktuellen Fläche.

<Divider />
<section data-surface="dark" className="bg-ink"><Divider /></section>

VisuallyHidden

Text nur für Screenreader, etwa Labels auf Icon-Buttons.

<button>
  <Icon name="arrow-right" />
  <VisuallyHidden>Alle News anzeigen</VisuallyHidden>
</button>

Icon

Eigene Pixel-Icons auf einem 16×16-Raster, als ein <path> in currentColor mit crispEdges gerendert – kein Sprite-File, keine Library. Neue Icons kommen als Rasterzeichnung in shared/ui/Icon/icons.ts dazu.

<Icon name="arrow-right" />                 /* 1em, dekorativ */
<Icon name="search" size="md" label="Suche" />

<p className="text-brand-text">Mehr <Icon name="arrow-right" /></p>

Eyebrow

Kleines Uppercase-Label mit Pixel-Marker über Sektionsüberschriften. Marker und Text folgen data-accent und data-surface, Default Brand.

<Eyebrow>Immer up to date</Eyebrow>
<div data-accent="events"><Eyebrow>Gemeinsam mehr erleben</Eyebrow></div>
<header className="bg-ink" data-surface="dark"><Eyebrow>Gaming · Community · Events</Eyebrow></header>

Heading & Text

Heading trennt semantische Ebene (as) von der Größe. xs und sm sind Body-Font für Card- und Panel-Titel, md bis hero Display-Font für Sektionen und Seiten. Text ist Fließtext. Beide nehmen die Textfarbe der Fläche.

<Heading as="h2" size="lg" strays>Aktuelle News</Heading>
<Heading as="h1" size="hero">Different <span>Games.</span></Heading>
<Heading as="h3" size="sm">Die spannendsten Releases</Heading>

<Text>Pixel Pakt ist die Gaming-Community für alle.</Text>
<Text size="sm" tone="muted">Aktuelle Entwicklungen, Releases und mehr.</Text>

TextLink

Inline-Link im lesbaren Akzent mit Pfeil, für „Alle anzeigen“-Links in Sektions- und Panel-Headern.

<TextLink to="/news">Alle News anzeigen</TextLink>
<div data-accent="events"><TextLink to="/events">Alle Events</TextLink></div>
<TextLink to="/impressum" icon={null}>Impressum</TextLink>

Button

Button rendert <button>, ButtonLink einen React-Router-Link – beide teilen buttonStyles({ variant, size }). outline und ghost nehmen die Textfarbe des Kontexts, der Gradient-Hover ist ein Overlay mit opacity (Gradients lassen sich nicht animieren).

<Button>Jetzt Teil des Pakts werden</Button>
<div data-accent="games"><Button variant="accent">Spielwelten</Button></div>
<ButtonLink to="/community" variant="gradient" trailingIcon="arrow-right">Jetzt beitreten</ButtonLink>
<Button variant="outline">Login</Button>
<Button variant="ghost" leadingIcon="search">Suche</Button>

<Button chipped>Jetzt Teil des Pakts werden</Button>
<ButtonLink to="/community" variant="gradient" chipped trailingIcon="arrow-right">Jetzt beitreten</ButtonLink>
<Button variant="outline" chipped>Login</Button>
<header className="bg-ink" data-surface="dark"><Button variant="outline" chipped>Mehr erfahren</Button></header>

<Button size="sm">Klein</Button>
<Button size="lg" trailingIcon="arrow-right">Groß</Button>
<Button disabled>Deaktiviert</Button>

IconTile

Quadrat in der Akzentfarbe mit Icon. Sitzt in Quick-Link-Cards und Panel-Headern, ist dekorativ – die Überschrift daneben trägt die Bedeutung.

<div data-accent="news"><IconTile icon="news" /></div>
<IconTile icon="events" size="sm" glow />

ArrowButton

Quadratischer Icon-Button in der Akzentfarbe, in jeder Card. ArrowButton rendert <button>, ArrowLink einen Link. label ist Pflicht, weil kein Text sichtbar ist.

<ArrowLink to="/news/release" label="Artikel lesen" />
<ArrowButton label="Schließen" icon="close" size="md" onClick={…} />

Badge & Chip

Badge ist das gefüllte Kategorie-Label in der Akzentfarbe (RELEASES, COMMUNITY, EVENTS). Chip ist das kleine Outline-Tag (RPG, Co-op, Indie).

<div data-accent="news"><Badge>Releases</Badge></div>

<Cluster gap={2}><Chip>RPG</Chip><Chip>Co-op</Chip><Chip>Indie</Chip></Cluster>

MetaItem & CountBadge

MetaItem ist Icon + Text für Meta-Zeilen (Datum, Uhrzeit, Kommentare), mehrere in einem Cluster. CountBadge ist Icon + Zahl mit unsichtbarer Einheit für Screenreader.

<Cluster gap={4}>
  <MetaItem icon="events">28. Nov. 2024</MetaItem>
  <MetaItem icon="comment">64 Kommentare</MetaItem>
</Cluster>

<CountBadge count={24} label="Antworten" />

Avatar & DateBlock

Avatar ist quadratisch (Pixel-Stil, keine Rundung) mit Initialen-Fallback und optionaler Krone. DateBlock zeigt Tag groß und Monat klein in der Akzentfarbe.

LNK

A

<Avatar name="Lunara" src={lunara} size="lg" decoration="crown" />
<Avatar name="Kael" size="sm" />  /* Initialen-Fallback */

<DateBlock date="2024-11-15T20:00:00+01:00" />

Stat

Eine Kennzahl mit Label, optional mit Icon. box stapelt, row setzt alles in eine Zeile. Mehrere Stats in Grid, Stack oder Cluster.

<Grid cols={{ base: 2 }} gap={4}>
  <Stat icon="community" value="2.437" label="Mitglieder insgesamt" />
</Grid>
<Stat layout="row" icon="events" value="3" label="Nächste Events" />

CoverImage

Bildbox mit festem Seitenverhältnis, Lazy Loading, optionalem Fokuspunkt für den Beschnitt und einem Overlay-Slot mit dunklem Verlauf für Text. Die Mock-Cover sind generierte Pixel-Muster.

Overlay-Titel

mit Verlauf

Releases

<CoverImage src={cover} alt="…" ratio="4/3" overlay>
  <Badge>Releases</Badge>
</CoverImage>

SocialIcon & LinkList

SocialIcon ist der quadratische Icon-Link zu einem Netzwerk, öffnet in neuem Tab. LinkList ist Überschrift plus Linkliste für Footer-Spalten und Sidebars. Die Netzwerke und URLs kommen aus shared/config/site.

import { site } from '@/shared/config'

<Cluster gap={2}>
  {site.social.map(s => <SocialIcon key={s.network} network={s.network} href={s.href} label={s.label} />)}
</Cluster>

<LinkList title="Rechtliches" links={[{ label: 'Impressum', to: '/impressum' }, { label: 'Datenschutz', to: '/datenschutz' }]} />

SectionHeader

Eyebrow + Heading + Text + optionaler Link. Mit size=lg wird daraus der PageHeader jeder Unterseite (h1, hero). Akzent und Fläche kommen aus dem Kontext.

<SectionHeader
  eyebrow="Immer up to date"
  title="Aktuelle News"
  text="Hier findest du die neuesten Inhalte aus der Pixel Pakt Community."
  link={{ to: '/news', label: 'Alle News anzeigen' }}
  strays
/>

<SectionHeader size="lg" eyebrow="News" title="Aktuelle News" text="Spiele-News, Community-Highlights, Event-Ankündigungen." strays />

Panel

Card mit Header-Zeile aus IconTile, Titel und optionalem Link, darunter freier Inhalt. Die vier Hub-Boxen, später Sidebar-Boxen.

<Panel icon="events" title="Nächste Events" link={{ to: '/events', label: 'Alle Events' }}>
  <Stack as="ul" gap={0} className="divide-y divide-rule">
    <ListRow … />
  </Stack>
</Panel>

ListRow

Eine Zeile mit den Slots leading, body (title + subline) und trailing. Event-Zeilen, Forum-Themen und Server-Listen sind strukturell identisch. Trennlinien setzt die Liste über divide-y divide-rule.

<Stack as="ul" gap={0} className="divide-y divide-rule">
  <ListRow leading={<Avatar />} title={<Link to="/t/1">Welches Spiel hat euch zuletzt…</Link>} subline="von Nekro · vor 2 Std." trailing={<CountBadge>24</CountBadge>} />
</Stack>

FeatureCard

Quick-Link-Card: IconTile, Titel, Text und Pfeil. Setzt ihren data-accent selbst. Die ganze Card ist ein Link (gestreckter Titel-Link), der Pfeil ist dekorativ.

<Grid cols={{ base: 1, xs: 2, md: 4 }} gap={4}>
  <FeatureCard accent="news" icon="news" title="News" text="Aktuelle Entwicklungen, Releases und mehr." to="/news" />
  …
</Grid>

Entity: Article

entities/article – Typ Article, Mapping Kategorie → data-accent (releases → news), ArticleCard und ArticleMeta. Daten aus mockArticles.

Releases

Die spannendsten Releases des Monats

Von epischen Rollenspielen bis zu gefeierten Indie-Perlen – diese Games solltet ihr auf dem Schirm haben.

28. Nov. 202464 Kommentare

Community

Community-Favoriten: Diese Games dominieren gerade

Wir haben für euch ausgewertet, welche Spiele unsere Community aktuell am meisten zockt – und warum.

12. Nov. 202456 Kommentare

Events

Event-Rückblick: Pixel Pakt Night

Volle Server, starke Matches und eine großartige Community – das war die Pixel Pakt Night. Hier sind die besten Momente!

4. Nov. 202448 Kommentare

import { ArticleCard, mockArticles } from '@/entities/article'

<Grid cols={{ base: 1, sm: 2, md: 3 }} gap={5}>
  {mockArticles.map(a => <ArticleCard key={a.id} article={a} />)}
</Grid>

Entity: Event

entities/event – Typ Event mit Plattform (Discord, Turnier, Ingame), EventRow aus ListRow + DateBlock, EventPlatform. Daten aus mockEvents.

import { EventRow, mockEvents } from '@/entities/event'

<Panel icon="events" title="Nächste Events" link={{ to: '/events', label: 'Alle Events' }}>
  <Stack as="ul" gap={0} className="divide-y divide-rule">
    {mockEvents.map(e => <EventRow key={e.id} event={e} />)}
  </Stack>
</Panel>

Entity: Thread

entities/thread – Typ Thread, ThreadRow aus ListRow + Avatar + CountBadge, relative Zeit über shared/lib. Daten aus mockThreads mit festem Bezugszeitpunkt, damit SSR und Client dasselbe rendern.

import { ThreadRow, mockThreads, mockNow } from '@/entities/thread'

<Panel icon="comment" title="Letzte Forum-Themen" link={{ to: '/community', label: 'Alle Themen' }}>
  <Stack as="ul" gap={0} className="divide-y divide-rule">
    {mockThreads.map(t => <ThreadRow key={t.id} thread={t} now={mockNow} />)}
  </Stack>
</Panel>

Entity: Game

entities/game – Typ GameCategory mit eigenem Akzent, GameCategoryCard aus Card dark + CoverImage mit Overlay + Icon + Pfeil, Rahmen in der Akzentfarbe. Daten aus mockGameCategories.

Shooter

Action. Reaktion. Teamwork.

MMO

Große Welten. Starke Community.

Strategy

Planen. Bauen. Erobern.

Co-op

Zusammen mehr erleben.

Indie

Kreativ. Anders. Besonders.

import { GameCategoryCard, mockGameCategories } from '@/entities/game'

<Grid cols={{ base: 2, md: 5 }} gap={4}>
  {mockGameCategories.map(c => <GameCategoryCard key={c.slug} category={c} />)}
</Grid>

Regeln

Kurzfassung aus CLAUDE.md und Spec §1.