The Mediovsky design system.

Brand & logo.

The Mediovsky wordmark is non-negotiable. Indigo dot accent (#3C3FDE) is the only brand color. Never recolor, distort, or rebuild the mark.

Logo variants

logo.svg · light bg

logo-dark.svg · dark bg

Sizes & clear space

Default · 48px

Nav · 32px

Min · 24px

Minimum height 24px. Always leave clear space equal to the height of the "M" on all sides.

Color.

Indigo accent #3C3FDE is the only brand color. Everything else is neutral. Dark mode uses lifted indigo #7A7DFF for contrast.

Brand accent

Light theme tokens

Dark theme tokens

Semantic colors

Use sparingly. Only for status feedback. Avoid in editorial content (indigo accent is enough).

Typography.

One typeface (Inter) used at varied weights and sizes. Editorial mark: light weight (300) for display, regular (400) for body, indigo italics for emphasis (set via <em> with font-style:normal).

Type scale

Spacing & grid.

8-point spacing system. 8-column grid with 32px gutter. 1240px max container width.

8-point spacing scale

Grid

Press G on any page to toggle live grid overlay.

Radius & shadow.

Sparse use of corners and shadow. Cards: 4-12px. Pills: 999px. Shadow only on sticky/floating elements.

Shadows

none · sticky-nav (1) · floating (2) · modal/menu (3)

Motion.

All transitions are calm. Hover: 150ms. State change: 200ms. Nothing slower than 300ms. Easings: ease, ease-out, ease-in-out.

Buttons.

Primary actions

Icon buttons

Forms.

Chips & tags.

Cards.

List items.

Text-forward article list used on homepage, category, author, latest. Date on left, content middle, thumbnail right (8-col).

Pagination.

Tabs.

Alerts & toasts.

Toast

Skeletons & empty states.

Empty state

Badges & labels.

Status pills and disclosure labels. Use to flag content type (Featured, Sponsored), status (Live, Beta, Draft), or recency (New, Updated).

Editorial labels

Status pills

In context: article card

Marquee ticker.

Continuous horizontal scrolling band. Pure CSS animation, pausable on hover. Use sparingly. For breaking headlines or issue announcements.

Default: dark band

Accent variant

Back to top.

Floating button bottom-right of viewport. Appears after scrolling past 600px. Site-wide. Already active on every page.

Theme toggle morph.

Sun and moon icons cross-fade with a 180° rotation when switching themes. Both icons in DOM, opacity flipped by html[data-theme] attribute.

Note: this demo button shares the global toggle logic (any element with #theme).

Modals & popups.

Two patterns: simple CTA popup for one decision, and structured modal for forms with consent checkboxes.

CTA popup

Form modal with consents

Visual popup with image background

CTA over image (no bottom drawer)

Open: button click · close: Esc / overlay click / × button.

Avatars.

Five sizes, with optional status dot. Use initials as default; image when available. Stack overlapping for multi-author or reader lists.

Sizes

With status

Stack (multi-author)

Tooltips.

Hover bubble with arrow. Four positions. Use sparingly. Most labels should be visible without hover.

Dropdowns.

Custom select with option descriptions. Use when native <select> can't carry enough information.

Search input.

Standalone input with leading icon and trailing clear button. For pages without the ⌘K overlay.

Toast queue.

Stacked notifications, auto-dismiss after 5s. Use for transient feedback only. Not for errors that need action.

Notification bell.

Bell icon with unread count badge. Dropdown shows latest notifications.

Count-up & sparkline.

Animated numerics for stats. Use on first view, not in re-renders.

Counter

Sparkline in stat card

Loading button.

Replaces text with spinner during async operation. Pointer events disabled.

Progress stepper.

Multi-step form indicator. Done state is solid, active is outlined, upcoming is muted.

Confetti.

Celebration animation after positive actions (subscribed, completed survey). CSS only. No canvas needed for this scale.

Cookie banner.

Bottom-of-viewport slide-in. Three actions: accept all, preferences, reject. Sits inside max-width to match site grid.

Newsletter sticky bar.

Bottom-of-viewport CTA that appears after the user scrolls 60% of an article. Dismissible.

⌘K hint pill.

Subtle floating pill on first visit, hints at the keyboard shortcut. Dismiss after one use.

Reading rail.

Floating vertical column beside an article: share, save, TOC, font size. Hidden < 1300px.

Section dividers.

Five variants for article breaks. Use line for default, ornament for editorial pauses, stars for chapter-like breaks.

Quote variants.

Five quote styles for different editorial weight. Big for pull-out, small for inline, portrait for testimonials, cols for long.

Big (pull quote)

Small (inline)

With portrait

Two columns

Footnote & sidenote.

Footnotes for citation, sidenotes for tangent. Both keep article body clean.

Footnote (bottom-of-article)

Sidenote (margin)

TLDR box.

Compact summary above long-form articles. 3-5 bullets max, single-screen-readable.

Reading progress circle.

Circular SVG progress, replaces linear progress bar in compact contexts (reading rail, mini player).

Highlight on hover.

Subtle hover effect on key phrases. The underline grows into a full highlight on hover. Use for callouts inline.

Bookmark moment.

Reader selects a passage; a floating action lets them save the quote with the article reference.

Caption styles.

Four caption variants for images: default, italic editorial, source attribution, rich (with label).

Page transitions.

Four built-in transitions between pages. Use sparingly. Default is fade only.

Glitch on hover.

RGB-shift glitch effect. Use with extreme caution. Only for one-off emphasis, never on body text.

Accordion.

Native <details> elements styled as a card. Use for FAQ, methodology notes, advanced settings, anything secondary that shouldn't take vertical space by default.

Card variant

Plain variant (no card)

Built on native <details> for accessibility: works without JS, keyboard-navigable, screen-reader friendly.

Dialog: basic.

Centered modal with title, body, action footer. Use in admin for short single-purpose flows: rename, change status, edit one field. ~520px wide.

Dialog: form.

For "Add user", "+ New token", "+ Manual backup", "+ New redirect": multi-field form with submit / cancel.

Dialog: danger.

Destructive irreversible actions: delete article, restore backup. Red icon header, typed confirmation for the worst.

Confirm.

Smallest possible decision. One line, two buttons. Use for unsubscribe, archive, revoke session.

Drawer.

Right slide-in, 480px. Subscriber details, audit log entry, revision view.

Sheet (mobile).

Bottom slide-up. Mobile fallback for drawers and dialogs, or for filter / sort.

Popover menu.

Anchored dropdown for row ⋯ menus, "Export ▾" buttons.

Inline edit.

Edit in place. Click a value in a table row → input. Use for slug, tag name, single-field changes.

Page banner.

Top-of-page status. Persistent until dismissed.

Decision matrix.

Which UI for which action.

Iconography.

Stroke icons, 1.6 stroke width, 14-20px. Source: Lucide-style custom. Always currentColor.

Article elements.

Standard editorial building blocks for long-form. See article.html for live use.

Quotes & pull quotes.

Inline blockquote

Pull quote (full-width)

Callouts.

Code blocks.

# Performance Max: data quality audit
CHECK enhanced_conversions.upload_rate
   --threshold=95
   --window=30d

CHECK offline_conversions.schema_drift
   --against="baseline_2026_q1.json"

Images & gallery.

Standard aspect ratios: 16:9 (cover, video), 16:10 (article thumbs), 1:1 (Editor's picks), 4:5 (portrait), 21:9 (cinematic hero), 3:4 (issue cover).

Aspect ratios

Gallery (mosaic)

Audio & podcast.

Reserved for when we ship audio editions and the podcast. Compact player for inline use, full card for episode pages.

Inline audio player

Podcast episode card

Video.

Embeds.

Frames for YouTube, Vimeo, X/Twitter, Mastodon, GitHub gist, CodePen, Figma. Always 16:9 or auto.

Stats & KPIs.

Tables.

Voice & tone.

Editorial voice principles. Keep these in mind when writing UI copy, microcopy, and article body.

Naming conventions.

Style guide last updated May 27, 2026. Source of truth for all design decisions in Mediovsky.