FOIALABDESIGN SYSTEM & IMPLEMENTATION DIRECTORY
Back to FOIALab

FOIALAB LIVING STYLE GUIDE

One visual language.
Every page.

This is the toolbox for building FOIALab consistently. Every example below uses the same production classes, theme variables, and reusable controls loaded by the live site.

01 / FOUNDATIONS

Color and system tokens

Use variables instead of hard-coded accent colors. The selected color theme updates every accent token automatically.

--bgPage background
--bg-softSecondary background
--panelTranslucent surface
--panel-solidSolid surface
--textPrimary text
--mutedSecondary text
--lineBorders and rules
--accentSelected accent
--accent-brightBright accent
--accent-deepDeep accent
--glowAccent glow
--scrollbar-size17px scrollbar

Available accent presets

Purple#a431ff
Violet#7c3aed
Magenta#db2777
Red#dc2626
Orange#ea580c
Amber#d97706
Green#16a34a
Teal#0d9488
Cyan#0891b2
Blue#1b9dff
Indigo#4f46e5
Silver#71717a
:root {
  color: var(--text);
  background: var(--bg);
}

.feature-highlight {
  border-color: var(--accent);
  color: var(--accent-bright);
  box-shadow: 0 0 24px var(--glow);
}

02 / BRAND & THEME

Theme-aware branding

The logo mark, favicon, browser theme color, picker, and interface accents all use the same selected color.

FOIALABTRUTH THROUGH RECORDS. POWER THROUGH EVIDENCE.
Theme control

Choose any of the 12 presets to test this page live.

<AccentPicker />
import AccentPicker from "@/app/accent-picker";
import { FoiaLabMark, FoiaLabWordmark } from "@/app/foialab-brand";

<FoiaLabMark title="FOIALab" />
<FoiaLabWordmark />
<AccentPicker />

03 / TYPOGRAPHY

Montserrat type system

Montserrat is loaded once in the root layout. Keep headings tight and confident; keep body copy readable and restrained.

Display

Truth through records.

38px / 650 / −0.04em
Page title

Research Paths

24px / 650 / −0.04em
Section eyebrow

SOURCE-GROUNDED RESEARCH

.ui-eyebrow
Body copy

Use plain, direct language with comfortable line spacing for long research workflows and evidence review.

.ui-copy

04 / BUTTONS

Action hierarchy

Use one primary action per region. Ghost and secondary actions support it; danger is reserved for destructive or irreversible work.

<button className="button button-primary">Save changes</button>
<button className="button button-secondary">Preview</button>
<button className="button button-ghost">Cancel</button>
<button className="button button-danger">Delete</button>
<button className="button button-ghost workspace-toolbar-button">
  Public site
</button>

05 / FORM CONTROLS

Every input, one control system

Dashboard forms inherit consistent labels, focus rings, validation, disabled states, fully custom dropdown menus, and a themed date-time picker.

Included sources
2 selected
Choice controls
import {
  SelectControl,
  DateTimeControl,
  CheckboxDropdown,
} from "@/app/dashboard/form-controls";

<label className="field">
  <span className="field-label">Source type</span>
  <SelectControl value={source} onChange={handleSource}>
    <option value="foia">FOIA response</option>
    <option value="contract">Contract</option>
  </SelectControl>
  <span className="field-help">Helpful context goes here.</span>
</label>

<label className="field">
  <span className="field-label">Review date and time</span>
  <DateTimeControl value={reviewAt} onChange={handleReviewAt} />
</label>

06 / SCROLLBARS

Theme-owned scrolling

Page scrollbars and nested scrolling regions use the selected accent automatically. The shared width is 17 pixels across current major browsers.

01
Source record 1

Scrollable panels inherit the active FOIALab theme.

02
Source record 2

Scrollable panels inherit the active FOIALab theme.

03
Source record 3

Scrollable panels inherit the active FOIALab theme.

04
Source record 4

Scrollable panels inherit the active FOIALab theme.

05
Source record 5

Scrollable panels inherit the active FOIALab theme.

06
Source record 6

Scrollable panels inherit the active FOIALab theme.

07
Source record 7

Scrollable panels inherit the active FOIALab theme.

08
Source record 8

Scrollable panels inherit the active FOIALab theme.

09
Source record 9

Scrollable panels inherit the active FOIALab theme.

10
Source record 10

Scrollable panels inherit the active FOIALab theme.

11
Source record 11

Scrollable panels inherit the active FOIALab theme.

12
Source record 12

Scrollable panels inherit the active FOIALab theme.

/* The page scrollbar is automatic. For nested regions: */
<div className="scrollbar-themed">
  ...
</div>

/* Alias retained for existing components: */
<pre className="custom-scrollbar">...</pre>

/* Shared tokens */
--scrollbar-size: 17px;
--scrollbar-track: ...;
--scrollbar-thumb: ...;

07 / BOXES & PANELS

Surface hierarchy

Use raised panels for high-priority work, standard panels for grouped content, and inset panels for secondary detail.

Raised

Primary workspace panel

Use for the most important action or review area.

.ui-panel-raised
Standard

Grouped content

Use for lists, forms, summaries, and supporting tools.

.ui-panel
Inset

Secondary detail

Use inside another panel for metadata and context.

.ui-panel-inset
148K+Records requested.ui-stat

08 / STATUS & FEEDBACK

Badges and notices

Never rely on color alone. Every status pairs color with readable text and a stable semantic class.

NeutralIn reviewCompleteAction neededFailed
InformationThis workflow preserves the original source.
SuccessThe source was processed and linked.
ReviewA human decision is required before sending.
ErrorThe action could not be completed.
<span className="ui-badge ui-badge-success">Complete</span>
<div className="ui-notice ui-notice-warning">
  A human review is required.
</div>

09 / NAVIGATION

Tabs and compact selection

Use tabs for neighboring views of the same record. The active state uses both text contrast and a visible surface.

overview

The selected view changes without introducing a second navigation system.

10 / IMPLEMENTATION

How new pages use the system

The global styles are already linked once at the application root. New pages inherit them automatically—do not create another theme, button, form, or shell stylesheet.

1

Load once

app/layout.tsx imports app/globals.css. Do not add another stylesheet link to individual pages.

2

Use production classes

Combine base and variant classes, such as button button-primary or ui-panel-raised.

3

Use shared React controls

Import custom dropdowns, date/time controls, the theme picker, branding, sidebar, and page header from their shared components.

4

Keep page CSS structural

Page modules may define grids, maps, viewers, and specialized data layouts. They must not redefine shared color, type, buttons, controls, navigation, or branding.

// app/layout.tsx — already configured once for every route
import "./globals.css";

// Any page or component
<section className="ui-panel-raised">
  <p className="ui-eyebrow">NEW WORKFLOW</p>
  <h2 className="ui-title">Consistent by default</h2>
  <p className="ui-copy">Page-specific CSS handles layout only.</p>
  <button className="button button-primary">Continue</button>
</section>
GuardrailBefore adding a new visual class, check this directory and extend the shared system only when the pattern will be reused.