Design.md demo

Ade's Design System

View design.md

Hero tile

Human-made things should carry fingerprints.

Portrait of Ade This demo mirrors the current starting point: calm typography, a single accent color, and layouts that let the writing and images do the talking.

See styles Read sample

Markdown styling

Heading Two

This system favors readable prose, restrained emphasis, and a single link color. This block shows how bold text, emphasis, and links should feel in the system.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat adipisci dolorem aliquam in, veniam corporis possimus, maxime deserunt, delectus reprehenderit aspernatur. Animi molestias minus eveniet repudiandae? Maiores ducimus cupiditate molestiae.

"Beauty hides in plain sight."
  • Use 17px body text for a reading-first pace.
  • Keep the accent color consistent across links and buttons.
  • Prefer spacious line length and very light chrome.
button {
  background: #cc3300;
  border-radius: 4px;
  transform: scale(0.95);
}

Core components

Buttons

Card

Utility cards stay light, bordered, and quiet. They support the content rather than competing with it.

Typography

Vollkorn across display and body with restrained, editorial rhythm.

Spacing

An 8px base with generous section spacing and tighter corners.