eis-ds

eis-ds / elements

Elements

The basic elements, built on the foundations. Native HTML, every control works, every class starts with eis-. Styles live in src/shared/css/elements.css; values come only from src/shared/css/tokens.css.

Version
0.1 · draft
Stylesheet
src/shared/css/elements.css
Load with
dist/eis-web.min.css or dist/eis-app.min.css

01Buttons

A button acts. Rectangle, small radius, uppercase mono. Use <button> for actions and <a> styled as a button only for navigation.

Open report →

.eis-button (white) + --black · --ghost · --accent · --success. Variants change colour only. Sizes: --sm · default · --lg. One --black per view; --accent only for the action that is itself the accent (record, go live).

02Chips

A chip describes a state. Pill shape and sentence case, so it can't be mistaken for a button. Default cursor and no hover.

Accepted Maybe Organizer Conflict Sent Cancelled
On track Urgent PLT-204 Billing
Small Medium Large Urgent PLT-204

.eis-chip + --outline · --solid · --accent · --success · --hatch · --dot. Sizes: --sm · default · --lg. Hatch marks what no longer counts (cancelled, blocked). Accent is the only chip with colour.

Chip vs button

Button · acts

Rectangle · 4px radius · UPPERCASE · 40px tall · hover glow

Chip · describes

AcceptedConflict

Pill · full radius · Sentence case · 24px tall · static

03Fields

Label above, in the label style. Hint and error below, in mono. Control outlines use --ink-muted so they pass the 3:1 contrast WCAG asks of components.

Start with a verb.

Enter a valid email.

04Choices

Checkbox for independent options, radio for one of many, switch for a setting that applies at once, tabs for switching a view.

Show
Sort by
Settings
Range

.eis-checkbox · .eis-radio · .eis-switch (checkbox + role="switch") inside .eis-choice labels; groups in fieldset.eis-choices. .eis-tabs is a radio group.

05Table

A real <table>. Hairlines between rows, no zebra, cells vertically centred, numbers in mono and right-aligned.

Open tasks by stream
SelectStreamStatusOpenOverdue
PriorityOn track140
BillingOverdue131
PlatformOverdue153
DataOn track70

06Panel

The one container. Second surface level, 1px line, 10px radius, no shadow. Head with a label on the left and a mono count on the right.

Summary

today
Open
84
11 streams
New today
16
6 in one stream
Overdue
06
3 in Platform

Disclosure

7

A <details> with .eis-disclosure. Opens and closes natively, keyboard included.

08Lists

Rows separated by hairlines. Avatar is initials in a circle, never a photo frame with colour.