Theme Preview

FlecBase Blue Theme

Same components, accent palette swapped from teal to the APP-derived blue (seed #1565C0). Mirrors the layout from app.flecbase.com/styleguide so direct visual comparison is one tab-switch away.

How this page is built Loads /css/flecbase.css first, then /css/flecbase-blue.css on top. The override file only redefines tokens — no component styles are duplicated. If the palette is approved, the swap is a single CSS file rename in production; if not, deleting flecbase-blue.css reverts everything.

Design tokens

Anything that was teal is now blue, derived from the APP's ColorScheme.fromSeed(#1565C0) (Material Blue 800). The surface / text / border / spacing / radius / shadow scales are unchanged from the base style guide.

Brand & surface (unchanged)

#fafaf9

surface

#ffffff

surface-alt

#f5f0eb

text

#1c1917

text-muted

#78716c

text-subtle

#a8a29e

border

#e7e5e4

border-strong

#d6d3d1

Accent (NEW — derived from APP seed)

accent

#1565C0

seed — Material Blue 800. Used everywhere the teal #0d9488 was.

accent-dark

#0D47A1

pressed / focus state. Was #0f766e.

accent-light

#BBDEFB

soft tint for chips + outline-button hover. Was #ccfbf1.

accent-subtle

#E3F2FD

palest wash for input focus rings + alert backgrounds. Was #f0fdfa.

Approximation note. Flutter's ColorScheme.fromSeed uses Material 3's HCT (Hue / Chroma / Tone) algorithm to derive a full palette at runtime — the exact rendered colorScheme.primary sits within a few percent of the seed but isn't literally #1565C0. For web tokens we've used the Material Blue palette's natural cousins (50 / 100 / 800 / 900) which approximate what HCT emits. If pixel-exact match becomes important, we can extract the runtime palette via ColorScheme.fromSeed(...).primary etc. and bake those into CSS.

Semantic

success

#16a34a

unchanged

success-bg

#dcfce7

unchanged

warning

#d97706

unchanged

warning-bg

#fef3c7

unchanged

danger

#dc2626

unchanged

danger-bg

#fee2e2

unchanged

info

#4F46E5

NEW — shifted to Indigo so it doesn't collide with the new blue accent.

info-bg

#EEF2FF

NEW — Indigo 50.

Suggestion — info colour. The original info token was #2563eb (Tailwind Blue 600). With accent now sitting at Blue 800, the two blues read as "the same colour, different roles" and confuse the visual hierarchy. Indigo (#4F46E5) keeps info cool-tone but visibly distinct. If you'd rather keep info in the blue family, #1E88E5 (Blue 600) reads as "lighter accent" — works for non-critical contexts but blurs the boundary.

Typography

Font stack: Outfit sans, Source Serif 4 serif (already loaded but underused), JetBrains Mono code. Showing here so link colour (--accent) reads against the new palette.

Heading 1 — 40px / 700 Outfit

Heading 2 — 28px / 700 Outfit

Heading 3 — 20px / 700 Outfit

Heading 4 — 17px / 700 Outfit

Body paragraph — 16px regular Outfit. Inline link uses the new accent. Bold text, italic text, inline code tinted to --accent-dark, and highlighted text.

"Same components, different paint. The left-border quote uses --accent too." — Verification text

Type voice — leaning into Source Serif 4

Adjacent SaaS in this space typically uses Inter with the Tailwind system stack and no serif. Outfit is in the same humanist-sans neighbourhood, so colour alone doesn't pull us far enough apart. The unused Source Serif 4 in our stack is the easy lever: keep Outfit for the workhorse UI, deploy Source Serif italic in the moments where brand voice matters — hero accents, eyebrows, callouts, big numbers.

Outfit alone — competitor-adjacent

FlecBase for contractors

Reads as another humanist-sans SaaS. Inter and Outfit are siblings; at a glance, no signature.

Outfit + Source Serif italic

FlecBase for contractors

Same brand colour, sharply distinct voice. The serif italic carries the noun the brand cares about (contractors / labour hire / compliance) — Inter-default sites can't do this without loading a second font.

Display heading — serif italic accent

The same pattern as our hero, applied to any display headline. <em> inside an h1.display is the natural seam.

From the field, into the office

Capture a prestart. Done in 90 seconds.

Italic callout — the customer quote moment

Replaces a bare <blockquote> when you want the voice of a real person to sit centred on a marketing page.

"We used to spend Sundays rebuilding paper checklists into spreadsheets. FlecBase quietly killed that ritual." — Operations lead, Brisbane-based labour hire

Numerical accent — the stat strip

Serif italic numerals make a stat read like a magazine headline, not a dashboard tile.

12 mins Average time from prestart submit to admin review on a typical Monday morning.

3 taps From open-app to logged-incident with photo + GPS. Tested on a glove-on hand at a -2°C cool store.

Eyebrow over a heading

Section openers. Serif italic above an Outfit heading is the move — sets up "this is a chapter" without a divider.

Chapter 03

Building the contractor compliance loop

Body continues in Outfit. The serif eyebrow does the brand work.

Rules of thumb.

Outfit does ALL functional UI — buttons, body, table headers, form labels. Don't let serif into utility text.
Serif italic gets reserved for brand moments — hero accents, eyebrows, customer voice, stat callouts. One per fold, max.
Pair Source Serif italic with --accent colour. The combination is the signature; either alone reads as just a font / just a colour.
Never bold the serif. The italic does the emphasis.

Components

Buttons

Hover Primary to confirm the box-shadow halo is blue, not green. The original CSS had teal RGB hardcoded in the shadow; flecbase-blue.css patches it.

Pills / badges

Neutral Primary Success Warning Danger Info

Alerts

Heads upInfo alert. Background uses --info-bg (Indigo 50), text uses --info (Indigo 600).

SavedSuccess alert. Unchanged.

CarefulWarning alert. Unchanged.

Something brokeDanger alert. Unchanged.

Cards

Simple card

Hover for the accent border — now blue.

Card with header

Header background tint pulls from --surface-alt, no change.

Form elements

Focus an input to see the new accent ring (was teal halo, now blue).

Name

Industry

Notes

Workflow chain

Accent step in the middle visualises emphasis.

CRM: Create record Auto sync APP: Pull to refresh Field worker sees

Notes & suggestions

Differences from the API styleguide

Accent family — direct swap teal → Material Blue. Same 4 tokens, same roles. No structural change.
Info family — shifted to Indigo to keep its semantic distinct from accent now that accent is blue.
Brand surface / text / border — unchanged. The warm-stone neutral set was already accent-neutral and reads well against blue.
Semantic green / amber / red — unchanged. They're tuned for accessibility and conventional.
One hardcoded RGB in .btn-primary:hover — patched in the override file. No other hardcoded teal in the base CSS.

Approximations to flag

The four accent tokens are Material Blue 50 / 100 / 800 / 900 picks. They're close to but not literally what ColorScheme.fromSeed(#1565C0) produces at runtime via Material 3's HCT algorithm. For visual parity at this level the picks are fine; if pixel-exact APP/CRM match becomes important, we can extract the runtime palette and bake the exact values.
--info swap to Indigo is a judgement call — if there's already established info-blue branding in marketing collateral, we'd want to revisit.

Open suggestions for the rollout

Logo / favicon — currently teal-coded? Worth checking public/img/ for any baked-in colour assets that need re-rendering.
FB-CRM (Filament panel) reads its primary from the panel provider — when we move to the CRM swap, the change is one line per panel provider (->primaryColor() on AdminPanelProvider / CrmPanelProvider / MePanelProvider). The styleguide Blade can read the same source of truth.
www marketing site — if the blue passes review, rename flecbase.css's accent block to use the new values (no override file needed in prod). One commit, no JS, no build step.