Web and CSS | Flint Design System by Inner Spark Media

Import the variables

JavaScript or your CSS entry

import '@innerspark/flint/tokens.css';

Use them

Reach for semantic and component variables. Never a primitive like --color-blue-700, and never a raw hex.

CSS

.card {
  background: var(--color-surface-default);
  color: var(--color-text-default);
  padding: var(--inset-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
}

.card h2 {
  color: var(--color-text-heading);
  font-size: var(--type-heading-h3-size);
  font-weight: var(--type-heading-h3-weight);
}

.save {
  min-height: var(--button-height);
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  border-radius: var(--button-radius);
}
.save:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

Dark mode

Set data-theme on the page or on any section. Every color variable switches, component variables included, and a light section can sit inside a dark page.

HTML

<!-- the whole page -->
<html data-theme="dark">

<!-- or one section -->
<section data-theme="dark">...</section>
<section data-theme="light">...</section>

For automatic dark mode with no toggle, import the media version instead. It follows prefers-color-scheme.

JavaScript

import '@innerspark/flint/tokens.media.css';

Density

Compact tightens --inset-* and --gap-* by one step. Control heights and the 24px minimum target never change.

HTML

<main data-density="compact">...</main>

Fonts

Flint uses Open Sans. Load it yourself (Flint uses @fontsource/open-sans), and add the metric-matched fallback so the page doesn't shift while it loads.

JavaScript

import '@innerspark/flint/fonts.css';

Add the fallback to your stack

After importing fonts.css, add 'Open Sans Fallback' to your font stack after Open Sans.