Design system

Style Guide

The primitives and components used across the Sabine River Partners site. Edit assets/css/tokens.css to re-skin the entire site, then verify changes here before pushing.

Colors

Brand blue is sampled from the SRP logo. Aliases (--color-text, --color-link) reference the scale — components consume aliases, not raw values.

Brand

Brand 050--color-brand-050
Brand 100--color-brand-100
Brand 500--color-brand-500
Brand 600--color-brand-600
Brand 700--color-brand-700

Ink & surface

Ink 900--color-ink-900
Ink 700--color-ink-700
Ink 500--color-ink-500
Ink 300--color-ink-300
Surface alt--color-bg-alt
Surface dark--color-bg-dark

Functional

Accent warm--color-accent-warm
Success--color-success
Danger--color-danger

Typography

System sans by default. Swap --font-sans in tokens.css to introduce a webfont. Body uses text-wrap: pretty, headings use text-wrap: balance.

h1 / clamp(36px, 5.2vw, 60px)
weight 800

Quality Doesn’t Mind Itself.

h2 / clamp(28px, 3.6vw, 48px)
weight 700

SaaS tools for the analytical & fuel industry.

h3 / clamp(22px, 2.4vw, 30px)

Purpose-built tools, integrated.

h4 / 24px

Total data ownership

.lead / 20px

From batch testing to compliance reporting to attestation, we build SaaS tools for the unique needs of the Oil & Gas industry.

body / 16px

Maintaining the highest standards of quality control is crucial for the energy industry. SRP’s ILCP application is a powerful tool designed to optimize your inter-laboratory cross-check programs.

.eyebrow / 12px mono
Integrated suite
.muted / 16px

Secondary, less-emphasized text.

Spacing

4px base scale. Section vertical padding uses --section-y: clamp(64px, 9vw, 120px).

--space-1 / 4px
--space-2 / 8px
--space-3 / 12px
--space-4 / 16px
--space-6 / 24px
--space-8 / 32px
--space-12 / 48px
--space-16 / 64px
--space-24 / 96px

Radius

--radius-sm · 4
--radius-md · 8
--radius-lg · 12
--radius-xl · 20
--radius-pill

Shadows

--shadow-sm
--shadow-md
--shadow-lg

Buttons

Pill-shape, semibold. Sizes: default and .btn--lg.

Primary Secondary Ghost
Primary large Secondary large
On dark

Tags

Module Coming late 2026

Cards

Total data ownership

Customer data is never used for any purpose without explicit written permission.

Audit traceability

Detailed records and computations support reliable audit trails for compliance.

Operational efficiency

Automate quality control workflows so your team can focus on what matters.

Feature row

Used for the alternating product modules on the homepage. Add .feature-row--reverse to flip the image side.

Internal & External ILCP

SRP’s ILCP application is a powerful tool designed to optimize your inter-laboratory cross-check programs.

Explore ILCP

Pillars

Total data ownership

Customer data is never used without explicit written permission.

Audit traceability

Detailed records support reliable audit trails for compliance.

Operational efficiency

Automate workflows so your team can focus on what matters.

How to edit this design system

  1. Re-skin the site: open assets/css/tokens.css and change values. Every page picks up changes automatically.
  2. Add a component: add the styles in assets/css/base.css (place it under a clearly-labelled comment block), then drop a demo here.
  3. Add a page: copy any module page (e.g. insightsqc.html) as a starting point. The header and footer markup live in each file — this is intentional for a zero-build static site, but it means edits to nav need to happen in every page.
  4. Replace fonts: add a @font-face or Google Fonts link, then change --font-sans / --font-display in tokens.css.
  5. Verify changes: open this style guide first, then sample 2–3 pages.