memoire / systems

Labor Budgeting 3.1

Primitives / Gray

gray-50

#fcfcfc

gray-100

#f5f5f5

gray-200

#eaeaea

gray-300

#d3d3d3

gray-400

#b3b3b3

gray-500

#9b9b9b

gray-600

#848484

gray-700

#6d6d6d

gray-800

#494949

gray-900

#2f2f2f

gray-950

#1b1b1b

Primitives / Brand

brand-50

#071e13

brand-100

#082417

brand-200

#092d1d

brand-300

#0d3e2a

brand-400

#12573b

brand-500

#0c6c49

brand-600

#288159

brand-700

#45996c

brand-800

#7dc890

brand-900

#afecb3

brand-950

#f4fdf1

Primitives / Blue

blue-50

#f8fcff

blue-100

#ebf6ff

blue-200

#d8edff

blue-300

#addafe

blue-400

#64bafd

blue-500

#4ea0ec

blue-600

#3e86d9

blue-700

#2d6cc5

blue-800

#1c4888

blue-900

#132f5a

blue-950

#0b1b33

Primitives / Lime

lime-50

#fafdf3

lime-100

#e5fcd0

lime-200

#cdf99e

lime-300

#9be253

lime-400

#94db4d

lime-500

#70ab35

lime-600

#5f912c

lime-700

#4e7823

lime-800

#325014

lime-900

#22350e

lime-950

#161d0b

Primitives / Orange

orange-50

#fefbfa

orange-100

#fdf3ef

orange-200

#fbe7db

orange-300

#fcc9b0

orange-400

#ff9964

orange-500

#ff6400

orange-600

#e25700

orange-700

#bd4700

orange-800

#7f2f00

orange-900

#542002

orange-950

#2c1505

Primitives / Teal

teal-50

#f5fcfd

teal-100

#e7f8fa

teal-200

#d1f1f8

teal-300

#65d9ee

teal-400

#58cbe0

teal-500

#47a8b8

teal-600

#3b8f9d

teal-700

#307683

teal-800

#1e4f58

teal-900

#13343a

teal-950

#0a1d21

Primitives / Red

red-50

#fefafa

red-100

#fbf3f2

red-200

#fbe5e5

red-300

#ffc6c7

red-400

#ff9594

red-500

#fc6d6b

red-600

#e94c49

red-700

#cd2f2f

red-800

#8c1d1c

red-900

#5b1815

red-950

#32100e

Primitives / Yellow

yellow-50

#fffaf0

yellow-100

#fef3dd

yellow-200

#fbe9bb

yellow-300

#fece59

yellow-400

#e9a704

yellow-500

#d18d00

yellow-600

#b67600

yellow-700

#996100

yellow-800

#65410c

yellow-900

#412b0e

yellow-950

#24190a

Primitives / Brand - Old

brand-old-50

#0a1f15

brand-old-100

#0b2418

brand-old-200

#0e2c1e

brand-old-300

#143d2b

brand-old-400

#1d563d

brand-old-500

#276a4b

brand-old-600

#31805c

brand-old-700

#3b9a70

brand-old-800

#54cd96

brand-old-900

#8ef1bf

brand-old-950

#f2fdf6

Font Families

font-mono'JetBrains Mono', 'SF Mono', monospace

font-serif'Cormorant Garamond', Georgia, serif

font-sans-apple-system, BlinkMacSystemFont, system-ui

Font Sizes

text-xsThe quick brown fox10px

text-smThe quick brown fox11px

text-baseThe quick brown fox12px

text-mdThe quick brown fox13px

text-lgThe quick brown fox16px

text-xlThe quick brown fox18px

text-2xlThe quick brown fox24px

text-3xlThe quick brown fox28px

Font Weights

weight-light300

weight-regular400

weight-medium500

weight-semibold600

Spacing Scale

space-0

0px

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-5

20px

space-6

24px

space-8

32px

space-10

40px

space-12

48px

space-16

64px

Border Radius

radius-none0px

radius-sm2px

radius-md4px

radius-lg8px

radius-xl12px

radius-full9999px

Box Shadows

shadow-sm0 1px 2px rgba(0,0,0,0.04)

shadow-md0 2px 8px rgba(0,0,0,0.06)

shadow-lg0 4px 16px rgba(0,0,0,0.08)

shadow-xl0 8px 32px rgba(0,0,0,0.12)

Surface Tokens

surface-default#fafaf9

surface-cardrgba(255,255,255,0.65)

surface-hoverrgba(0,0,0,0.03)

surface-activergba(0,0,0,0.05)

surface-mutedrgba(0,0,0,0.02)

Interactive States

foreground#0a0a0a

foreground-muted#8a8a8a

foreground-dim#b0b0b0

border-defaultrgba(0,0,0,0.08)

border-hoverrgba(0,0,0,0.15)

focus-ring0 0 0 2px #2563eb

Feedback Colors

success

#0c6c49 (brand-500)

warning

#d18d00 (yellow-500)

error

#fc6d6b (red-500)

info

#4ea0ec (blue-500)

Feedback Backgrounds

success-bg

#f4fdf1 (brand-950)

warning-bg

#fffaf0 (yellow-50)

error-bg

#fefafa (red-50)

info-bg

#f8fcff (blue-50)

Button

6 components -- actions, triggers, and interactive controls.

Primary

Button / Primary

78 x 36

Secondary

Button / Secondary

78 x 36

Danger

Button / Danger

78 x 36

Ghost

Button / Ghost

78 x 36

Link

Button / Link

78 x 36

Disabled

Button / Disabled

78 x 36

Navigation

4 components -- wayfinding, menus, and page structure.

DashboardBudgetsReportsSettings

Navigation / Top Nav Bar

744 x 48

Navigation / Stepper

100 x 56

Home/Budgets/Labor Q3

Navigation / Breadcrumb

191 x 100

Navigation / Sidebar

48 x 136

Layout

3 components -- structural components for page composition.

Page Title

Action

Layout / Page Header

211 x 56

Labor Budgeting 3.1

HelpTerms

Layout / Footer

213 x 48

BackNext

Layout / Wizard Footer

288 x 56

Data Display

5 components -- presenting information and content.

Budget Summary

Q3 labor allocation overview.

Data Display / Card

320 x 75

Total Budget

$142,500

+12.3% from Q2

Data Display / Stat Card

320 x 191

NameStatus

Row itemActive

Data Display / Table Row

100 x 40

DepartmentBudget

Data Display / Table Header

100 x 40

ActivePendingOver

Data Display / Badge

53 x 100

Form

4 components -- form controls for collecting user data.

Department

Form / Text Input

320 x 56

Period

Select quarter

Form / Select

320 x 56

Include overtime

Form / Checkbox

128 x 100

Monthly

Quarterly

Form / Radio

99 x 100

Overlay

2 components -- modals, drawers, and floating content.

Confirm Delete×

Remove this budget entry?

CancelDelete

Overlay / Modal

640 x 201

Details

Budget breakdown

Overlay / Side Drawer

480 x 201

Feedback

2 components -- status indicators and user notifications.

No budget entries yet

Feedback / Empty State

400 x 189

Budget allocation tip

Feedback / Tooltip

88 x 100

Page Structures

Sidebar + Main

Primary layout pattern in Labor Budgeting. Sidebar navigation with main content area for budget views and data tables.

Full Width

Single-column layout used for focused tasks like budget entry wizards and onboarding flows.

Grid Dashboard

Multi-card grid for dashboard views showing stat cards, charts, and summary data side by side.

Split Panel

Two-panel layout for detail views: primary content area with a secondary info panel for properties and metadata.

Card Patterns

Card Grid

Equal-sized cards in a responsive grid used for department budget summaries and team allocation views.

List Layout

Row-based list for budget line items, employee entries, and approval queues with avatar + metadata pattern.