KAS — kick ass styles

01 / Foundations

Typography that carries the page

Headings, paragraphs, inline semantics, links, and the small details that make reading feel intentional.

Every level has a job

One step deeper

Supporting detail

Quiet metadata

Body copy should be comfortable at a glance. This is a text link, a strong emphasis, an emphasis, a bold alternative, and a voice or mood shift. Here is highlighted context, ~~an old decision~~, a better replacement, small supporting text, and an inline const kas = true;.

Technical writing gets Ctrl + K, npm run build, n², H₂O, an API, a short inline quote, and a real date.

Good defaults disappear. Great defaults make the next decision obvious.

— The KAS field notes

Lists with a little order

A calm starting point
A second thought
- A little more detail
- One more useful note
A final thought

Start with semantic structure
Let the stylesheet handle the surface
Add a class only when behavior truly needs one

Classless: Styled by element, attribute, state, and accessible meaning.
Token: A custom property that lets a whole interface shift in one place.

See the theme layer

A theme is a small set of named roles. Change a role and every matching surface follows. Open Theme in the corner to try a full light or dark palette, then copy the result when it feels right.

:root {
  color-scheme: light;
  accent-color: var(--kas-action);
  --kas-heading-foreground: #111522;
  --kas-contrast-background: #111522;
  --kas-contrast-foreground: #ffffff;
  --kas-foreground: #262b39;
  --kas-muted-foreground: #697184;
  --kas-page-background: #f7f5ef;
  --kas-surface: #ffffff;
  --kas-surface-raised: #eeece5;
  --kas-border: #d8d6cf;
  --kas-action: #e86f61;
  --kas-action-strong: #ad433d;
  --kas-support: #267d72;
  --kas-highlight: #f2c657;
  --kas-visited-link: #5869bd;
  --kas-action-subtle: #fae2dc;
  --kas-support-subtle: #d9eee8;
  --kas-highlight-subtle: #fff1c7;
  --kas-focus-ring: #4c62c5;
  --kas-radius: 14px;
  --kas-radius-small: 9px;
  --kas-layout-max-width: 76rem;
  --kas-readable-measure: 68ch;
  --kas-elevation-raised: 0 12px 30px rgb(17 21 34 / .08);
  --kas-elevation-subtle: 0 4px 12px rgb(17 21 34 / .08);
  --kas-font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --kas-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --kas-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --kas-motion-duration: 160ms;
}

A few more things HTML can do

Classless styling still respects the details: machine-readable data, ~~an old decision~~, an annotation, مرحبا, directional text, 漢かん, and long words with a safebreakpoint.

The document also includes structural elements such as head, meta, link, script, template, and slot. They matter to the document even when they do not need a visible treatment.

02 / Content

Content with a point of view

Code, data, imagery, and supporting content should share the same visual language.

Code that is easy to scan

<!-- classless by design -->
<link rel="stylesheet" href="kas.css">

<article>
  <h1>Ship the good stuff</h1>
  <p>Semantic markup does the work.</p>
</article>

Tables that stay readable

What KAS covers
Surface	States	Coverage
Typography	Inline, headings, quotes	Complete
Forms	Input types, validation, focus	Complete
Media	Images, figures, video, audio	Ready
Interactive	Details, dialog, popover	Ready
KAS status	One page, all in the open.

The SVG lives inside a figure, with a caption that stays in the reading flow.

Article

A story that stands on its own

An article can stand alone in a feed, a search result, or a documentation page. Its own header and footer remain readable without any component classes.

Media, without the machinery

Abstract coral, yellow, and teal landscape with the words keep it simple

The picture element swaps sources responsively, while the image stays ordinary, useful HTML.

03 / Forms

Every control, ready for real work

Labels, groups, native affordances, validation, and the input types people forget are all part of the system.

Project details

Name

URL

Telephone

Password

Number

Date

Date and time

Month

Week

Time

Color

File

Suggestions Start typing to see matching suggestions. JavaScript adds the keyboard-friendly list; the native datalist remains the fallback.

SelectKAS styles the closed select and, where the browser allows it, the open picker too. Elsewhere, the native accessible menu stays in charge.

Choose several

Textarea

Preferences

Send useful updates Include release notes Partially selected

Enable automatic contrast

Primary surface Paper Ink Accent

Range 72

04 / States & interactions

Small interfaces, fully considered

Native interactive elements are useful on their own. KAS gives them a visual home without taking away their behavior.

Progress and status

Project progress68%

Indeterminate progressWorking...

Healthy capacity84%

Watch capacity56%

Critical capacity18%

Open disclosure

Details and summary work without JavaScript, keyboard traps, or a custom accordion component.

Closed disclosure

This content is still available, just not competing with the primary story.

Popover surface

Anchored browser behavior with KAS styling.

Definitions and contact details

KAS Studio
hello@kas.cx
kas.cx

42 elements in view. ~~Nothing hidden.~~

05 / Use it

Start with one line

KAS is intentionally small: link the stylesheet, write semantic HTML, and tune the tokens when your product needs its own voice.

<link rel="stylesheet" href="https://kas.cx/kas.css">

Read kas.css Back to specimen

Semantic HTML,
seriously styled.