Quintence

[ 00 ] Design system specification

Quintence Styleguide

Light + dark instrument-panel language, keyed to the wordmark bars. Every swatch, specimen, and component below resolves to a token in globals.css @theme ~ nothing is hardcoded. Hex pairs read light / dark; ratios are quoted for the dark theme.

Color tokens

Surface stack & signals

Surfaces step from base to overlay. Accent is wordmark steel-blue #1E6CB4 / #6CB2E6; signals are dots and status only.

background

#F6F5EF / #0A0E14

Page base

card

#FFFFFF / #0E141E

Panels, cards

raised

#ECE7DD / #131B29

Hover, emphasis

overlay

#ECE7DD / #05080C

Bands, footer

primary

#1E6CB4 / #6CB2E6

Accent, CTAs

accent

#46506C / #AACEE7

Supporting glow

Contrast pairings ~ WCAG AA verified

foreground on background (dark)17.3 : 1 · AAA
muted-foreground on background (dark)6.6 : 1 · AA
primary on background (dark)8.4 : 1 · AAA
primary-foreground on primary (dark)7.6 : 1 · AAA
success on background (dark)10.3 : 1 · AAA
destructive on background (dark)7.0 : 1 · AA
LiveDegradedIncidentIdle

Typography

Fluid scale, three voices

Space Grotesk for headings, Inter for body, JetBrains Mono for labels. Display sizes clamp with the viewport ~ zero layout shift.

Display · clamp(2.5rem, 6vw, 4.5rem)

From pipeline to launch

H2 · section titles

Verified production systems

H3 · card titles

Idempotent batch & streaming pipelines

Body large · ledes

We architect fault-tolerant ETL pipelines, sub-second BI dashboards, and modern web products that deliver verifiable impact.

Mono label · signature recipe

[ 01 ] Services · SLA 99.98% · dbt run --select core

Tabular numbers · metrics never jitter

99.98% · $240,000 · <45s

Space & shape

4px base, sharp radii

Sections breathe on one rhythm (section-pad). Radii stay lean ~ pills are reserved for badges, never buttons.

4px

8px

12px

16px

24px

32px

radius-sm
radius-md · buttons
radius-lg · cards
pill · badges only

Signature language

Instrument panel motifs

Every motif is a named, reusable component. No anonymous one-off divs anywhere in the codebase.

SectionHeader

Bracket-index kicker + title + lede.

Capabilities

Core engineering services

Stat + Sparkline

Tabular metric with mono label and data texture.

3
Metrics per case study
Hard content rule · three big numbers

Section divider with crosshair ticks

Content below a hairline divider ~ ticks mark the section edges.

Components

Buttons & links

Border-and-surface elevation only. Visible accent focus ring on every interactive element ~ tab through to verify.

ButtonLink ~ navigates
Default
Signal
Telemetry
Secondary
Outline
Destructive

Components

Form primitives

Radix-backed, token-styled, keyboard accessible. Error state uses the destructive token pair.

Please provide a valid business email address.

Brand & motion

Wordmark & reveal system

Typographic lockup with bracket-tick mark. Motion is fadeUp on first inView ~ disable animation in your OS to verify the static fallback.

QuintenceQuintence
Reveal
delay 0s

Staggered entry

One shared ease curve, 0.5s band.

Reveal
delay 0.1s

Staggered entry

One shared ease curve, 0.5s band.

Reveal
delay 0.2s

Staggered entry

One shared ease curve, 0.5s band.

Home primitives

CountUp & process step

CountUp animates to its target on first inView and renders the final value instantly under reduced motion. ProcessStep carries the timeline rail tick.

0
Pipelines shipped
0
Uptime

01

Discover

We map your data landscape and define done in metrics, not adjectives.

03

Build

Short cycles with weekly demos. You watch the pipeline come alive from day one.

Content primitives

Prose, cards & lists

Phase 4 additions: hand-rolled MDX prose with mono-kicker headings, the case study card in both variants, the numbered deliverable list, and sector filter chips.

Prose ~ Challenge / Solution / Results

Challenge

A 60-person fintech closed the books in spreadsheets: exports and dumps stitched by hand. See the full work index for context.

Solution

  • Single warehouse modeled on dbt
  • Idempotent pipelines with freshness SLAs

Case study card ~ full + compact

Series-B fintechFintech2024

One warehouse, two-day close

Fourteen sources, one warehouse, one definition of revenue.

MONTHLY CLOSE
9→2 days
SOURCES UNIFIED
14
MANUAL REPORTING REMOVED
40 hrs/mo
Postgres
dbt
Dagster

Client anonymized ~ composite engagement

Read case study

B2B SaaS platform · SaaS · 2025

Embedded analytics, six weeks

Deliverable list

  1. Source audit & ingestion design
  2. Idempotent, tested pipeline builds
  3. Orchestration with alerting

Filter chips + service card

[ 01 ] Service

ETL Pipelines

Reliable data movement ~ monitored, tested, documented.

  • Source audit & ingestion design
  • Idempotent, tested pipeline builds
  • Orchestration with alerting
View service

Form states

Fields, errors & panels

Labels stay visible above every field. Invalid fields get a destructive border plus a linked error message; the honeypot is never rendered visibly.

Enter a valid email address.

Received.

Success panel (focused on show).

Couldn’t send that.

Error banner + retry (aria-live).