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