Xuperson Institute · Design System
Champagne Paper
Where academia meets enterprise.
Where intention meets execution.
Xuperson Institute · Design System
Where academia meets enterprise.
Where intention meets execution.
"We operate the Mangrove — a premium, structured environment at the intersection of academia and enterprise. Here, our cross-pollinators actively translate dense theory into corporate reality, and human intent into machine execution."
— Champagne Paper, v2
What's Inside
The story, identity, voice, and logo of Champagne Paper.
Explore →
Color, typography, spacing, motion, shadow, and the AI gradient system.
Explore →
39 production-ready UI components with live previews and copyable code.
Explore →
Domain colors, OG image templates, print stylesheet, and LaTeX class.
Explore →
39
Components
24
Color Tokens
4
Font Families
14
Design Docs
2
Themes
Brand
The Xuperson brand exists at an ecotone — the fertile boundary where deep academia meets the tidal ocean of corporate practice. Champagne Paper encodes this tension into every surface: the warmth of aged parchment against the precision of editorial structure.
Read the story →Foundations
Every token in Champagne Paper is a microfoundation — a precise unit of design intent. Burgundy anchors authority. Champagne signals warmth. Paper grounds every surface in the material world of academic publishing. No color is arbitrary; every value earns its place.
Explore foundations →Components
Components are the carriers of intent. Each one is built to cross boundaries — to carry academic gravitas into corporate interfaces, and to render human purpose into machine execution. Live previews, copyable code, and usage guidelines included for every element.
View components →