Rubrion brand guide

Canonical visual identity for the Rubrion platform and its whitelabel products. Source of truth for palettes, typography, logo usage, and core UI components. The light/dark palettes here match the default FALLBACKS in src/lib/settings.ts — every EdgePress tenant inherits them until they override colors via the admin UI.

Logo

Variant	Background	URL
Primary	Light	https://media.rubrion.ai/images/logo_rubrion_ver4.svg
Primary (PNG)	Light	https://media.rubrion.ai/images/logo_rubrion_ver4.png
White	Dark	https://media.rubrion.ai/images/logo_rubrion_ver4_white.svg
White (PNG)	Dark	https://media.rubrion.ai/images/logo_rubrion_ver4_white.png
White negative	Dark	https://media.rubrion.ai/images/logo_rubrion_ver4_white_negativo.svg
White negative (PNG)	Dark	https://media.rubrion.ai/images/logo_rubrion_ver4_white_negativo.png
Animated	Any	https://media.rubrion.ai/images/logo_animation.svg
Loading spinner	Any	https://media.rubrion.ai/images/loading_rubrion.svg

Rules:

• Always use the SVG version where the rendering pipeline supports it. Fall back to PNG only for legacy contexts (email clients, embed previews, social cards).
• Use the white variant on solid dark backgrounds; use the white negative when the dark background is a photo or gradient that the simple white logo would visually clash with.
• Minimum clear space around the mark: half the logo height on every side. Don't crop.
• Don't recolor, skew, or apply effects (shadow, glow, outline). If you need a colored logo, request a new variant — don't tint the SVG inline.

Color palette

Brand accent

Token	Hex	Use
themePrimary	#FF0040	CTAs, links, focus rings, active state, error severity

The accent is the same across light and dark — it's the platform's brand signal.

Light theme

Token	Hex	Role
colorBgLight	#FFFFFF	Page background
colorHeaderBgLight	#FFFFFF	Header / navbar
colorHeadingLight	#0F1219	Headings, primary text
colorTextLight	#222939	Body copy
colorMutedLight	#60739F	Captions, hints, placeholders
colorBorderLight	#E5E9F0	Dividers, input borders, code-block bg

Dark theme

Token	Hex	Role
colorBgDark	#0F1119	Page background
colorHeaderBgDark	#1B1E2D	Header / navbar
colorHeadingDark	#F0F3FA	Headings, primary text
colorTextDark	#C8D2E6	Body copy
colorMutedDark	#8291AF	Captions, hints, placeholders
colorBorderDark	#262B3C	Dividers, input borders, code-block bg

Rules:

• The accent (#FF0040) is reserved for one call-to-action per visible region. Don't sprinkle it on body links, decoration, or section accents — it loses meaning.
• Don't introduce new neutrals. Pick from the muted/text/border tokens of the active theme.
• Body text should always sit on bg, never on headerBg. The header is for branding/nav only.

Typography

Fira Sans — body & UI

Primary typeface. Used for everything that isn't code: headings, body copy, buttons, navigation, captions.

• Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
• Heading scale: 700 / 600 weights, 1.5–2.5rem
• Body: 400 / 1rem / line-height 1.6
• UI labels: 500 / 0.85rem / letter-spacing 0.02em

Fira Code — code & monospace

Used exclusively for code blocks, inline code, command-line snippets, and any developer-facing data display (API keys, IDs, hex values, file paths).

• Weights: 400 (regular), 500 (medium)
• Default size: 0.9rem in body, 0.95rem in dedicated code blocks
• Ligatures on (it's the point of using Fira Code) — =>, !=, >=, ===, etc. should render as ligatures.

Rules:

• Never use Fira Code for prose. It's a code font — the ligatures and width make body copy harder to scan.
• Never use Fira Sans for code. Prose fonts kill scannability of indentation, sigils, and operators.
• System-font fallbacks for both: -apple-system, "Segoe UI", system-ui, sans-serif for Fira Sans, ui-monospace, SFMono-Regular, Menlo, monospace for Fira Code.

Components

Buttons

• Primary — solid themePrimary background, white text, no border. For the single most important action on the screen.
• Secondary — white (or headerBg) background, body-text color, 1px border in the theme's border token. For neutral actions next to a primary.
• Danger — white background, red text (#c1121f on light, lighter on dark), 1px red-tinted border. For destructive actions only.
• Padding: 0.5rem 1.1rem. Border radius: 6px. Font: Fira Sans 500.
• Disabled state: 0.6 opacity, no hover, cursor: not-allowed.

Badges / pills

• Padding: 0.25rem 0.6rem. Border radius: 999px. Font: Fira Sans 500, 0.75rem, uppercase, letter-spacing 0.04em.
• Use a tinted background (~10% saturation of the foreground color) and the foreground color itself for text. Never the brand accent for non-error badges.

Alerts

• Padding: 0.6rem 0.8rem. Border radius: 6px. Font: Fira Sans 400, 0.85rem.
• Success: green text on a faint green background (#2c7a3e on #e7f5ec).
• Error: red text on a faint red background (#b3261e on #fdecec).
• One-line by default. Wrap to two lines maximum.

Inputs

• Padding: 0.55rem 0.75rem. Border: 1px in the active theme's border token. Border radius: 6px. Font: Fira Sans 400, 0.95rem.
• Focus: border becomes themePrimary, no extra outline.
• Placeholder: colorMuted.
• Disabled: background colorBorder, foreground colorMuted, cursor: not-allowed.

Cards

• Background: bg. Border-top: 4px solid themePrimary (signature card decoration).
• Padding: 2rem. Border radius: 12px. Box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06).
• Use cards as the outermost container for any focused settings/admin/CRUD page. Don't nest cards.

Banners

Variant	URL
Generic — dark	https://media.rubrion.ai/images/rubrion_generic_banner_dark.svg
Generic — white	https://media.rubrion.ai/images/rubrion_generic_banner_white.svg
Reddit desktop — dark	https://media.rubrion.ai/images/rubrion_reddit_desktop_banner_dark.svg
Reddit mobile — dark	https://media.rubrion.ai/images/rubrion_reddit_mobile_banner_dark.svg
Reddit mobile (PNG)	https://media.rubrion.ai/images/rubrion_reddit_mobile_banner_dark.png

PNG fallbacks exist for rubrion_generic_banner_* at the same paths with .png extension.

Rules:

• Use the dark variants on dark-mode hero sections and platforms with a dark default (Reddit, X dark theme).
• Don't crop banners — they're sized for specific surfaces. Use the reddit_* variants for Reddit posts; use the generic_* variants everywhere else.

Motion / loading

• loading_rubrion.svg — animated spinner. Use as the canonical loading indicator across all Rubrion-branded surfaces. Sized at 32–64px in most contexts.
• logo_animation.svg — animated logo entrance. Reserve for hero-screen reveals, splash screens, and onboarding moments. Don't use as a routine spinner.

Quick reference snippet

CSS custom properties for embedding the palette in any web project:

: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 (drop into <head>):

<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" />