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 stylesheet.
Drop the stylesheet in and go. Load it from jsDelivr, vendor it with curl, or copy the single file into your project. No build step, no dependencies.
<!-- Pinned to a tag (recommended) -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@v1.0.7/tachyons.css">
<!-- Major-floating -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@1/tachyons.css">
<!-- Latest main (no cache guarantee) -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo/tachyons.css">curl -O \
https://raw.githubusercontent.com/gobijan/tachyons-neo/main/tachyons.css
<link rel="stylesheet" href="tachyons.css">The -m modifier has no upper bound — styles applied at the medium breakpoint continue applying at large unless explicitly overridden. Reduces repetition.
<div class="pa3 pa5-m">
Padding-5 applies from
480px and up.
</div>Eight gap utilities for flex and grid layouts, mapped to the Tachyons spacing scale. Responsive variants available at every breakpoint.
.g0 { gap: 0 }
.g1 { gap: .25rem }
.g2 { gap: .5rem }
.g3 { gap: 1rem }
.g4 { gap: 2rem }
.g5 { gap: 4rem }
.g6 { gap: 8rem }
.g7 { gap: 16rem }Heights using the dvh unit — accounts for collapsible mobile browser chrome so 100 % really means 100 %. Responsive variants available.
.dvh-25 { height: 25dvh }
.dvh-50 { height: 50dvh }
.dvh-75 { height: 75dvh }
.dvh-100 { height: 100dvh }
.min-dvh-100 { min-height: 100dvh }Extra-low opacity steps for whisper-thin overlays, dividers, and tints. Available as colour, background, and hover variants for both black and white.
.black-025 rgba(0,0,0,.025)
.black-0125 rgba(0,0,0,.0125)
.white-05 hsla(0,0%,100%,.05)
.white-025 hsla(0,0%,100%,.025)
.white-0125 hsla(0,0%,100%,.0125)
// also: .hover-* and .hover-bg-*Renders text as an outline using -webkit-text-stroke. Combine with an inline stroke-width for thicker strokes. See the headline above. Responsive variants available.
.stroke {
-webkit-text-stroke: 1px currentColor;
-webkit-text-fill-color: transparent;
}A small, opinionated CSS Grid layer — equal-fraction columns and column spans. Pairs with the gap scale. Responsive variants available.
.grid display: grid
.gtc1 grid-template-columns: 1fr × 1
.gtc2 grid-template-columns: 1fr × 2
.gtc3 grid-template-columns: 1fr × 3
.gtc4 grid-template-columns: 1fr × 4
.csp1 grid-column: span 1
.csp2 grid-column: span 2
.csp3 grid-column: span 3
.csp-full grid-column: 1 / -1A handful of one-shot effects: a tactile press dimmer, a colour inverter, and a backdrop blur for glass surfaces.
.active-dim:active {
opacity: .8;
transition: opacity .15s ease-out;
}
.invert { filter: invert(1) }
.blur {
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}Two small affordances. Disable the textarea resize handle, and place list markers inside the content box where they belong.
.resize-none { resize: none }
.list-inside { list-style-position: inside }Lorem-ipsum for backgrounds. Pulls a random photo from picsum.photos at three aspect ratios. For prototyping; don't ship to production.
.random-image
.random-image-landscape
.random-image-portraitRotate a block of text onto a vertical axis — spine labels, edge nav, section markers. .sideways-lr reads bottom-to-top with Latin-friendly glyph orientation; .horizontal-tb resets to the default. Responsive variants available.
.horizontal-tb { writing-mode: horizontal-tb }
.sideways-lr { writing-mode: sideways-lr }The <img> counterpart to .cover/.contain. Pair with .aspect-ratio--* to crop images to a fixed ratio without distortion. Responsive variants available.
.object-cover { object-fit: cover }
.object-contain { object-fit: contain }
<div class="aspect-ratio--4x5">
<img class="db w-100 h-100 object-cover"
src="…" alt="">
</div>
Every design value — spacing, type scale, colours, radii, shadows, durations — is exposed as a :root custom property. Reference them from your own CSS via var(--spacing-3), var(--dark-pink), var(--lh-copy).
--spacing-0 0
--spacing-1 .25rem
--spacing-2 .5rem
--spacing-3 1rem
--spacing-4 2rem
--spacing-5 4rem
--spacing-6 8rem
--spacing-7 16rem--font-size-headline 6rem
--font-size-subheadline 5rem
--font-size-1 3rem
--font-size-2 2.25rem
--font-size-3 1.5rem
--font-size-4 1.25rem
--font-size-5 1rem
--font-size-6 .875rem
--font-size-7 .75rem--measure 30em
--measure-wide 34em
--measure-narrow 20em
--mw-6 32rem
--mw-7 48rem
--mw-8 64rem
--mw-9 96rem--lh-solid 1
--lh-title 1.25
--lh-copy 1.5
--lh-headline .85--tracked .1em
--tracked-tight -.05em
--tracked-mega .25em--radius-0 0
--radius-1 .125rem
--radius-2 .25rem
--radius-3 .5rem
--radius-4 1rem
--radius-100 100%
--radius-pill 9999px--border-width-0 0
--border-width-1 .125rem
--border-width-2 .25rem
--border-width-3 .5rem
--border-width-4 1rem
--border-width-5 2rem--shadow-1 0 1px 2px rgba(0,0,0,.06)
--shadow-2 0 2px 4px rgba(0,0,0,.08)
--shadow-3 0 1px 2px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.08)
--shadow-4 0 2px 4px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.10)
--shadow-5 0 4px 8px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.12)--duration-fast .15s
--duration-medium .25s
--duration-slow .5s--black #000
--near-black #111
--dark-gray #333
--mid-gray #555
--gray #777
--silver #999
--light-silver #aaa
--moon-gray #ccc
--light-gray #eee
--near-white #f4f4f4
--white #fff--black-90 rgba(0,0,0,.9)
--black-80 rgba(0,0,0,.8)
--black-70 rgba(0,0,0,.7)
--black-60 rgba(0,0,0,.6)
--black-50 rgba(0,0,0,.5)
--black-40 rgba(0,0,0,.4)
--black-30 rgba(0,0,0,.3)
--black-20 rgba(0,0,0,.2)
--black-10 rgba(0,0,0,.1)
--black-05 rgba(0,0,0,.05)
--black-025 rgba(0,0,0,.025)
--black-0125 rgba(0,0,0,.0125)--white-90 hsla(0,0%,100%,.9)
--white-80 hsla(0,0%,100%,.8)
--white-70 hsla(0,0%,100%,.7)
--white-60 hsla(0,0%,100%,.6)
--white-50 hsla(0,0%,100%,.5)
--white-40 hsla(0,0%,100%,.4)
--white-30 hsla(0,0%,100%,.3)
--white-20 hsla(0,0%,100%,.2)
--white-10 hsla(0,0%,100%,.1)
--white-05 hsla(0,0%,100%,.05)
--white-025 hsla(0,0%,100%,.025)
--white-0125 hsla(0,0%,100%,.0125)--dark-red #e7040f
--red #ff4136
--light-red #ff725c
--orange #ff6300
--gold #ffb700
--yellow gold
--light-yellow #fbf1a9--purple #5e2ca5
--light-purple #a463f2
--dark-pink #d5008f
--hot-pink #ff41b4
--pink #ff80cc
--light-pink #ffa3d7--dark-green #137752
--green #19a974
--light-green #9eebcf--navy #001b44
--dark-blue #00449e
--blue #357edd
--light-blue #96ccff
--lightest-blue #cdecff--washed-blue #f6fffe
--washed-green #e8fdf5
--washed-yellow #fffceb
--washed-red #ffdfdf--font-sans-serif
--font-serif
--font-system-sans-serif
--font-system-serif
--font-codeRelease notes, newest first. Each entry summarises the material changes since the previous tag.
A Screen Island edition of Tachyons. Set in the system Helvetica stack at the body, with Systems Mono for code. 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.