67/apps/web/DESIGN.md

version, name, description, colors, typography, rounded, spacing, components, motion

version	name	description	colors	typography	rounded	spacing	components	motion
alpha	DSTU Editorial Signal	A calm editorial media system for a large technical university.	primary primary-strong accent accent-soft paper surface ink muted line success warning danger on-primary #123C36 #082B27 #D65A3A #F6DDD4 #F5F2EA #FFFDF8 #17201E #66706D #D9D8D0 #247A5A #A96616 #B43D3D #FFFFFF	display h1 h2 body label fontFamily fontSize fontWeight lineHeight letterSpacing Georgia, Cambria, serif 4rem 500 1.02 -0.035em fontFamily fontSize fontWeight lineHeight Georgia, Cambria, serif 3rem 500 1.08 fontFamily fontSize fontWeight lineHeight Georgia, Cambria, serif 2rem 500 1.15 fontFamily fontSize fontWeight lineHeight Inter, Arial, sans-serif 1rem 400 1.65 fontFamily fontSize fontWeight lineHeight letterSpacing Inter, Arial, sans-serif 0.75rem 700 1.2 0.08em	sm md lg 0.375rem 0.75rem 1.25rem	xs sm md lg xl 2xl 0.25rem 0.5rem 1rem 1.5rem 2.5rem 4rem	button-primary button-accent card backgroundColor textColor rounded padding height {colors.primary} {colors.on-primary} {rounded.sm} 0.75rem 1.125rem 2.75rem backgroundColor textColor rounded padding height {colors.accent} {colors.on-primary} {rounded.sm} 0.75rem 1.125rem 2.75rem backgroundColor textColor rounded padding {colors.surface} {colors.ink} {rounded.md} 1.25rem	feedback content easing 140ms 240ms cubic-bezier(0.2, 0, 0, 1)

Overview

The portal should feel like the digital edition of a respected technical university newspaper combined with the calm wayfinding of a contemporary campus. It is made for students checking what happens today, researchers reading long-form work, and staff moving material through an editorial workflow.

The page is a publication first and a software dashboard second. Public pages should feel authored and alive. Administrative pages inherit the same typography, color and editorial hierarchy rather than becoming a generic enterprise product.

Colors

The canvas is warm paper, never sterile white. Deep green is institutional and architectural; it anchors navigation, important buttons and large information blocks. Terracotta is scarce and energetic, reserved for the current moment: primary calls to action, live status and selected states. Body copy uses softened ink rather than black.

Status colors communicate meaning and never replace a written label.

Typography

Headlines use a restrained editorial serif. Interface copy, metadata and controls use a neutral sans serif. Large titles are allowed to breathe, while dashboards use smaller, denser headings. Long articles have a comfortable measure of roughly 68 characters.

Uppercase is reserved for short section labels and metadata, never paragraphs or navigation menus.

Layout

Public pages use a 12-column editorial grid with deliberate asymmetry: a leading story may occupy seven columns while a compact news rail occupies five. The maximum content width follows the available viewport with a readable editorial cap. On narrow screens, content becomes a single readable column without decorative reordering.

Dashboard layouts use a fixed desktop rail and a drawer on mobile. Tables may scroll, but the page itself must not.

Responsive behavior is fluid rather than tied to named device widths. Layouts use minmax(), clamp(), fractional columns and content-based wrapping. Media tabs scroll when space is limited and collections gain columns only when their content fits.

Elevation & Depth

Depth is mostly created with borders, overlapping paper surfaces and spacing. Shadows are soft and rare. Hover states may lift a card by two pixels but should never make the interface feel springy.

Shapes

Corners are modest. Buttons and inputs use 0.375rem corners; cards use 0.75rem; feature media may use 1.25rem. Pills are reserved for compact filters, tags and status, not general containers.

Components

Cards expose a clear reading order: section, title, summary, then metadata. Images do not carry text overlays except in the single leading story. Forms use persistent labels, visible focus rings and errors placed next to fields.

Motion is quick and mechanical. Menus, dialogs and panels may combine opacity with a small transform. Content transitions use cross-fades. Nothing bounces or takes longer than 300ms. Reduced-motion users receive immediate state changes.

Do's and Don'ts

• Do make the first screen feel like today's university edition.
• Do let real Russian headlines create the visual rhythm.
• Do preserve generous reading space around long-form content.
• Do use terracotta sparingly so it keeps meaning.
• Don't use gradients, glassmorphism, neon glows or giant rounded containers.
• Don't make every card animate independently.
• Don't turn the public portal into a grid of identical dashboard widgets.
• Don't hide essential labels behind icons.