A small, composable CSS toolkit. Sharper defaults for modern viewports, finer-grained colour steps, a small CSS Grid layer, and a handful of utilities for prototyping. No build step, no dependencies, one core stylesheet; add app.css when an application needs semantic theme tokens.

Docs: screenisland.com/tachyons-neo · Upstream: tachyons.io v4.13.0 · License: MIT

Drop the core stylesheet in and go. There is no build step.

<link rel="stylesheet" href="tachyons.css">

Responsive -ns, -m, and -l utilities query the page width by default. The reset keeps body at min-height: 100dvh for a full-height page canvas. Put .root on any component that should respond to its own width instead.

For application UI, load the optional semantic layer after the core utilities:

<link rel="stylesheet" href="tachyons.css">
<link rel="stylesheet" href="app.css">

Or load from jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@v2.0.0/tachyons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@v2.0.0/app.css">

Pin to a tag for production. For floating major, use @2; for bleeding-edge off main, drop the ref entirely (.../tachyons-neo/tachyons.css).

Or vendor it:

curl -O https://raw.githubusercontent.com/gobijan/tachyons-neo/main/tachyons.css
curl -O https://raw.githubusercontent.com/gobijan/tachyons-neo/main/app.css

Fourteen additions on top of Tachyons v4.13.0.

Also: .lh-headline (tight leading for display type), .tnum (tabular figures), and variable-driven .debug* / .debug-grid* helpers.

Every design value — spacing, type scale, colours, radii, shadows, durations — is exposed as a :root custom property. Reference them from your own CSS:

.card {
  padding: var(--spacing-3);
  color: var(--dark-pink);
  line-height: var(--lh-copy);
}

118 tokens across 18 groups: spacing, font-size, measure, line-height, letter-spacing, radius, border-width, shadow, duration, grayscale, black/white alpha, warm, purple/pink, green, blue, washed, font families.

Tokens are declared inside @layer tachyons, so var() resolves everywhere and redefining one in your own (unlayered) :root overrides it. The optional app.css companion aliases these base tokens into semantic application tokens.

See tachyons.css or the live docs for the full list.

app.css is a small semantic layer for product UI. It does not add components. It maps Tachyons Neo tokens into application names for text, surfaces, borders, action colours, state colours, focus rings, and light/dark themes. Neutral text, surface, and border ramps use the existing black/white transparency tokens; action and focus use Apple-style System Blue with a Display P3 override.

<link rel="stylesheet" href="tachyons.css">
<link rel="stylesheet" href="app.css">

Use data-theme="light" or data-theme="dark" on html or any subtree to force a theme; otherwise the root follows prefers-color-scheme.

<main class="bg-surface-base text-1">
  <button class="button-reset bg-action on-action focus-ring">
    Save
  </button>
</main>

<aside data-theme="dark" class="bg-surface-1 text-1 b--border-1">
  Scoped dark surface
</aside>

Brand, action, and state colours expose seven utilities: .color, .bg-color, .b--color, .on-color, .hover-color, .hover-bg-color, and .hover-b--color. Text, surface, and border ramps omit on-* and expose the other six utilities, for example .surface-1, .bg-surface-1, .b--surface-1, .hover-surface-1, .hover-bg-surface-1, and .hover-b--surface-1. Focus helpers are .focus-ring, .focus-ring-box, and .hover-border.

Release notes, newest first.

• Responsive -ns, -m, and -l variants now use container queries instead of viewport media queries.
• Make html an inline-size query container in the reset layer, so page-level responsive behavior works with only the stylesheet loaded.
• Give body a reset-layer min-height: 100dvh so the page canvas remains at least the dynamic viewport height.
• Add .root as the component query root for local responsive behavior.
• Add Neo-native button and input demos for the stable v2 surface.
• Add optional app.css companion with semantic application tokens, surface/text/border/action/state utilities, focus helpers, and scoped light/dark theming via data-theme.
• Base neutral app text, surface, and border ramps on Tachyons' black/white transparency tokens.
• Use Apple-style System Blue as the action, focus, and native accent-color default, with a Display P3 override where supported.
• Reserve @layer app between core utilities and debug helpers in the layer order.
• Add an application demo showing app.css in a dashboard-style product surface.

• Patch #11 added: .object-cover / .object-contain (+ responsive), the <img> counterpart to .cover/.contain; patch list renumbered to thirteen (cascade layers → #12, min-w-0/min-h-0 → #13).
• .gtc1–.gtc4 tracks (all breakpoints) now use repeat(n, minmax(0, 1fr)) instead of repeat(n, 1fr), so columns shrink-safe and no longer blow out on long content.

• Add .min-w-0 / .min-h-0 utilities (+ -ns/-m/-l responsive variants) so flex and grid items can shrink below their content — fixes blown-out 1fr columns and lets a child .truncate clip.

• Wrapped tachyons.css in @layer reset, tachyons — unlayered author CSS now beats any utility regardless of specificity or load order; added patch #11/#12 and tokens declared inside @layer tachyons
• Dropped the stray !important from .cover, .contain, and .clip (plus their -ns/-m/-l variants)
• this is a deliberate cascade-behavior change, so anyone relying on the old specificity/source-order model can pin to @v1.0.8

• .hide-child now toggles visibility alongside opacity (with allow-discrete transition) and triggers on :focus-within instead of :focus-visible
• Hero copy swaps "finer-grained colour steps" for "css variable design tokens"; patch-set count bumped 10 → 11
• Header and hero recolored to bg-black/bg-purple white; brand renamed "Tachyons Neo" and the Neo stroke accent changed dark-pink → yellow

• Add .object-cover / .object-contain utilities with -ns/-m/-l responsive variants, plus a new section 11 demo pairing them with .aspect-ratio--4x5
• Drop the JetBrains Mono webfont; set --font-sans-serif to the system Helvetica stack and rely on system mono for code
• Remove stray bb border on the section 10 (Writing-mode) article

• Add .aspect-ratio--4x5 utility with -ns, -m, -l responsive variants

• Replaced --yellow: gold keyword with hex #ffd700 in :root token block
• Removed antialiased class from <body> in index.html

• Removed -webkit-font-smoothing: antialiased from the body rule in the CSS reset

• Add .sideways-lr and .horizontal-tb writing-mode utilities (Patch 10), with responsive -ns/-m/-l variants
• Add .mt-auto and .mb-auto margin utilities, with responsive variants
• Bump CDN pin example from v1.0.1 to v1.0.2

• Added § 01 Install section to index.html and a jsDelivr <link> snippet to README.md
• Rebuilt --shadow-1 through --shadow-5 tokens as layered elevation (softer alphas, dual-layer on 3–5)
• Fixed self-referential --ease-shadow token to cubic-bezier(.4, 0, .2, 1); bumped section borders to bw2-ns

• Swapped :focus for :focus-visible on .link, all .hover-* color/bg utilities, and interactive helpers (.dim, .glow, .grow, .grow-large, .hide-child, .underline-hover, .shadow-hover, .bg-animate, .nested-links a) in tachyons.css.
• Added a Changelog section (§ 03) to index.html and README.md; renumbered Colophon to § 04.
• Linked the Source and Upstream entries in the Colophon and switched the footer Screen Island link to dark-blue underline-hover.

• Initial release. Tachyons v4.13.0 with nine patches, a 118-token design system, and a small grid layer.

A Screen Island edition of Tachyons. Descended from Tachyons (tachyons.io, 2016–) under the long shadow of Müller-Brockmann, Hofmann, and Crouwel. Built for internal use at Screen Island; published in case it's useful to you.

MIT.