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.
The mark
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.
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
list-row stripe
Hover for the 3px copper bar.
reveal
Fades and slides up on scroll into view.
Components
Buttons
Labels & 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.