Rubrion brand guide

Canonical visual identity for the Rubrion platform. Source of truth for palettes, typography, logo usage, and core UI components. The light/dark palettes here match the default FALLBACKS in EdgePress (src/lib/settings.ts); every tenant inherits them until overridden via the admin UI.

Logo

Primary marks

PrimarySVG

WhiteSVG

White negativeSVG

Animated

Logo entranceSVG

Loading spinnerSVG

Rules

Always prefer SVG. Use PNG only for legacy contexts (email, embed previews).
White mark on solid dark; white-negative on dark photos or gradients.
Minimum clear space around the mark = ½ logo height. Don't crop.
Don't recolor, skew, or apply effects. Request a new variant if needed.

Color palette

Brand accent

themePrimary

CTAs · links · focus · errors

#FF0040

Light theme

colorBgLight

Page background

#FFFFFF

colorHeaderBgLight

Header / navbar

#FFFFFF

colorHeadingLight

Headings, primary text

#0F1219

colorTextLight

Body copy

#222939

colorMutedLight

Captions, hints

#60739F

colorBorderLight

Dividers, borders

#E5E9F0

Dark theme

colorBgDark

Page background

#0F1119

colorHeaderBgDark

Header / navbar

#1B1E2D

colorHeadingDark

Headings, primary text

#F0F3FA

colorTextDark

Body copy

#C8D2E6

colorMutedDark

Captions, hints

#8291AF

colorBorderDark

Dividers, borders

#262B3C

Rules

Reserve the accent for one CTA per visible region — overuse kills its meaning.
Don't introduce new neutrals. Pick from the muted/text/border tokens of the active theme.
Body text on bg, never on headerBg. Header is for branding/nav only.

Typography

Fira Sans — body & UI

Display · 700 · 2.5rem

The quick brown fox jumps over the lazy dog

Heading · 600 · 2rem

Heading copy that introduces a section

Body · 400 · 1rem · line-height 1.6

Rubrion is a platform for whitelabel publishing. The body copy uses Fira Sans regular at 1rem with a 1.6 line height for comfortable long-form reading. Numerals 0123456789 sit on the baseline and the typeface holds up well across both light and dark themes.

UI label · 500 · 0.85rem · letter-spacing 0.02em

SUBSCRIBE · DISMISS · CONTINUE

Fira Code — code & monospace

Code · 400 · 0.95rem · ligatures on

// Use Fira Code for any developer-facing display.
const greet = (name: string) => `Hello, ${name}`;
if (count !== 0 && total >= limit) flush();

Rules

Never use Fira Code for prose — ligatures and width hurt scanability.
Never use Fira Sans for code — kills indentation and operator clarity.
System fallbacks: -apple-system, "Segoe UI", system-ui, sans-serif for Fira Sans · ui-monospace, SFMono-Regular, Menlo, monospace for Fira Code.

Components

Buttons

Badges

Active Unsubscribed Featured

Alerts

Saved.

Something went wrong — try again.

Inputs

Card

Card title

Cards are the outermost container for any focused settings, admin, or CRUD page. Border-top in the brand accent is the signature decoration.

Banners

Quick reference

CSS custom properties

:root {
  --rubrion-accent: #FF0040;
  --rubrion-bg: #FFFFFF;
  --rubrion-header-bg: #FFFFFF;
  --rubrion-heading: #0F1219;
  --rubrion-text: #222939;
  --rubrion-muted: #60739F;
  --rubrion-border: #E5E9F0;
}

[data-theme="dark"] {
  --rubrion-bg: #0F1119;
  --rubrion-header-bg: #1B1E2D;
  --rubrion-heading: #F0F3FA;
  --rubrion-text: #C8D2E6;
  --rubrion-muted: #8291AF;
  --rubrion-border: #262B3C;
}

Fonts

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" />