Design System Document

1. Overview & Creative North Star

The Creative North Star for this design system is “The Digital Curator.”

This system bridges the high-stakes, rapid-fire world of the modern newsroom with the meticulous, structured environment of an academic laboratory. To move beyond a standard “template” look, we employ Intentional Asymmetry. By utilizing a “0px” roundedness scale across all components, we lean into a brutalist, editorial precision that feels both credible and innovative.

The design breaks traditional grid rigidity through overlapping elements—such as text containers that bleed into high-resolution imagery—and a stark contrast between dense, authoritative typography and expansive, functional whitespace.

2. Colors

Our palette is rooted in the “Academic Lab” aesthetic: deep, charcoal neutrals grounded by “Academic Crimson” and “Tech Teal.”

  • Primary (#040505) & Primary Container (#1e1e1e): Used for maximum authority. These should form the “ink” of our digital newsroom.
  • Secondary (#b42720): The Academic Crimson. This is used sparingly for critical accents, status indicators, and vertical structural “anchors” (inspired by the red editorial margins of a professor’s notebook).
  • Tertiary (#000707): Reserved for technical deep-dives and laboratory instructional blocks.

The “No-Line” Rule

To maintain a high-end editorial feel, 1px solid borders are strictly prohibited for sectioning. Boundaries must be defined solely through background color shifts. For example, a surface-container-low section sitting on a surface background provides all the separation necessary.

Surface Hierarchy & Nesting

Treat the UI as a series of physical layers—stacked sheets of fine, heavy-stock paper. * Base: Use surface (#faf9f9) for the majority of long-form reading. * Elevation: Place surface-container-lowest (#ffffff) cards on a surface-container-low (#f4f3f3) section to create a soft, natural lift.

Signature Textures & Glass

Main CTAs or hero backgrounds should use subtle gradients—transitioning from primary to primary-container—to provide a visual “soul” that flat hex codes lack. For floating navigation or “overlay” labs, use Glassmorphism: semi-transparent surface colors with a backdrop-blur effect to let content bleed through, ensuring the layout feels integrated.

3. Typography

The typography system is a dialogue between the “Authoritative Serif” and the “Functional Sans.”

  • Display & Headlines (Noto Serif): These are the voice of the system. Use display-lg (3.5rem) for hero statements to mimic a front-page headline. These should be tight-leaded and high-impact.
  • Title & Body (Inter): The “Technologist” side of the brand. Inter provides a clean, neutral counterpoint to the Serif, ensuring that technical data and instructional materials remain legible and modern.
  • Labels (Work Sans): Used for metadata, tags, and “Lab Notes.” These should be capitalized or monospaced in appearance to denote technical data points.

4. Elevation & Depth

In this system, depth is a matter of tone, not structure.

  • Tonal Layering: Hierarchy is achieved by stacking surface-container tiers. A sidebar should not be “bordered off”; it should simply exist on a surface-container-high tier against a surface main content area.
  • Ambient Shadows: If an element must float (e.g., a modal or floating action button), use an extra-diffused shadow: box-shadow: 0 20px 40px rgba(26, 28, 28, 0.06). The shadow must be a tinted version of the on-surface color to mimic natural light.
  • The “Ghost Border” Fallback: If a container requires a boundary for accessibility, use the outline-variant (#c4c7c7) at 15% opacity. This creates a “Ghost Border” that defines space without cluttering the visual field.

5. Components

Cards

  • Layout: Bold, sharp-edged (0px radius).
  • Styling: Forbid divider lines. Use spacing-8 (2rem) of vertical white space to separate the header from the body.
  • The “Crimson Anchor”: Use a secondary (#b42720) 4px vertical accent on the left-hand side of cards to denote “Live Projects” or “Active Research.”

Buttons

  • Primary: primary background, on-primary text. No border. Sharp corners.
  • Secondary: surface-container-highest background. Subtle, 0.5s transition on hover to secondary-container.
  • Tertiary: Text-only with a secondary underline that expands on hover.

Lists (Blog & Teaching Materials)

  • Structure: No horizontal dividers. Use a surface-variant background for every second item to create a “Zebra” stripe pattern that feels like a technical logbook.
  • Metadata: Use label-md in on-surface-variant for dates and categories, positioned with wide gutters (spacing-10).

Technical Lab Inputs

  • Fields: Background surface-container-lowest with a “Ghost Border.” Focus states must transition the border to secondary (Crimson) to mimic an instructor’s correction.

6. Do’s and Don’ts

Do’s

  • DO use extreme scale. Pair a display-lg headline with body-sm metadata to create an editorial “magazine” feel.
  • DO embrace the “0px” roundedness. Every corner must be a sharp 90-degree angle to maintain the “Academic Lab” precision.
  • DO use the spacing-24 (6rem) value for section transitions to create a “High-End” sense of breathing room.

Don’ts

  • DON’T use 1px solid black borders. It cheapens the “Digital Newsroom” aesthetic. Use tonal shifts instead.
  • DON’T use standard drop shadows (e.g., 0 2px 4px). They look like “out-of-the-box” UI. If it doesn’t look like a soft ambient glow, remove it.
  • DON’T mix Serif and Sans-Serif within the same text block (e.g., a serif word in a sans-serif sentence). Keep the roles of “Authoritative Header” and “Functional Body” distinct.