Colors ​

Bootstrap Sqrl custom

Sqrl palette: warm paper, one brand green, stone neutrals, and named status/accent hues. Swatches below; when to use which → Rules.

Green ​

Brand scale. green-600 is Bootstrap primary; green-700 maps to success / default links.

Pressed
green-900
#1F3F28

Pressed success button (`btn-success` active).

Active
green-800
#2C5A38

Link hover, primary/success pressed, active accordion and list text.

Success
green-700
#356C44

Links, success text, solid success badges.

Primary
green-600
#418252

Primary buttons, checks, progress.

Border subtle
green-300
#A9CBB2

Borders on tinted primary/success badges and alerts.

Subtle
green-100
#DCEADF

Tinted success badge fill and alert backgrounds.

Selected
green-50
#EDF4EE

Selected rows, accordion open, dropdown hover/active, tinted primary badges.

Stone ​

Warm neutrals — all text and borders tint from stone-900. stone-100 is Bootstrap secondary (subtle fills), not terracotta.

Body & headings
stone-900
#3B342F

Body, headings, scope bar, active pagination and pill nav.

Nav emphasis
stone-800
#4E463F

Sidebar nav links, breadcrumb hover, `btn-dark` hover.

Muted & neutral
stone-700
#6B625B

Secondary copy, neutral badges, helper text.

Subtle text
stone-600
#8A807A

Tertiary text and micro-caps (`text-body-tertiary`).

Placeholder
stone-500
#A79D95

Placeholders, disabled controls, chevrons, close icon.

Focus ring
stone-400
#C6BCB2

Focused inputs and secondary button hover border.

Control border
stone-300
#DED5CB

Default input and select borders.

Default border
stone-200
#E9E2DA

Dividers, preview outlines, bordered cards.

Secondary surface
stone-100
#F1EBE5

Secondary fills, disabled inputs, neutral subtle backgrounds.

Light badge fill
stone-50
#F6F2EE

Light badges and chips; same as **`surface-paper`** (`bg-surface-paper`).

Inverse text
stone-white
#FDFBF8

Text and icons on dark fills — not a card background.

Status ​

Semantic fills for badges, alerts, and banners (text-bg-*). Each tone has matching -subtle / border tokens in the theme. text-bg-neutral / alert-neutral are Sqrl custom — Bootstrap has no neutral color.

Success
green-700
#356C44

Solid success badges and status — pair with a label.

Warning
ochre-600
#B07B1E

Caution, due-soon, and attention states.

Danger
crimson-600
#B23A34

Errors and destructive actions.

Info
azure-600
#2F6BA8

Informational badges and labels.

Neutral status
stone-700
#6B625B

Open or draft tags when no status tone fits.

Accents ​

Sqrl custom

Named hues for charts and highlights — not status. Utilities: text-accent-*, bg-accent-*, text-bg-accent-*, border-accent-*. Azure is info, not an accent.

Teal accent
teal-600
#2E7D77

Charts and accent badges only.

Terracotta accent
terracotta-600
#C0623C

Charts and accent badges — not secondary actions.

Slate accent
slate-600
#5C6B72

Charts and accent badges only.

Taupe accent
taupe-600
#8A7256

Charts and accent badges only.

Violet accent
violet-600
#6B5B95

Charts and accent badges only.

Surfaces ​

Layout backgrounds and elevation. Use bg-surface-* utilities (bg-surface-app, bg-surface-page, bg-surface-card, …) or var(--sq-surface-*). Inputs use surface-card (same family as cards). Cards use shadow, not border, unless the surface matches — then card-bordered.

App background
surface-app
#E8E0D7

Full app shell; sidebar shares this. Work panel floats lighter on top.

Page canvas
surface-page
#F4F0EA

Raised work panel (`bg-surface-page` / `bg-body`), not the outer shell.

Card & modal
surface-card
#FCFAF7

Cards, modals, menus, and form field background.

Code background
surface-code
#F8F5F1

Docs and in-app code block background.

Sunken well
surface-sunken
#F1EBE5

Inset wells, placeholders, doc preview backdrops.

Soft paper fill
surface-paper
#F6F2EE

Warm neutral bands and chrome; token **`stone-50`**.

Selected highlight
surface-selected
#EDF4EE

Table, list, and accordion selection (green-50).

Rules ​

Palette ​

  • Warm, low-chroma paper UI with one saturated brand green. Stone is the secondary action colour — not terracotta.
  • Colour never carries meaning alone — pair with a dot, icon, or word (Iconography, badges, alerts).

Bootstrap mapping ​

  • Primary → green-600 (btn-primary, bg-primary, focus rings, selection).
  • Success / link hover → green-700 (text-success, text-bg-success, links).
  • Secondary → stone-100 (bg-secondary, subtle chips) — not terracotta.
  • Dark / strong UI → stone-900 (bg-dark, body text, scope bar, active pagination/pills).
  • Neutral → stone-700 — Sqrl custom utilities: text-neutral, bg-neutral, text-bg-neutral, bg-neutral-subtle (Bootstrap has no neutral).
  • Info → azure-600 (text-bg-info) — not an accent.
  • Warning / danger → ochre-600 / crimson-600.
  • Accents → teal, terracotta, slate, taupe, violet — highlights and charts only; never primary actions or btn-secondary.

Surfaces & text ​

  • Surface utilities — bg-surface-app, bg-surface-page, bg-surface-card, bg-surface-raised, bg-surface-code, bg-surface-sunken, bg-surface-paper, bg-surface-hover, bg-surface-active, bg-surface-selected, bg-surface-overlay (also --sq-surface-* on :root). surface-paper = stone-50.
  • App background (surface-app) wraps the UI; work panel (surface-page) sits raised inside it — see Layout.
  • Cards on surface-card with shadow; card-bordered when adjacent surfaces match.
  • Inputs use surface-card ($input-bg). stone-white is inverse text on dark UI only.
  • Body stone-900, muted stone-700, tertiary stone-600 (text-body-tertiary).