ARC — Design System & Styling Guide — STYLE-ARC-01

ARC Design System

The complete design system of the ARC freelance CRM application. All values derived directly from arc/frontend/src/app/globals.css, arc/frontend/tailwind.config.ts, and arc/frontend/src/components/ui.tsx. This guide governs all UI implementation in the ARC frontend and any NeXus components that replicate ARC views.

Document ID

STYLE-ARC-01

Version

1.0

Primary Source

arc/frontend/src/app/globals.css

Theme

Light / Pastel

01 — Color Palette

Source: arc/frontend/src/app/globals.css, arc/frontend/tailwind.config.ts, arc/docs/02_ARCHITECTURE.md section 5.1

Primary Orange Scale

primary-50

#FFF5F0

Page backgrounds

primary-100

#FFE8D6

Card bgd, subtle fills

primary-200

#FFD1B2

Hover states

primary-300

#F4A261

Primary accent (orange)

primary-400

#E8924A

Hover / active

primary-500

#D4803A

Text on light bg

Secondary Pink Scale

secondary-50

#FFF0F3

Alt backgrounds

secondary-100

#FFD1DC

Secondary card bg

secondary-200

#FFBCCC

Secondary hover

secondary-300

#F2A0B5

Secondary accent (pink)

secondary-400

#E8899E

Hover / active

secondary-500

#D47388

Secondary text

Neutral Scale

neutral-50

#FAFAFA

Lightest neutral

neutral-100

#F5F5F5

Borders, dividers

neutral-200

#E5E5E5

Input borders

neutral-700

#404040

Body text

neutral-900

#171717

Headings

Semantic Colors

success

#4ADE80

Positive sentiment, paid

warning

#FBBF24

Pending, attention

danger

#F87171

Overdue, negative

02 — Typography

Source: arc/frontend/src/app/globals.css, arc/docs/02_ARCHITECTURE.md section 5.2

Role	Font Family	Weight	Size	Notes
Heading H1	Inter	800 (extrabold)	24-32px	Page titles
Heading H2	Inter	700 (bold)	18-20px	Section headers
Heading H3	Inter	600 (semibold)	15-16px	Card titles, labels
Body	Inter	400 (regular)	14px	Primary body text, neutral-700 (#404040)
Small / Meta	Inter	400-500	12px	Captions, metadata, dates
Label / Badge	Inter	600	11px	Status badges, pill labels
Code / Template Editor	JetBrains Mono	400	13px	Offer/invoice template code editor, monospace fields
Nav Items	Inter	500-600	13-14px	Sidebar navigation links

03 — Layout

Source: arc/frontend/src/components/AppShell.tsx

Zone	Width	Background	Notes
Page background	Full viewport	#FFFAF5 (warm cream)	applied to <body>
Sidebar	240px fixed	#FFF5F0	Fixed left, full height. Contains nav items + logout at bottom.
Main content area	calc(100vw - 240px)	#FFFAF5	Right of sidebar. Scrollable. Max-width 1280px for content, centered.
Demo banner	Full width	Amber (#FEF3C7)	Shown only in demo mode. Sticky top. Text: "Demo Mode -- Data is simulated."
Spacing grid	8px base unit	-	All margins and padding are multiples of 8px.

04 — Components

Source: arc/frontend/src/components/ui.tsx

Card

Base container for all content groupings.

Live preview (ARC theme):

Example Card

This is how a standard ARC card looks.

Tailwind classes:

bg-white
border border-pink-100
rounded-card   /* 12px */
p-4            /* 16px */
shadow-sm

CSS equivalent:

background: #FFFFFF;
border: 1px solid #FCE7F3;
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,.06);

Button

Two variants: primary (gradient) and secondary (outlined). Source: arc/frontend/src/components/ui.tsx :: Button

Live preview:

Save Offer

Cancel

Primary button CSS:

background: linear-gradient(
  to right,
  #F2A0B5,   /* pink-300 */
  #F4A261    /* orange-300 */
);
color: #FFFFFF;
font-weight: 600;
padding: 8px 20px;
border-radius: 8px;
border: none;

Secondary button CSS:

background: #FFFFFF;
color: #1F2937;
border: 1px solid #E5E7EB;

Input / Form Field

Preview (click to see focus ring):

Client Name

CSS:

border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
color: #1F2937;
width: 100%;
outline: none;

/* Focus state: */
border-color: #F2A0B5;
box-shadow: 0 0 0 3px
  rgba(242,160,181,.15);

Status Badges — Project Status

Pill-shaped badges for all 9 project statuses. Source: arc/frontend/src/components/ui.tsx

Lead Offer Sent In Progress Completed On Hold Cancelled Talks Initialized Offer Accepted Review

Status	Background	Text Color	Tailwind Classes
lead	#FEF3C7	#92400E	bg-amber-100 text-amber-800
talks_initialized	#EDE9FE	#5B21B6	bg-violet-100 text-violet-800
offer_sent	#EDE9FE	#5B21B6	bg-purple-100 text-purple-800
offer_accepted	#E0F2FE	#0369A1	bg-sky-100 text-sky-700
in_progress	#D1FAE5	#065F46	bg-emerald-100 text-emerald-800
review	#ECFDF5	#065F46	bg-green-50 text-green-800
completed	#D1FAE5	#065F46	bg-green-100 text-green-800
on_hold	#F3F4F6	#6B7280	bg-gray-100 text-gray-500
cancelled	#FEE2E2	#991B1B	bg-red-100 text-red-800

Sentiment Badges — Email Sentiment

positive neutral negative urgent

Sentiment	Background	Text Color
positive	#D1FAE5	#065F46
neutral	#F3F4F6	#6B7280
negative	#FEE2E2	#991B1B
urgent	#FEF3C7	#92400E

Sidebar Navigation

Source: arc/frontend/src/components/Sidebar.tsx

Preview:

Sidebar CSS:

width: 240px;
height: 100vh;
position: fixed;
left: 0;
background: #FFF5F0;
padding: 24px 16px;
overflow-y: auto;

/* Nav item default: */
color: #6B7280;
font-size: 13px;
font-weight: 500;
padding: 8px 12px;
border-radius: 8px;

/* Nav item active: */
background: #FFF0F0;
color: #D4607F;
font-weight: 600;

/* Nav item hover: */
background: #FFE8D6;
color: #D4803A;

Navigation Items (9 total)

Label	Route	Icon (Lucide)
Dashboard	/	LayoutDashboard
Clients	/clients	Users
Projects	/projects	FolderKanban
Emails	/emails	Mail
Calendar	/calendar	Calendar
Offers	/offers	FileText
Invoices	/invoices	Receipt
Finance	/bank	Landmark
Settings	/settings	Settings

05 — Spacing Grid

All spacing is based on an 8px unit. Source: arc/docs/02_ARCHITECTURE.md section 5.3

Token	Value	Tailwind	Usage
xs	4px	p-1, gap-1	Icon padding, tight labels
sm	8px	p-2, gap-2	Inner card padding (tight), badge padding
md	16px	p-4, gap-4	Card padding, section spacing
lg	24px	p-6, gap-6	Page content padding, grid gaps
xl	32px	p-8, gap-8	Major section separators

06 — Border Radius

Source: arc/frontend/tailwind.config.ts :: borderRadius

Token	Value	Usage
card (named)	12px	All card components, modal containers
rounded (default)	8px	Buttons, inputs, nav items, smaller containers
pill	9999px	Status badges, sentiment badges, email client pills
sm	4px	Small elements, table borders

07 — Demo Mode Banner

Source: arc/frontend/src/components/AppShell.tsx :: DemoBanner

DemoBanner Component

Demo Mode — Data is simulated. External integrations are disabled.

The DemoBanner is a full-width amber bar shown at the top of every authenticated page when the application is running in demo mode (DEMO_MODE=true environment variable). It is sticky (fixed top) so it remains visible while scrolling.

background: #FEF3C7;     /* amber-100 */
color: #92400E;           /* amber-800 */
font-weight: 600;
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 50;

08 — Tailwind Config Excerpt

Source: arc/frontend/tailwind.config.ts

// arc/frontend/tailwind.config.ts (relevant excerpt)
extend: {
  colors: {
    primary: {
      50:  '#FFF5F0',
      100: '#FFE8D6',
      200: '#FFD1B2',
      300: '#F4A261',  // orange-300 accent
      400: '#E8924A',
      500: '#D4803A',
    },
    secondary: {
      50:  '#FFF0F3',
      100: '#FFD1DC',
      200: '#FFBCCC',
      300: '#F2A0B5',  // pink-300 accent
      400: '#E8899E',
      500: '#D47388',
    },
    success: '#4ADE80',
    warning: '#FBBF24',
    danger:  '#F87171',
  },
  borderRadius: {
    card: '12px',
  },
  fontFamily: {
    sans: ['Inter', 'Helvetica Neue', 'Arial', 'sans-serif'],
    mono: ['JetBrains Mono', 'Consolas', 'monospace'],
  },
}