@strawberry-code/arasaka-theme

v0.7.0

Published

19 days ago

Arasaka: a white, grayscale and single-red Tailwind v4 theme. Sharp corners, hairline rules, mono labels.

0High
0Medium
0Low

strawberry-code

tailwind tailwindcss theme design-system css arasaka

Arasaka Theme

A Tailwind v4 theme: pure white, a neutral grayscale ramp, and one sharp red. Corners stay square, rules stay hairline, labels stay monospaced.

The palette is deliberately austere so the single red carries every bit of emphasis on the page. Use it rarely and it works. Use it everywhere and the theme collapses into noise.

Install

npm install @strawberry-code/arasaka-theme

Use

@import "tailwindcss";
@import "@strawberry-code/arasaka-theme";

Tokens only, without the components:

@import "@strawberry-code/arasaka-theme/tokens.css";

Fonts

The theme names Geist for text and JetBrains Mono for labels, and falls back to the system stack. It does not ship font files. Load them yourself, with next/font or a @font-face of your own, or accept the fallback.

Palette

| Token | Value | Use | |---|---|---| | paper | #FFFFFF | page background | | paper-warm | #F6F6F6 | panels that recede | | paper-sink | #EDEDED | the deepest surface | | ink | #0A0A0A | primary text | | ink-soft | #262626 | body copy | | ink-mute | #6B6B6B | secondary text | | ink-ghost | #A6A6A6 | hints and disabled | | accent | #D11A2A | the one accent | | accent-deep | #9E0F1E | pressed and hover | | accent-soft | #F2A6AE | quiet accent borders | | accent-wash | #FCE9EB | accent backgrounds | | rule | #E2E2E2 | hairline borders | | rule-soft | #EDEDED | the quietest divider |

Utilities follow Tailwind's own naming, so bg-paper, text-ink-mute and border-rule all work.

Spacing

An a1 to a8 scale, non-linear on purpose: the steps widen as sections grow, which stops a long page from beating out an even rhythm.

0.5rem · 1rem · 1.5rem · 2rem · 3.25rem · 5rem · 7rem · 9.5rem

Written as p-a3, mt-a6, gap-a2.

Components

`.arasaka-grid`

A faint fixed grid behind the page, masked so it fades toward the bottom. Decorative and non-interactive. One per page, as the first child of <body>.

<div class="arasaka-grid" aria-hidden="true"></div>

`.arasaka-interactive`

Two red corner brackets that appear on hover and on keyboard focus. Put it on anything that opens something. Keyboard focus also draws an inset ring, since the brackets alone are too quiet to serve as an accessible focus indicator.

<article class="arasaka-interactive" tabindex="0">…</article>

`.arasaka-chip`

A five-step scale answering one question: how current is this technology?

| Class | Reads as | |---|---| | .arasaka-chip | part of the stack | | .arasaka-chip--hot | daily use, black fill | | .arasaka-chip--warm | what you are known for, red fill | | .arasaka-chip--new | learning it now, red outline | | .arasaka-chip--cool | known, but moved on, gray outline |

<span class="arasaka-chip arasaka-chip--hot">TypeScript</span>

Give readers the legend somewhere on the page. Without it the five variants are just colors.

Forms

.arasaka-field wraps a .arasaka-label and one of .arasaka-input, .arasaka-textarea, .arasaka-select. Focus draws a red inset rule rather than a browser outline. Invalid fields turn a soft red border, but only once the user has typed something, so an empty required field is not scolded on sight.

<label class="arasaka-field">
  <span class="arasaka-label">Email</span>
  <input class="arasaka-input" type="email" placeholder="[email protected]" />
</label>

.arasaka-button is a filled black action, .arasaka-button--ghost its outlined sibling. Black marks what is active, so the accent stays reserved for emphasis and never leaks into state.

.arasaka-notice is a washed panel with a red left rule, for telling the reader where what they are writing will end up.

Segmented control

.arasaka-segment holds two or more <button> elements. Mark the chosen one with aria-pressed="true" and it inverts to black. The attribute drives the style, so the accessible state and the visible state cannot drift apart.

<div class="arasaka-segment" role="group">
  <button aria-pressed="true">Private</button>
  <button aria-pressed="false">Corporate</button>
</div>

Calendar

.arasaka-calendar frames a .arasaka-calendar-head and a .arasaka-calendar-grid of .arasaka-calendar-dow labels and .arasaka-calendar-day buttons. Selection again rides on aria-pressed. Days outside the month take .arasaka-calendar-day--empty; unavailable days use the native disabled attribute. Time slots below the grid use .arasaka-slot.

The theme styles the grid and nothing else. Date arithmetic, availability and time zones belong to the application, which knows things a stylesheet cannot.

Monumental call to action

.arasaka-cta is the one action a page really wants taken. Letter-spacing is wide like engraving and widens further on hover, which is the only decoration allowed: everything else is type and empty space. Corner brackets sit outside the border and stay visible, because here they frame rather than signal.

Use one per page. Two of them and the page no longer has a centre.

<a class="arasaka-cta" href="/inquiry">Request an inquiry</a>

Choice panels

.arasaka-choice is a tall selectable panel carrying a watermark numeral in .arasaka-choice-index. Stack two or three in a column and mark the chosen one with aria-pressed="true" to invert it. Past three the numeral stops orienting the reader and starts decorating, which is a different job.

<button class="arasaka-choice" aria-pressed="true">
  <span class="arasaka-choice-index">01</span>
  <h3>Blockchain</h3>
  <p>PwC advisory</p>
</button>

Corner mark

.arasaka-mark pins one glyph to the top right of a card, level with the heading, drawn in ink. Inside an .arasaka-interactive it turns accent on the same hover that reveals the corner brackets. Override --arasaka-mark-size and --arasaka-mark-inset per card; the parent must be positioned.

The theme owns the slot, not the drawing. Bring your own glyph on a 24 by 24 grid with a stroke of 2, which is what Tabler, Lucide and Feather all ship. Inline the SVG rather than loading an icon runtime, so the mark survives printing and offline rendering.

Set the caps to butt and the joins to miter, whatever the source set declares. Every mainstream icon library ships rounded terminals, and rounded terminals are the single detail that makes a borrowed glyph look borrowed here. Caps only fix the ends: a curve already drawn into the path stays a curve, so prefer glyphs built from straight segments.

<a class="arasaka-interactive" style="position: relative">
  <svg class="arasaka-mark" viewBox="0 0 24 24" aria-hidden="true"
       fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="butt" stroke-linejoin="miter">
    <path d="..." />
  </svg>
  <h2>Atlas</h2>
</a>

Carousel

.arasaka-carousel-frame is a black 16:9 stage with a hairline border; slides cross-fade through .arasaka-carousel-slide[data-current] rather than sliding, because a horizontal translation fights the fixed background grid. Below it, .arasaka-carousel-bar holds a mono counter, one .arasaka-carousel-tick per slide and square .arasaka-carousel-btn arrows. .arasaka-carousel-empty replaces the slides when there are none, and .arasaka-carousel-credit carries the author and licence line that CC BY and CC BY-SA require.

The theme owns the frame and the controls. Which images play, and the state that picks the current one, belong to whoever is using the theme.

Motion

One easing curve, exposed as --ease-arasaka, so the whole surface moves alike. Every animation in the theme is disabled under prefers-reduced-motion.

License

MIT