The Editorial Atelier

Aylith design system

A warm-stone canvas, a single copper accent, and a wordmark set like a masthead. The system commits to restraint. Everything below is live and themed to your system light or dark setting.

Motion

Detected system preference: motion allowed

Following your system setting: motion is allowed, so the animations play.

Brand

The mark is six vertical strokes, one per letter of AYLITH, climbing past the copper signal diagonal, with an AI spark in the top-left. The wordmark spaces those same six letters into a wide-tracked uppercase masthead.

Six strokes that climb past the signal

The work, counted and climbing past its own signal, with an AI sparkle cluster in the corner. Six bars, one for each letter of AYLITH, climbing from the floor and crossed by a single copper curve. It carries four readings at once, and they reinforce each other.

A count
The strokes are a tally, the original mark’s idea: marks made one at a time as work ships. The story is a record kept honest (138 launches analyzed, every tool public from day one), and a tally is how you keep a record honest.
A climb
The strokes rise left to right instead of standing even. That turns the count into a trend: each stroke is taller than the last, the way shipping compounds. Growth without a single arrow, gradient, or upward-and-to-the-right cliche.
A signal
The copper curve is the demand signal Aylith reads, drawn as the growth it compounds into. The bars break past it: the work outpaces the signal, it does not just meet it. Copper is the lone accent, so the curve is one of the only things that gets color.
A spark
The copper sparkles in the top-left mark the work as AI-driven, the modern signifier for intelligence in the loop. They are what make the cadence days, not quarters, and they are held to the same single copper accent.

It keeps the equity of the old tally mark while fixing its one weakness: a level tally says “we counted”, not “we are going somewhere”. Ascending says both, and the bars breaking past the curve turn the signal into something the work outruns.

The wordmark

Space Grotesk · uppercase · ~0.34em tracking · aria-label="Aylith"

The name carries four readings at once, the same way the mark does.

AI, in stone
Say it and it splits. Ay is AI. The ending is ·lith, from líthos, the Greek for stone, the root inside monolith and megalith. Aylith turns AI into liths: small, solid tools that last and that you own.
A field
One slab is a trap. Aylith ships many sharp tools instead, each its own standing stone, with the umbrella as the field they stand in.
Six letters
Read down the name and it holds the studio. Agents. Yours. Lasting. Indexed. Tools. Hub.
Roots and branches
There is a tree in it, for those who hear one. The infrastructure is the roots. The products are the branches. Set in stone and still growing.

Twelve highlight animations

One per calendar month; the live site shows variant 7 right now. Each ignites copper over ink and settles to static ink. Press play to replay; hover the wordmark to replay in place. With motion set to Reduced they hold still.

01 Slash sweep ignite
02 Sequential fill
03 Shimmer band
04 Tally count
05 Typewriter reveal
06 Stroke draw
This month
07 Wave bob
08 Flicker ignite
09 Spotlight scan
10 Underline sweep
11 Track-in
12 Diagonal rise

Color

Two anchors: one warm-neutral surface ramp and one copper accent, plus a thin warm ramp for dark-mode text. No secondary color. Click a swatch to copy its value.

Workshop Stone — surfaces

Tally Copper — accent

Warm — dark-mode text

Typography

Space Grotesk for the wordmark and every headline, DM Sans for body. Two families, each with a defined job.

Display

Space Grotesk · 700 · clamp(2.5rem, 6vw, 4.5rem) · tracking -0.02em

Read the signal.

Headline

Space Grotesk · 700 · 1.5rem

What shipped

Title

Space Grotesk · 700 · 1rem

Apiflip

Body

DM Sans · 400 · 1rem · line-height 1.6 · cap 65–75ch

A lab for turning demand signals into shipped AI tools. Days, not quarters.

Body small

DM Sans · 400 · 0.875rem

Card descriptions, footer copy, secondary annotations.

Label

DM Sans · 500 · 0.75rem · tracking 0.02em · uppercase

Developer Tools

Motion

Depth is motion, not shadow. One easing curve, short durations, and a small named vocabulary. Every demo here obeys the Motion control at the top of the page, which detects your system reduced-motion setting and lets you override it for preview.

Motion

Detected system preference: motion allowed

Following your system setting: motion is allowed, so the animations play.

Easing

cubic-bezier(0.16, 1, 0.3, 1)

ease-out-quint. 150–250ms for state, up to 700ms for reveals.

btn-press

Lifts 2px on hover, drops 1px on active.

tilt

3D parallax on hover

list-row stripe

Hover for the 3px copper bar.

reveal

Fades and slides up on scroll into view.

Components

Buttons

Labels & nav

Shipped Productivity Active nav

Card

Apiflip

Describe any web page in plain English, get typed JSON back.

Input

Principles

The named rules the system is built on. Load-bearing, not decorative.

One Accent

Tally Copper on ≤10% of any screen. No second accent, ever. The rarity is the point.

No Cool Tint

Every neutral is warm. Workshop Stone and Warm only. No true grays, no pure #000 / #fff surfaces.

Patinated on Hover

Copper deepens on hover (500 → 600), never lightens. Deeper reads as commitment.

Flat by Default

No resting shadows. Depth is motion, not elevation. Reach for a stronger border or more space first.

One Face, One Job

Space Grotesk is the wordmark (spaced caps) and headlines (normal case). DM Sans is body. Lanes never cross.

Sacred Wordmark

A Y L I T H in spaced caps, animated by exactly one monthly-rotating highlight variant, settling to static ink.

Present Tense

Built, ships, survived. Never "coming soon" or "get started today". No future-tense tells.

No Em Dashes

Commas, periods, semicolons, parentheses. Em dashes are out of brand by decree.