Demius Design Contract

Overview

Demius is a quiet, editorial Astro blog theme for long-form writing, small projects, and everyday observations. The interface should feel like an open desk: focused, warm, restrained, and easy to return to.

Principles

• Content leads; decoration supports hierarchy and never competes with a title or paragraph.
• Use a continuous page surface for sections. Reserve framed cards for repeated content, tools, dialogs, and media.
• Keep the visual vocabulary small: paper-like surfaces, one terracotta accent, hairline rules, serif editorial headings, and mono metadata.
• Prefer a useful interaction over a decorative animation. Honor prefers-reduced-motion.

Tokens

Token	Light	Dark	Usage
--page-bg	#f5f3ef	#171715	Page canvas
--surface	#fbfaf8	#201f1c	Cards and controls
--surface-strong	#eeece7	#2a2925	Bands and selected states
--ink	#242422	#f1efe9	Primary text
--ink-muted	#74736d	#aaa79d	Secondary text
--accent	#e05a47	#f07b67	Links, focus, progress

Typography uses Manrope for interface text, Noto Serif SC for editorial headings, and DM Mono for labels, dates, code, and metadata. Body text is 15px with a 1.65 line-height; long-form prose uses a 720px measure and 2.02 line-height.

Spacing follows a 4px base rhythm. Common values are 8, 12, 16, 24, 32, 48, and 80px. Panel radius is 20px; tags and action buttons are full-pill; fields use 8px.

Components

• Header: fixed, quiet, and transparent until scroll. Collapse to a drawer below 820px.
• Post card: image, category, serif title, two-line summary, and mono date. Lift by 4px on hover.
• Archive row: date, title, and category on one line; hide the category column on narrow screens.
• Button: terracotta fill for primary actions, hairline outline for icon actions. Every icon-only button has an accessible label and tooltip title.
• Dialog: use a blurred page scrim, visible focus target, Escape to close, and click-outside dismissal.
• Prose: use semantic headings, readable links, restrained blockquotes, and dark code blocks with horizontal scrolling.

States

Interactive elements use an accent border or ring on focus, a subtle surface change on hover, and a pressed translation/scale only when it communicates activation. Disabled actions lower contrast without removing their label. Empty states explain what is absent in one sentence.

Motion

Use 180–300ms ease transitions for color, drawer, and card changes. Use a single short toast entrance. Do not animate text or layout continuously. Under prefers-reduced-motion, remove non-essential transitions and smooth scrolling.

Responsive behavior

The desktop layout is a centered 1180px reading canvas. Home sections use two-column editorial grids; article pages use a 720px prose column plus a sticky 190px table of contents. At 820px, grids become single-column and navigation becomes a drawer. At 540px, keep 17–18px minimum body text, hide secondary metadata, and preserve 18px page gutters.

Accessibility

Use one h1 per page, ordered heading levels, landmark elements, visible keyboard focus, semantic links for navigation, descriptive alt text for images, and aria-label on icon-only controls. Maintain readable contrast in both themes. Never use color alone to communicate state.