+ Stop naming classes before you have a product
++ Most early UI work is structure and hierarchy. Semantic HTML + gets you there faster than a utility soup. +
++ Continue reading +
+
-
+ Alert - launch.css
+
+
+
+ Your changes have been saved.
+
`}
+/>
+
+launch.css
-A classless CSS framework for semantic HTML
- +
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/docs/src/routes/docs/components/alert/+page.svelte b/apps/docs/src/routes/docs/components/alert/+page.svelte
new file mode 100644
index 0000000..0691a2b
--- /dev/null
+++ b/apps/docs/src/routes/docs/components/alert/+page.svelte
@@ -0,0 +1,68 @@
+
+
+
+
+ Classless CSS framework
+launch.css
++ Write semantic HTML. Get a finished interface. No class names, + no design system ceremony — just ship. +
++ Get Started + See examples +
+
+
+
+ No classes required
+This UI is plain HTML and ARIA.
+
+
+ Account
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ Nova Chen
+
+ Product designer · Studio
+
+ Profile saved. Changes apply on the next refresh.
+
+
+ + + + +
+
+
+
+
+ One import. Done.
++ Drop it in and keep writing HTML — + full install guide. +
+npx nypm add launch.cssAlert
++ Notices and feedback messages using ARIA roles — no classes required. +
+ +Status
+
+ Use role="status" for non-critical updates that should be
+ announced politely to assistive technology.
+
Alert
+
+ Use role="alert" for important, time-sensitive messages.
+
Note
+ +Danger Variant
+
+ Include error, danger, or warning in
+ the aria-label to get the danger surface.
+
+ Your trial ends in 3 days.
+
`}
+/>
+
+With Rich Content
+ +Version 1.2.0 is ready. Refresh to get the latest styles.
+`} +/> diff --git a/apps/docs/src/routes/docs/components/avatar/+page.svelte b/apps/docs/src/routes/docs/components/avatar/+page.svelte new file mode 100644 index 0000000..197f765 --- /dev/null +++ b/apps/docs/src/routes/docs/components/avatar/+page.svelte @@ -0,0 +1,64 @@ + + +Avatar
+
+ Circular profile images triggered by alt text containing
+ “avatar” or “profile” — no classes needed.
+
Basic Avatar
+ +Inline With Text
+ +Multiple Avatars
+ +How It Works
+-
+
-
+ Any
imgwhosealtcontains +avatarorprofile(case-insensitive) is + styled as a circle +
+ - Images are cropped with
object-fit: cover
+ - Missing or broken images fall back to the alt text +
Card
+
+ Every section is styled as a bordered, padded card — write
+ semantic HTML and get layout for free.
+
Basic Card
+ +Getting started
+Install launch.css and write semantic HTML. No class names required.
+ +`} +/> + +Multiple Cards
+ +Zero classes
+Style elements directly with sensible defaults.
+Light & dark
+Themes via color-scheme — no JavaScript needed.
+Layouts
+Website and dashboard layouts with a data attribute.
+Card With Form
+ +Subscribe
+Get product updates in your inbox.
+ +`} +/> diff --git a/apps/docs/src/routes/docs/components/kbd/+page.svelte b/apps/docs/src/routes/docs/components/kbd/+page.svelte new file mode 100644 index 0000000..60daaf5 --- /dev/null +++ b/apps/docs/src/routes/docs/components/kbd/+page.svelte @@ -0,0 +1,38 @@ + + +Kbd
+
+ Keyboard key affordances with the native kbd element.
+
Basic Keys
+ +Key Combinations
+ ++ Open search with ⌘ + K +
`} +/> + +In Instructions
+ +Meter
+
+ Scalar measurements with the native meter element — optimum
+ ranges get distinct colors automatically.
+
Basic Meter
+ +Optimum Ranges
+
+ Set low, high, and optimum to drive
+ green / yellow / red fills based on the current value.
+
Inline Meter
+ +Timeline
+
+ Vertical timelines using a list with
+ aria-label containing “timeline”.
+
Basic Timeline
+ +Project started with the first design draft.
+Public beta with theme support and layouts.
+Alerts, switches, avatars, and refreshed docs.
+How It Works
+-
+
-
+ Use
role="list"with an +aria-labelthat includestimeline+
+ -
+ Mark the active item with
aria-current="step"+
+ -
+ Optional
timechildren are muted and spaced above the + content +
+
Switch States
+ +Download
You can also download the CSS file directly from GitHub releases and include it in your project.
diff --git a/apps/docs/src/routes/examples/+page.svelte b/apps/docs/src/routes/examples/+page.svelte new file mode 100644 index 0000000..000ad64 --- /dev/null +++ b/apps/docs/src/routes/examples/+page.svelte @@ -0,0 +1,84 @@ + + +
+
+
+
+
+
+
diff --git a/apps/docs/src/routes/examples/blog/+page.svelte b/apps/docs/src/routes/examples/blog/+page.svelte
new file mode 100644
index 0000000..d45f0da
--- /dev/null
+++ b/apps/docs/src/routes/examples/blog/+page.svelte
@@ -0,0 +1,138 @@
+Built with launch.css
+Example projects
++ Full pages for different product shapes. No utility classes — just + layouts, ARIA, and semantic HTML. +
+
+ {#each examples as example (example.href)}
+
+
+ {/each}
+
+{example.kind}
+{example.title}
+{example.blurb}
++ Open example +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/docs/src/routes/examples/dashboard/+page.svelte b/apps/docs/src/routes/examples/dashboard/+page.svelte
new file mode 100644
index 0000000..fc17baf
--- /dev/null
+++ b/apps/docs/src/routes/examples/dashboard/+page.svelte
@@ -0,0 +1,171 @@
+
+
+Editorial example
+Field Notes
++ Essays on shipping software with less ceremony — written in + plain HTML and styled by launch.css. +
+
+ Latest notes
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ ARIA is enough for most variants
++ Danger buttons, current nav items, and selected tabs + already have attributes you should be writing. +
+
+ Layouts without layout classes
+
+ data-layout keeps website and dashboard
+ shells honest while your content stays semantic.
+
+ Theme with color-scheme, not JavaScript
+
+ Light and dark come from CSS variables and
+ light-dark() — no theme provider required.
+
+ Ship the interface, style it later
++ launch.css is a starting surface. Replace tokens when + the brand catches up. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/docs/src/routes/examples/saas/+page.svelte b/apps/docs/src/routes/examples/saas/+page.svelte
new file mode 100644
index 0000000..774879d
--- /dev/null
+++ b/apps/docs/src/routes/examples/saas/+page.svelte
@@ -0,0 +1,139 @@
+
+ Welcome back. 2 deploys need review before Friday’s freeze.
+
+
+ Overview
+Production health for the orbit-web service.
+
+
+
+
+
+
+
+ Error budget
+ +Build pipeline
+ +Feature flags
+ + +Recent deploys
+ + +| Version | +Environment | +Status | +Owner | +
|---|---|---|---|
| 1.2.0 | +production | +Healthy | +Nova | +
| 1.2.1-rc.3 | +staging | +Pending review | +Sam | +
| 1.1.9 | +production | +Superseded | +Riley | +
+ + +
+On-call
+
+
+ Sam Rivera is primary · press ⌘ + K to
+ page backup.
+
+ Freeze window starts Friday 16:00 UTC. Merge freezes apply
+ automatically.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/bun.lock b/bun.lock
index 28e02fc..cd9ef03 100644
--- a/bun.lock
+++ b/bun.lock
@@ -27,7 +27,7 @@
},
"packages/main": {
"name": "launch.css",
- "version": "1.1.6",
+ "version": "1.2.0",
"devDependencies": {
"modern-normalize": "^3.0.1",
"publint": "^0.3.15",
diff --git a/packages/main/package.json b/packages/main/package.json
index 0f42431..3b04ae4 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -1,7 +1,7 @@
{
"name": "launch.css",
"type": "module",
- "version": "1.1.6",
+ "version": "1.2.0",
"description": "A classless CSS framework built for speed. Style your website later—build it now.",
"homepage": "https://launch-css.dev",
"main": "dist/index.css",
diff --git a/packages/main/src/compoments/_alert.scss b/packages/main/src/compoments/_alert.scss
new file mode 100644
index 0000000..1662639
--- /dev/null
+++ b/packages/main/src/compoments/_alert.scss
@@ -0,0 +1,30 @@
+[role="alert"],
+[role="status"],
+[role="note"] {
+ display: block;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--border);
+ border-radius: calc(0.5rem - 2px);
+ background-color: var(--background-secondary);
+ padding: 0.75rem 1rem;
+ color: var(--color);
+ font-size: 0.875rem;
+ line-height: 1.5rem;
+
+ &[aria-label*="error" i],
+ &[aria-label*="danger" i],
+ &[aria-label*="warning" i] {
+ border-color: var(--background-danger);
+ background-color: var(--background-danger);
+ color: var(--color-danger);
+ }
+
+ > :first-child {
+ margin-top: 0;
+ }
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
diff --git a/packages/main/src/compoments/_avatar.scss b/packages/main/src/compoments/_avatar.scss
new file mode 100644
index 0000000..eadf77a
--- /dev/null
+++ b/packages/main/src/compoments/_avatar.scss
@@ -0,0 +1,37 @@
+img[alt*="avatar" i],
+img[alt*="profile" i] {
+ display: inline-block;
+ vertical-align: middle;
+ border: 1px solid var(--border);
+ border-radius: 50%;
+ width: 2.5rem;
+ height: 2.5rem;
+ object-fit: cover;
+}
+
+img[alt*="avatar" i]:not([src]),
+img[alt*="profile" i]:not([src]) {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ background: var(--background-secondary);
+ color: var(--color-muted);
+ font-weight: 500;
+ font-size: 0.875rem;
+}
+
+img[alt*="avatar" i]::after,
+img[alt*="profile" i]::after {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: var(--background-secondary);
+ width: 100%;
+ height: 100%;
+ content: attr(alt);
+ color: var(--color-muted);
+ font-weight: 500;
+ font-size: 0.75rem;
+ line-height: 1;
+ text-align: center;
+}
diff --git a/packages/main/src/compoments/_index.scss b/packages/main/src/compoments/_index.scss
index fcfe8f9..5c008f5 100644
--- a/packages/main/src/compoments/_index.scss
+++ b/packages/main/src/compoments/_index.scss
@@ -9,6 +9,9 @@
@use "meter";
@use "dialog";
@use "accordion";
+@use "alert";
+@use "avatar";
+@use "switch";
@use "grid";
@use "card";
@use "table";
diff --git a/packages/main/src/compoments/_list.scss b/packages/main/src/compoments/_list.scss
index a0f5e1d..51d3841 100644
--- a/packages/main/src/compoments/_list.scss
+++ b/packages/main/src/compoments/_list.scss
@@ -1,8 +1,35 @@
ul,
ol {
- margin: 0;
+ margin-block: 0 1em;
+ padding-inline-start: 1.5rem;
li {
- margin: 0.5rem;
+ margin-block: 0.5em;
+ }
+
+ &:last-child {
+ margin-block-end: 0;
+ }
+}
+
+dl {
+ margin-block: 0 1em;
+
+ dt {
+ margin-block-start: 1rem;
+ font-weight: 600;
+
+ &:first-child {
+ margin-block-start: 0;
+ }
+ }
+
+ dd {
+ margin: 0.25rem 0 0;
+ color: var(--color-muted);
+ }
+
+ &:last-child {
+ margin-block-end: 0;
}
}
diff --git a/packages/main/src/compoments/_switch.scss b/packages/main/src/compoments/_switch.scss
new file mode 100644
index 0000000..a596a8a
--- /dev/null
+++ b/packages/main/src/compoments/_switch.scss
@@ -0,0 +1,51 @@
+input[type="checkbox"][role="switch"] {
+ appearance: none;
+ -webkit-appearance: none;
+ position: relative;
+ flex-shrink: 0;
+ cursor: pointer;
+ margin: 0;
+ border: 1px solid var(--border);
+ border-radius: 9999px;
+ background-color: var(--background-secondary);
+ width: 2.75rem;
+ height: 1.5rem;
+ accent-color: unset;
+ transition:
+ background-color 0.15s ease,
+ border-color 0.15s ease;
+
+ &::before {
+ position: absolute;
+ top: 0.125rem;
+ left: 0.125rem;
+ border-radius: 50%;
+ background-color: var(--color);
+ width: 1.125rem;
+ height: 1.125rem;
+ content: "";
+ transition: transform 0.15s ease;
+ }
+
+ &:checked {
+ border-color: var(--background-primary);
+ background-color: var(--background-primary);
+
+ &::before {
+ background-color: var(--color-primary);
+ transform: translateX(1.25rem);
+ }
+ }
+
+ &:focus-visible {
+ outline-style: solid;
+ outline-width: 2px;
+ outline-offset: 2px;
+ }
+
+ &:disabled,
+ &[aria-disabled="true"] {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+}
diff --git a/packages/main/src/compoments/_typography.scss b/packages/main/src/compoments/_typography.scss
index 1b6b987..e90074a 100644
--- a/packages/main/src/compoments/_typography.scss
+++ b/packages/main/src/compoments/_typography.scss
@@ -49,21 +49,30 @@ h3,
h4,
h5,
h6 {
- margin-top: 2em;
- margin-bottom: 0.5em;
- margin-block: 0;
+ margin-block: 2em 0.65em;
&:first-child {
- margin-top: 0;
+ margin-block-start: 0;
}
}
+* + h1,
+* + h2,
+* + h3,
+* + h4,
+* + h5,
+* + h6 {
+ margin-block-start: 2em;
+}
+
p {
- margin-bottom: 1em;
- margin-block: 0;
+ margin-block: 0 1.1em;
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1.75rem;
&:last-child {
- margin-bottom: 0;
+ margin-block-end: 0;
}
}
@@ -75,26 +84,35 @@ a {
text-underline-offset: 4px;
}
-p {
- font-weight: 400;
- font-size: 1rem;
- line-height: 1.75rem;
-}
-
blockquote {
+ margin-block: 1.25em;
border-left-width: 2px;
- border-color: #27272a;
+ border-color: var(--border);
+ padding-inline-start: 1rem;
font-style: italic;
}
del {
- color: #7f1d1d;
+ color: light-dark(#7f1d1d, #fca5a5);
}
small {
font-size: 0.875em;
}
+mark {
+ border-radius: 0.125rem;
+ background-color: light-dark(#fef08a, #854d0e);
+ padding: 0.125rem 0.25rem;
+ color: light-dark(#422006, #fef9c3);
+}
+
+abbr {
+ cursor: help;
+ text-decoration: underline dotted;
+ text-underline-offset: 2px;
+}
+
sub,
sup {
position: relative;
Launch operations software
+Ship the ops layer without the redesign tax.
++ Northline gives growing teams a calm control plane for releases, + incidents, and handoffs — styled entirely with launch.css. +
++ + See how it works +
+
+
+
+
+
+
+
+
+
+ Release checklists
++ Turn tribal knowledge into repeatable launch steps with + owners and due times. +
+Incident timelines
++ Capture what changed, who acted, and what customers saw — + without another status page. +
+Handoff rooms
++ Keep support, eng, and success aligned with one shared + source of truth. +
+A week in production
+-
+
-
+
+ Connect your stack
+
Import services, on-call rotations, and release channels.
+
+ -
+
+ Run the first checklist
+
Ship behind a flag with a guided launch path.
+
+ -
+
+ Review the timeline
+
Export the incident story for your next postmortem.
+
+
Simple pricing
+
+
+
+
+
+
+ Starter
+$29 / seat / month
+-
+
- 3 workspaces +
- Checklist templates +
- Email support +
Scale
+$59 / seat / month
+-
+
- Unlimited workspaces +
- Incident timelines +
- Priority support +
FAQ
+
+
+ Do I need class names?
++ No. This entire page is semantic HTML plus ARIA attributes + styled by launch.css. +
+
+
+ Can I theme it?
+
+ Yes. Use color-scheme and CSS variables — or
+ try the Theme Builder on the docs site.
+
+
+ Is this a real product?
++ Northline is a fictional example built to demonstrate + website layout patterns. +
+