DESIGN.Crm

Overview

CRM is the internal application used by WarmlyYours staff to run sales, fulfillment, customer support, accounting, and operations. The audience is employees, not customers, and they live in the app for hours a day. The visual identity therefore prioritizes:

1. Density. Get more on screen. Compact tables, tight padding, scannable typography.
2. Speed. No custom font loading, no decorative imagery, no animation beyond functional state changes.
3. Recognition. Same brand burgundy as WWW, but used utilitarianly — for the navbar, primary buttons, and brand moments only. Most surfaces are neutral.

The system is Bootstrap 5.3 with a thin theming layer (client/stylesheets/crm/bs.scss) that swaps colors but keeps Bootstrap’s typographic and spatial defaults intact. RailsbootUI ViewComponents sit on top for higher-level patterns (page headers, action menus, breadcrumbs, badge stacks).

CRM is a Hotwire app — Turbo Frames for partial updates, Stimulus for interactivity. Every component should degrade to a working server-rendered form. Avoid client-only interactions that strand a Turbo navigation.

Colors

Three tiers, in priority order:

Identity. primary (#913120) is the same burgundy spirit as WWW but shifted slightly for legibility against dense data. Use for primary buttons, the navbar background, focused brand moments. Do not use as a fill on data surfaces — burgundy on a data table is visual noise.

Neutrals. white is the canonical surface for data. light-shade (#FBF9F8) is warmer and reserved for sidebars/panels — it differentiates chrome from content. gray-100 is the table-zebra/header neutral. Borders are a single #DDDDDD (border token); do not invent new border greys.

Domain accents. The phone-* palette has business meaning — those colors map to telephony states (available, on call, busy, do-not-disturb, etc.) and are visible to switchboard operators. They are not theming colors and must not be repurposed. Adding a new phone state requires a coordinated UX + business decision.

Links inside CRM are info (teal-green #307E6B), not brand burgundy. This deliberately separates “navigate to” from “perform action.” Burgundy is reserved for action.

Typography

System UI stack only — no @font-face loading. CRM ships zero font bytes, which keeps perceived load times fast and lets the OS render at native hinting. The stack starts with -apple-system / BlinkMacSystemFont so macOS and Windows both render in their native UI font, falling back through Segoe UI, Roboto, etc.

Default body weight is 400. 500 is the heading weight; 600 is reserved for body-emphasis, table headers, and small caps moments. There is no bold weight in normal use — font-weight: bold should be considered a smell on this surface.

monospace exists for IDs, SKUs, account numbers, code blocks, and any value that benefits from fixed-width alignment. Reach for it generously in tables of identifiers — that’s a design feature, not a default.

The H6 token has slight letter-spacing (0.02em); it’s used as a small-caps section label inside cards and panels.

Layout

Bootstrap 5.3 grid, default breakpoints (no xxl extension — the WWW site adds one, CRM does not). Container max-widths are Bootstrap defaults. Most CRM pages use container-fluid so data tables breathe at large widths.

Spacing scale follows Bootstrap 0–5. Reach for 0, 1, 2, 3 for intra-component spacing; 4 and 5 for between cards and major sections. Do not introduce a 6+ extension — CRM density does not benefit from larger vertical rhythm.

Page header pattern: H1 + breadcrumb + actions row, all on white. The breadcrumb sits on a barely-tinted background (rgba(0,0,0,0.03)) so it visually precedes the H1 without claiming attention. Use the crm-pages skill conventions for the canonical structure.

Elevation & Depth

Flat. CRM has no sanctioned shadow elevation outside of Bootstrap’s modal/ dropdown defaults. Cards differentiate via 1px borders (border token), not shadows. Sticky headers in long pages get a 1px bottom border on scroll — nothing more.

If a surface needs to feel “lifted,” check whether it actually needs to — density usually wants the opposite.

Shapes

Bootstrap 5.3 defaults — 0.375rem (rounded.md) on buttons, inputs, cards. Pills (rounded.pill) for badges and status chips only. Tables, navbars, and sidebars are square-cornered. Avatars are circles (rounded.pill applied to square images).

Components

Buttons. Primary is brand burgundy; reserve for the dominant action on the page (one per significant region). Secondary (slate #5A7B81) for “alternative.” Success (green) for create/confirm; danger (red) for delete/cancel. Outline variants for tertiary actions and toolbars.

Forms. Bootstrap default treatment — white background, gray border, default focus ring. No brand red overlay on inputs. Form labels use body-emphasis.

Tables. White surface, gray-100 headers, border token on row dividers. Compact padding (0.5rem cell padding) is the default. Row hover uses gray-100. Use the tables partial conventions in client/stylesheets/crm/partials/_tables.scss rather than hand-styling.

Page header. H2 (not H1 — CRM convention reserves H1 for the document title set by Rails) on white, breadcrumb above, actions to the right. The crm-pages skill defines the exact structure for ViewComponent assembly.

Navbar. navbar-bg (#7F2024 — a deeper burgundy than primary) for contrast against page content. White text. Active link state is brand primary (#913120).

Badges. Pill-shaped, caption-sized type, semantic background. Domain states (phone-status-*) use the telephony palette and must be applied via the corresponding helpers, not arbitrary CSS classes.

RailsbootUI components are the canonical assembly layer. Reach for Railsboot::PageHeaderComponent, Railsboot::CardComponent, etc., before authoring new ViewComponents — see the view-components and ui-conventions skills.

Do’s and Don’ts

Do start every CRM page from the crm-pages skill template. The page header / breadcrumb / actions pattern is non-negotiable for navigation consistency.

Do use system UI fonts. CRM ships no font files.

Do use info (teal) for links and primary (burgundy) for action buttons. The split keeps “click to navigate” visually distinct from “click to do.”

Do lean on Bootstrap utilities and RailsbootUI components before writing new SCSS or ViewComponents.

Do use monospace for SKUs, IDs, account numbers, and any data where column alignment matters.

Don’t load custom fonts on CRM. The system stack is the standard.

Don’t use the phone-* palette for theming. Those colors carry business meaning; misuse confuses switchboard operators.

Don’t introduce shadow elevation. Use 1px borders to separate surfaces.

Don’t extend the spacing scale beyond Bootstrap’s 5. CRM is dense by design.

Don’t use brand burgundy as a content-area background. It’s an identity color, not a fill — keep it in chrome (navbar, primary buttons, brand spots).

Don’t use H1 inside the page body — Rails sets <title>, and the page header is H2 by convention.