Design System Specification: The Digital Curator
The 'Digital Curator' represents a departure from the generic, grid-locked academic portal. This design system is built on the philosophy of Institutional Authority through Editorial Elegance. We are not simply building an interface; we are curating an academic legacy.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
The 'Digital Curator' represents a departure from the generic, grid-locked academic portal. This design system is built on the philosophy of Institutional Authority through Editorial Elegance. We are not simply building an interface; we are curating an academic legacy.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
1. Overview & Creative North Star
The "Digital Curator" represents a departure from the generic, grid-locked academic portal. This design system is built on the philosophy of Institutional Authority through Editorial Elegance. We are not simply building an interface; we are curating an academic legacy.
The Creative North Star is defined by Intentional Asymmetry and Tonal Depth. By utilizing high-contrast typography scales (the prestige of Public Sans against the utility of Inter) and breaking the "template" look with overlapping elements and generous white space, we move the experience from "software" to "digital monograph." We prioritize breathing room over information density, ensuring every piece of content feels intentional and permanent.
---
2. Color Theory & Surface Logic
The palette is rooted in the Universidad Panamericana heritage, but applied with a modern, layered sophistication.
### The "No-Line" Rule
Strict Mandate: Designers are prohibited from using 1px solid borders for sectioning. Structural boundaries must be defined solely through background color shifts. For example, a surface-container-low section sitting on a surface background provides all the definition required. This creates a high-end, seamless "wash" of color rather than a boxed-in, "Excel-sheet" appearance.
### Surface Hierarchy & Nesting
Treat the UI as a series of physical layers—like stacked sheets of fine cotton paper.
• Base: surface (#F9F9F9)
• Nesting: Use surface-container tiers (Lowest to Highest) to define importance. An inner card should use surface-container-lowest (#ffffff) to "pop" against a surface-container-low (#f3f3f3) background.
### The "Glass & Gradient" Rule
To avoid a flat, dated look, use Glassmorphism for floating navigation or contextual overlays. Use semi-transparent surface colors with a backdrop-blur of 12px–20px.
• Signature Textures: For primary CTAs or Hero sections, apply a subtle linear gradient from primary (#6C0128) to primary-container (#8C1F3D) at a 135-degree angle. This adds "soul" and depth that a flat hex code cannot achieve.
---
Use with MCP
Don't have the MCP? Install it here