pris.la / design system / /design-system.css

Two modes, one accent.

Everything on pris.la is built from these tokens. Midnight is the default; Daylight is its light mode, and a page opts into it. Every value and contrast ratio on this page is read from the live stylesheet, so it is always current.

How to use it
Colour

Semantic tokens

Components use these names, never hex values. Ratios are WCAG 2.1 contrast against --bg, then --surface-card, for the mode shown.

Data viz

Chart palette

For charts with more than one series. Assign in this order and label every series. Daylight darkens each hue so marks keep 3:1.

Type

Three faces, fluid scale

Newsreader for headlines, Hanken Grotesk for reading, Space Mono for anything that labels or counts.

Hero--text-hero · Newsreader 400
Built a lot. Still obsessed.
H2--text-h2 · Newsreader 400
Things I've built.
Card title--text-card-title-lg · 500
ESG Report Comparison Tool
Lede--text-lede · Hanken · --soft
Live tools built as experiments — free to use, made to explore what AI can actually do when applied to a real problem.
Body small--text-body-sm · Hanken
Compare sustainability reports across companies side by side — metrics, emissions, governance.
Metric--text-metric · Space Mono 700
25%
Eyebrow--text-label · 0.16em
Selected work
Button--text-button · 0.04em
Talk to my agent →
Space and shape

Spacing and radii

Fluid spacing for page rhythm, fixed gaps inside it. Corners stay tight; borders do the separating, not shadows.

Radii

Components

The shared library

These are the real classes from design-system.css. Tab through them to see the focus ring.

Buttons

Get in touch → See the work Talk to agent Or just say hi

Tool cards

◈

ESG Report Comparison Tool

Compare sustainability reports across companies side by side — metrics, emissions, governance.

Try it → ◉

Type Me

Find out your MBTI type — but rated by the people who actually know you.

Try it →

Project cards

⚡01

GenAI adoption at SP Group

The AI is the easy part. Trust, workflow and change management are the work.

20% improvement in workforce efficiency.
◎02

National grid operations on SaaS

IoT and anomaly detection at the core. High stakes, real operators.

25% reduction in operational costs.
▦03

14 MVPs in 12 months

An agile and product practice set up from scratch.

75% reduction in time-to-market.

Stats

2
modes: Midnight and Daylight
3
type families
1
accent colour

Chat

Hi, I'm Priscilla's agent. Ask me about her work.
What did she build for ESG reporting?
typing…

Input

Accessibility

The floor, in both modes

Contrast

  • Text tokens meet 4.5:1 on --bg and --surface-card.
  • --line-strong, --focus-ring, --ok and chart hues meet 3:1.
  • --line is decorative. It is never the only edge of a control.

Accent

  • Text on an accent fill is always --on-accent: navy on pink in Midnight, white on rose in Daylight.
  • Never white on pink. Never pink text on Daylight; the rose accent replaces it.

Focus and motion

  • Every interactive element shows a 2px solid --focus-ring on keyboard focus.
  • Reduced-motion users get no hover lifts or slides.

Colour is never alone

  • The online dot sits next to a word.
  • Chart series are labelled directly, not told apart by hue.
Logo

Wordmark

Pick the file by mode. Never recolour it pink or set it on an accent fill.

pris.la wordmark, Midnight/logo.svg · Midnight
pris.la wordmark, Daylight/logo-daylight.svg · Daylight
Use it

On any page

Link the stylesheet, then build only from tokens and classes. Midnight needs nothing. A page that should be Daylight sets it on <html>; the site never follows the OS setting.

<link rel="stylesheet" href="https://pris.la/design-system.css">

<!-- Daylight, opt-in, whole page -->
<html data-theme="daylight">

<!-- or one container -->
<div class="theme-daylight">…</div>

.my-thing {
  background: var(--surface-card);
  color: var(--ink);
  border: 1px solid var(--line);
  font-family: var(--font-body);
}

Free to use, with credit

The design system is MIT licensed: use it, change it, ship it, commercially or not. Keep the copyright notice at the top of the CSS files you copy. The pris.la name and wordmark are not included, and the fonts keep their own Open Font License. Read the licence