arieare design system
Central token and component library for all arieare.co subdomains. The docs shell stays
global, while the sections below actively switch into each app package's own token context.
global primitives
The base package still anchors palette, semantic roles, and shared controls for every app.
black #0E0A07
base-950 #1C1916
base-900 #2E2B28
base-700 #5C5752
base-500 #9E9893
base-200 #D0CDC6
base-100 #ECE9E1
base-50 #F9F6EE
white #FFFEFE
orange-600 #D55000
indigo-600 #6D6DEC
green-600 #2C9E55
button quick look
The shared button primitive comes from the global DS package and works across all app themes.
Full component docs → components
app field guide
Each section below runs inside a scoped token wrapper. The docs shell remains the same, but the panel surfaces, accent colors, and text specimens switch to the selected app package.
@arieare/ds-main
main
open appWarm neutral foundations for the home site, shared chrome, and the more tactile surfaces inside the main app.
specimen
home / utility shell
Quiet clarity, warm edges
Shared mono typography stays in place while the app package layers link ink, note colors, and tray surfaces on top.
This section intentionally uses the global type scale to show that `main` inherits typography and differentiates through app tokens.
typography
Shared DS mono scale
Relies on the shared `--type-*` and `--font-mono` stack. The app-specific package mainly changes color, elevation, and utility surfaces rather than introducing a separate text family.
Main surface alias for the shared page background.
Primary interactive accent across the main app.
Sticky-note fill for lab wall surfaces.
Bottom tray surface token still owned by the main app package.
@arieare/ds-work
work
open appPaper Mono-led editorial system for portfolio storytelling, case-study reading, and motion-heavy canvases.
specimen
portfolio / case study
Design systems with room to breathe
Display copy uses Paper Mono for headings while body text keeps the same family with a calmer rhythm for longer reading.
Dot-grid and outline tokens provide the surface character; typography comes entirely from the token package.
typography
Paper Mono display + body
Uses `--font-display` and `--font-body` from the work token package. The docs specimen stays token-first and avoids importing the full `work-ds.css` hierarchy.
Work canvas background token.
Grid-dot color used to texture the page background.
Structural outline color for rails and dividers.
Display stack for headings and titles.
Body stack for reading and UI copy.
@arieare/ds-blog
blog
open appA restrained reading surface that keeps shared DS chrome and defines semantic mono aliases for article titles and prose hierarchy.
specimen
essay / note
Writing that feels unhurried
The blog package keeps the shared mono system end to end, then names article and prose tiers with semantic aliases so editorial surfaces stay consistent with the rest of DS.
The preview focuses on DS-backed typography aliases rather than a separate reading type system.
typography
Shared DS mono aliases
Chrome, metadata, and article typography stay on the shared DS mono scale. The blog package adds semantic aliases for article title and prose tiers instead of introducing a separate reading stack.
Article background token.
Light editorial divider color.
Semantic alias for the shared `--type-h3` title contract.
Semantic alias for the shared `--type-p-large` prose body contract.
Semantic alias for the top prose heading tier, backed by `--type-h3`.
Semantic alias for the mid prose heading tier, backed by `--type-p-large`.
Readable left indent for editorial prose lists.
Secondary-ink marker color alias for ordered and unordered prose lists.
Controls ordered-list number badge surface, spacing, radius, and inset padding.
Reading width constraint for article layouts.
Hover rule color for archive rows.
@arieare/ds-play
play
open appPixel-art token pack for the games portal, built from palette primitives, cartridge panels, and a dedicated bitmap typeface.
specimen
cartridge / hud
Insert coin and pick a strange idea
Preview copy uses the pixel font token and panel colors to echo the app's arcade tone while staying inside the docs layout.
This is a token-driven approximation of the play identity, not a reproduction of the games UI.
typography
Bitmap display via `--font-pixel`
The play package defines its own pixel palette and bitmap font token. The docs specimen uses those tokens directly without mirroring the full landing-page composition.
Portal background color.
Panel surface used behind game metadata.
Primary play accent.
Secondary highlight accent.
Bitmap font stack for the portal voice.
@arieare/ds-cv
cv
open appMinimal resume layer with just enough tokens to tint the page while keeping the shared DS type system intact.
specimen
resume / profile
Compact facts, quiet hierarchy
The CV package keeps typography close to the global system and lets spacing plus ink contrast carry most of the structure.
This preview calls out the minimal nature of the package instead of inventing a separate text style.
typography
Shared DS type, minimal overrides
The package is intentionally small. It reuses the shared type scale and only overrides the document surface and primary/secondary ink values.
Document page background.
Primary text color for resume content.
Supportive metadata ink.