Rebar Design System

Overview

The marketing surface pairs an industrial blue primary (#1863DC) with a magenta accent (#CC3366) on a white canvas. Roboto is the single typeface; all corners are tightly squared at 2px (buttons, inputs) or lightly rounded at 4px (cards). Shadows are intentionally quiet — the system reads as workmanlike, not fintech-flashy.

Colors

Primary & Accent

Text

Backgrounds

Semantic

Typography

Roboto across all weights. A single family keeps the system coherent. Display weights (700) dominate hero moments; UI surfaces lean on 500 medium for nav items and captions.

Spacing

4px base unit; the scale is multiplicative and used consistently for padding, gap, and vertical rhythm.

Border Radius

Squared to lightly rounded. The 2px base (buttons, inputs) is the system's signature — it gives the brand its industrial, unembellished feel.

Shadows

Buttons

Two-pixel borders on solid + outline variants give buttons their squared, durable feel. Padding is 10px 24px on the marketing site, 8px 27px in the portal.

Inputs

Cards

Navigation

Sticky top nav, 72px tall, white surface with 1px hairline bottom. Nav links are 14px / 500, dark text with blue hover.

Footer

Tailwind Reference (Website)

The paired JSON file ships a ready-to-consume tailwind.theme.extend block plus componentRecipes. Paste the extend object into tailwind.config.js under theme.extend, or import the JSON directly in a modern build. When a recipe exists, use it verbatim instead of ad-hoc utility strings.

How to consume

// tailwind.config.js
import tokens from './design-system-website.json' assert { type: 'json' };

export default {
  content: ['./src/**/*.{html,ts,tsx,vue}'],
  theme: {
    extend: tokens.tailwind.theme.extend,
  },
};

Exported theme.extend highlights

Component recipes

Overview

The portal keeps the brand blue but switches the shell from white to a cool off-white (#F1F5F8) so content cards can elevate on a quiet canvas. Typography shifts to 15px body and tighter slate text (#101828 / #2C3E50). Scope documented here is the authentication surface — deeper dashboards sit behind login and were not crawlable.

App Colors

Surfaces

Text

Borders & States

App Typography

Form Fields

Auth Card / Surface

App Buttons

Identical chrome to the marketing system — primary blue solid, 2px border, 2px radius. Portal padding is slightly tighter (8px 27px) to match dense form rhythm.

Tailwind Reference (App / Portal)

The paired JSON file ships a ready-to-consume tailwind.theme.extend block plus componentRecipes. Paste the extend object into tailwind.config.js under theme.extend, or import the JSON directly in a modern build. When a recipe exists, use it verbatim instead of ad-hoc utility strings.

How to consume

// tailwind.config.js
import tokens from './design-system-app.json' assert { type: 'json' };

export default {
  content: ['./src/**/*.{html,ts,tsx,vue}'],
  theme: {
    extend: tokens.tailwind.theme.extend,
  },
};

Exported theme.extend highlights

Component recipes

Tailwind Reference (Combined)

The combined JSON exposes one tailwind.theme.extend that covers both surfaces. Per-surface CSS variables are prefixed in componentRecipes (website* vs app*). When a build only targets one surface, prefer that surface's dedicated design-system-website.json or design-system-app.json.

How to consume

import tokens from './design-system.json' assert { type: 'json' };
export default { theme: { extend: tokens.tailwind.theme.extend } };

Component recipes (by scope)