Blackbird Style Guide

Live inventory of every UI pattern. Use these names when referencing components.

1. Colors

Brand Palette

brand#FFC36E

brand-hover#F0A030

brand-muted#F5C06A

brand-light#FDF4E6

brand-active#2251A3

Rule: Brand amber is reserved for primary action buttons and sparse accent highlights only. Never use on body text or links.

Navy

navy#001F5B

navy-50#E6EDF7

navy-600#1A4A8A

navy-900#0A2347

Coral (Warning)

coral#FF6B6B

coral-hover#E85555

coral-muted#FF8A8A

coral-light#FFF0F0

Rule: Coral replaces red for warnings, caution, and expiring status. Red is still used for hard errors and destructive actions.

Semantic Colors

successemerald-*

errorred-*

infoblue-*

warning#FF6B6B

requiredorange-400

specialpurple-*

emerald — success, positive values, issued grants, verified status

red — errors, negative values, destructive actions, delete

blue — links, info banners, pending status, active tab underline

coral — warnings, caution, expiring status (replaces amber)

orange — required field borders (2px stroke)

purple — grants, vesting, special actions

Text Colors

Primary body text-slate-900

Secondary body text-slate-700

Tertiary / labels text-slate-500

Muted / placeholder text-slate-400

Disabled text-slate-300

Link text text-blue-600

Action link (add/create) text-emerald-600

Error text text-red-500

Required label text-orange-500

2. Typography

Headings

Page Title text-2xl font-bold

Section Heading text-lg font-semibold

Card / Modal Header text-sm font-semibold

Body Text

Standard body text (tables, descriptions) text-sm

Small text (badges, secondary info) text-xs

Form Label text-[11px] uppercase tracking-wider

Tiny label (badge text, captions) text-[10px]

Table Headers

Column Headertext-xs font-semibold uppercase tracking-wider text-slate-500

3. Buttons

Standard Buttons (.btn)

.btn .btn-primary.btn .btn-secondary.btn .btn-ghost.btn .btn-danger

Small Buttons (.btn-sm)

Inline Action Buttons

PENDING

Inline buttons: FUND (emerald), PENDING badge (slate), cancel (X icon), icon button, add link (emerald)

Full-Width Action Button

The ONLY place amber/brand color is used as text fill — on the primary CTA button.

4. Form Inputs

Standard Input

LabelINPUT_CLASS

Required Input (purple stroke)

Required FieldINPUT_CLASS_REQUIRED / border-2 border-purple-400

Error Input

Field with Error

This field has a validation error

border-red-300 bg-red-50/50

Select

Entity Type

Toggle Buttons (Yes / No)

Binary toggle: selected = filled color, unselected = white with border

Entity Info Row (Read-Only)

NameSFR3 Operator LLC

Emailops@sfr3.com

Tax ID—

InfoRow: label (slate-400) + value. Required-missing: label (purple-600) + dash (purple-300).

Entity Info Row (Edit Mode)

Name

Tax ID

EditableInfoRow: required-missing gets purple label + 2px purple border on input.

5. Badges & Status

StatusBadge (4 variants)

VERIFIEDEXPIREDPENDINGN/A

StatusBadge — text-[10px] font-semibold, rounded border pill. Used for KYC, accreditation, gate status.

EmployeeBadge

David IsaacsSFR3|John SmithxSFR3

EmployeeBadge — SFR3 (navy on blue) / xSFR3 (grey on light grey). Inline next to entity names.

Grant Status Badges

ISSUEDPENDINGGRANTUNVEST

Frequency Badges (Vesting)

QUARTERLYMONTHLYANNUALACCELERATE

Red Dot + Italic (Pending Entity)

David IsaacsSFR3

Red dot = entity has pending action. Tooltip: "Pending transaction" or "Pending grant issuance". Entity name italic + muted.

Action Count Badge (Header Bell)

Red pill badge on bell icon

6. Cards & Stats

StatCard (4 accents)

Total Invested

$4,200,000

Active LPs

844

Pending

Errors

Card Container (.card)

Card Header

Card body content. Used for table wrappers, form sections, info panels.

Dashed Placeholder

No data available yet

7. Alerts & Banners

Info Banner (Blue)

Pending transaction

This entity has 1 pending transaction awaiting gate clearance.

Error Alert (Red)

Failed to save: Entity not found at the specified row index.

Success Message (Green)

Transaction saved successfully.

Warning Banner (Coral)

Accreditation expires in 30 days.

8. Table Patterns

Data Table (.data-table)

Entity	Units	Balance	Status
SFR3 Operator LLC	21,710	$4,200,000	ACTIVE
David IsaacsSFR3	0	$0	PENDING
Exited Entity	0	$0	EXITED

Rows: hover bg-slate-50. Pending: red dot + italic + muted. Exited: opacity-40. Entity names: hover:text-blue-600.

Summary / Totals Row

Total	Units	Balance	Profit
TOTAL	156,000	$28,400,000	12.4%

9. Modal Patterns

Modal Structure

Modal Header

Modal body content goes here.

Confirmation Step (Review)

Confirm Transfer

From: SFR3 Operator LLC

To: SFR3 Operator LLP

Units: 11,710

10. Icons (lucide-react)

Navigation

Users (LPs)

Scale (Balances)

ArrowLeftRight (Txns)

DollarSign (Dist)

Shield (Vesting)

Mail (Comms)

FileText (Log)

Actions

PlusCircle

Pencil

Save

Trash2

X (close)

Copy

RefreshCw

Status

Check

CheckCircle2

AlertTriangle

XCircle

Clock

Loader2 (spin)

Bell

Icon Sizes

h-3 w-3

h-3.5 (btn)

h-4 (inline)

h-5 (large)

h-8 (empty)

11. Interactive States

Link Hover

Standard linkAdd action linkEntity name link

Loading Spinner

text-slate-400 (default)text-blue-600 (action)h-6 w-6 (large, modals)

Disabled State

disabled:opacity-50 on buttons. Inputs get bg-slate-50 + cursor-not-allowed.

Empty State

No records found

Try adjusting your search or filters.