App Stylr Reference

Use the tokens in three steps

Start with CSS for a web page or extension. App Stylr provides values and assets, not application components or behavior.

01
Install a pinned release
```
npm install "github:kylbutlr/app-stylr#v1.1.0"
```
Pinning keeps token changes deliberate and reviewable.
02
Import fonts and tokens
```
@import "app-stylr/fonts.css";
@import "app-stylr/css";
```
Import both once in your application stylesheet.
03
Use semantic roles
```
.panel {
  color: var(--ui-text);
  background: var(--ui-surface);
}
```
Use roles such as text and surface instead of copying palette values.

Complete web example Design practice Browser-extension guide Swift and SwiftUI setup

What App Stylr does and does not change

App Stylr supplies reusable visual values, generated adapters, fonts, icon tools, and optional guidance. It does not add accounts, save application data, send project files over the network, replace native controls, or manage your releases.

What stays shared

Compatibility lives in meaning and quality, not screenshot resemblance.

Semantics

Roles such as text, surface, accent, and status keep their meaning across products.

Access

Contrast, focus, motion preferences, and non-color cues remain dependable.

Character

Color, type, and rhythm create a family resemblance without fixing the composition.

Brand palette

Charcoal structure moves toward a restrained mint signal.

Ink#111111

Charcoal#2E3135

Slate#49545B

Steel#647B81

Sage#83A4A3

Mint#A9CEC2

Examples, not templates

These compositions demonstrate token behavior. They are not required product layouts.

Static examples: the controls below demonstrate appearance and states. They do not prescribe navigation, component structure, or responsive behavior, and they do not save, sync, open settings, or change application data.

Dark theme example

data-theme="dark"

Saturday, August 15

Good afternoon

Open08

Completed12

Focus75%

Quick add

Review App Stylr tokens Add task

Press Return to save

Ship the visual contract Today

Pin the shared release Next

Light theme example

data-theme="light"

Account

Project workspace

This specimen uses spacing, borders, and typography to create hierarchy. Another product may choose a completely different composition.

Save changes Cancel

Workspace name Example Studio

Default view Today

Review account activity

✓ App Stylr enabledFollowing v1.2.0 Active

Geist, when it fits

Geist Sans and Geist Mono are bundled and coordinated, but optional. The product voice still leads.

Display · 40/44 · 700

Calm tools for daily work.

Heading 1 · 32/38 · 700

Clear hierarchy, quiet surfaces.

Heading 2 · 26/32 · 650

Progress without noise.

Body · 16/24 · 400

App Stylr keeps product decisions recognizable across apps while leaving room for each tool to solve its own problem.

Mono metadata · 12/16 · 500

SYNCED 14:32 · APP-STYLR@1.2.0

Characters

Aa Bb Gg Kk Rr 0123456789 & @ #

Status with language

Color reinforces meaning. Text and symbols carry it.

✓

Icons generated

The new files are ready in your chosen folder.

!

Unsupported image

Choose a square SVG or PNG and try again.

×

Cannot write to this folder

Choose a folder you can edit, then run the command again.

i

Check only

No files will change while the command verifies generated output.

Adapt the task, not a screenshot

These are possible responses to available space, not linked breakpoint rules.

Wide exampleKeep related context visible

Medium exampleReveal detail when needed

Compact examplePrioritize the current step

An optional icon recipe

Use the gradient base for shared brand expression, or bring your own square master.

Example symbolPublic reference

Gradient baseStart here

1024Master canvas

840Rounded square

190Corner radius

9%Transparent space

Chrome16 · 32 · 48 · 128

Apple touch152 · 167 · 180

Installable site192 · 512

A recognizable foundation, not a prescribed product.

Consistency should reduce repeated decisions without erasing product-specific needs.

The foundation owns

Semantic meaning, accessible contrast, generated adapters, and versioned shared assets.

The product owns

Layout, navigation, density, components, breakpoints, platform behavior, and expressive direction.

Your product files stay on your device.

App Stylr has no account, cloud service, telemetry, or upload feature. Its commands read and write only the local files and folders you choose.

In the command-line tools

Selected inputs are processed locally. Nothing is uploaded by App Stylr.

When you install

Your package provider handles the download. App Stylr code sends no install event.

This page’s web host may process ordinary request data needed to deliver it. Read the complete privacy details for storage, deletion, hosting, and command-specific behavior.