Metagem design system
Shared foundations. Purpose-built patterns.
Shared & foundations
Tokens, typography, icons and reusable primitives.
Button · Logo · Card · HexIcon · DataChip · Tag
components/metagem/shared
Website
Marketing navigation, sections, diagrams and page templates.
SiteHeader · Hero · StorySection · UseCaseTemplate
components/metagem/website
Platform
Compact product UI with source semantics and composed screens.
AppHeader · controls · sources · metrics · findings
components/metagem/platform
Socials & decks
Social posts, sales and delivery slides, imagery and brand artwork.
SocialPost · Slide · CanvasChrome · BRAND_ARTWORK
components/metagem/creative
One source, clear entry points
Code
import "@/design-system/metagem/styles.css";
import { Button } from "@/design-system/metagem/components/metagem/shared";
import { AppHeader } from "@/design-system/metagem/components/metagem/platform";
import { SiteHeader } from "@/design-system/metagem/components/metagem/website";Brand essentials
Structured dataDocumentsAnek Latin text · Kode Mono labels · Phosphor light icons · rounded hexagons.
Patterns versus examples
Website and Platform lead with individual patterns. Full website compositions remain secondary reference examples; sample company copy is not the design-system contract.