eis-dsv0.1

ReleaseDraft · light mode

Open the manual

Design that reads like an instrument.

Format
HTML + CSS
Tokens
W3C DTCG
Build
None
Accent
One

A visual design system in plain HTML and CSS. Cool neutrals, thin lines, a mono voice for data and one orange accent for the thing that matters.

Use it for interfaces, slides, email and images. Link one stylesheet and build with native HTML. No framework, no build step.

Get started See the foundations

/01 · What it is

A small set of decisions. Made once.

Every value has a job. Colour, type, space and shape are tokens. The basic elements are native HTML styled by those tokens. You decide less and ship a consistent result.

  1. 01
    Colour

    Eight cool neutrals, two surfaces, one accent.

  2. 02
    Type

    A sans for text. A mono for labels and numbers.

  3. 03
    Space

    Four steps: 8, 16, 32, 64. Each one has a job.

  4. 04
    Shape

    Three radii and one line weight: 1px.

  5. 05
    Elements

    Buttons, chips, fields, tables, panels, disclosures.

  6. 06
    Manual

    Use and don't-use rules that people and LLMs apply literally.

/02 · Where it goes

One look. Every surface.

The same tokens drive a dashboard, a deck, a newsletter and an article image. A reader recognises the voice before they read a word.

  • Interfaces

    Dashboards and tools

    Dense data in grey cells. The accent marks only the exception.

    ↘ See an example
  • Slides

    Decks and talks

    One idea per slide. Display type, a thin rule, generous space.

  • Email

    Newsletters and notices

    Two surfaces and one column survive every mail client.

  • Images

    Covers and illustrations

    Line, grid and a single warm mark, at any ratio.

/03 · Principles

Restraint is the feature.

  • One accent

    Orange marks the one thing that matters. Never more than 5% of the area.

  • Two voices

    Sans speaks the text. Mono speaks for the instrument: labels, numbers, dates.

  • Two surfaces

    Canvas and panel. A third level is a line, not another box.

  • One line weight

    Every border and divider is 1px. No shadows at rest.

  • Native first

    Real tables, real checkboxes, real buttons. Accessible by default.

  • No build

    One stylesheet per scope and custom properties. It works from a file on disk.

/04 · Specimen

The parts, running live.

Everything below comes from the same file you will link.

  • surface-canvas
  • surface-panel
  • line
  • ink-muted
  • ink
  • accent
Type

Geist · Geist Mono — 11 to 56 px

Elements On track Overdue PLT-204
Range
/05 · Get started

From files to a page in five steps.

No package and no build. Copy one file from dist/ into your project. web is for websites and docs. app is for dashboards and tools.

  1. Copy

    One file from dist/. To change the source, copy src/shared/ plus src/web/ or src/app/.

  2. Link

    One file: dist/eis-web.min.css or dist/eis-app.min.css. It brings the fonts, the shared tokens and elements, and the scope.

  3. Mark up

    Use semantic HTML: header, main, section, real tables and controls.

  4. Build

    Native HTML with shared eis- classes and your scope's classes. Your own CSS is layout only.

  5. Check

    Run the checklist in the manual.

Website or docs · shared + web
<!-- one file: fonts, shared and web -->
<link rel="stylesheet" href="eis-ds/eis-web.min.css">
<!-- optional: line art -->
<script src="eis-ds/web/js/lines.js" defer></script>

<section class="eis-web-hero">
  <div class="eis-web-wrap eis-web-grid">
    <h1>Ship calmer.</h1>
    <a class="eis-button eis-button--black" href="#start">Get started</a>
  </div>
  <svg class="eis-web-lines" data-eis-web-lines viewBox="0 0 1440 360"
       preserveAspectRatio="none" aria-hidden="true"></svg>
</section>
Dashboard or tool · shared + app
<!-- one file: fonts, shared and app -->
<link rel="stylesheet" href="eis-ds/eis-app.min.css">

<body class="eis-app-shell">
  <aside class="eis-app-sidebar" aria-label="Sidebar">
    <nav class="eis-app-nav" aria-label="Main">…</nav>
  </aside>
  <main class="eis-app-main">
    <section class="eis-panel">
      <button class="eis-button eis-button--black">Save</button>
      <span class="eis-chip eis-chip--accent">Overdue</span>
    </section>
  </main>
</body>

In these samples, eis-ds/ is where you copied the files: the contents of src/.

Start with the foundations.

Elements Foundations