157 lines
5.1 KiB
Markdown
157 lines
5.1 KiB
Markdown
---
|
|
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.
|