@syncedco/flow 0.1.0

package/docs/website-patterns.md

@@ -0,0 +1,114 @@
+# Website Patterns
+
+Synced Flow pattern classes cover common website sections without turning the
+system into a large utility framework. Use them as semantic building blocks, then
+override tokens for brand-specific decisions.
+
+## Pattern Classes
+
+| Class | Purpose |
+| --- | --- |
+| `sf-logo-cloud` | Wraps partner, client, or integration names/logos. |
+| `sf-feature`, `sf-feature__icon`, `sf-feature__title`, `sf-feature__text` | Feature or benefit blocks. |
+| `sf-stats`, `sf-stat`, `sf-stat__value`, `sf-stat__label` | Metric and proof sections. |
+| `sf-testimonial`, `sf-testimonial__quote`, `sf-testimonial__meta` | Customer quote blocks. |
+| `sf-pricing-grid`, `sf-price-card`, `sf-price`, `sf-price__value`, `sf-price__interval` | Pricing sections. |
+| `sf-faq`, `sf-faq__item` | Native `details`/`summary` FAQ sections. |
+| `sf-cta` | Call-to-action block. Add `data-layout="split"` for a two-column CTA when space allows. |
+| `sf-footer` | Footer region with tokenized spacing and top border. |
+
+These patterns are intentionally broad. They provide enough structure for a
+developer to ship a normal website while leaving project-specific visual details
+to semantic tokens and local CSS.
+
+## Feature Grid
+
+```html
+<section class="sf-section">
+  <div class="sf-container sf-stack sf-stack--loose">
+    <div class="sf-section-header">
+      <p class="sf-kicker">Features</p>
+      <h2>Reusable sections without page CSS.</h2>
+    </div>
+
+    <div class="sf-auto-grid">
+      <article class="sf-feature">
+        <span class="sf-feature__icon" aria-hidden="true">1</span>
+        <h3 class="sf-feature__title">Fluid defaults</h3>
+        <p class="sf-feature__text">Type, spacing, and surfaces adapt from shared tokens.</p>
+      </article>
+    </div>
+  </div>
+</section>
+```
+
+## Proof Section
+
+```html
+<div class="sf-logo-cloud" aria-label="Trusted by">
+  <span>Studio</span>
+  <span>Agency</span>
+  <span>Startup</span>
+</div>
+
+<div class="sf-stats">
+  <div class="sf-stat">
+    <p class="sf-stat__value">10.5 KB</p>
+    <p class="sf-stat__label">Full core gzip size</p>
+  </div>
+</div>
+
+<figure class="sf-testimonial">
+  <blockquote class="sf-testimonial__quote">"Custom CSS is reserved for brand moments."</blockquote>
+  <figcaption class="sf-testimonial__meta">Example client</figcaption>
+</figure>
+```
+
+## Pricing And FAQ
+
+```html
+<div class="sf-pricing-grid">
+  <article class="sf-price-card sf-price-card--featured">
+    <p class="sf-badge">Most useful</p>
+    <h3 class="sf-card__title">Website</h3>
+    <div class="sf-price">
+      <span class="sf-price__value">£49</span>
+      <span class="sf-price__interval">project</span>
+    </div>
+    <p class="sf-card__description">Patterns, docs, and examples for a complete site.</p>
+    <a class="sf-button sf-button--default sf-button--block" href="/contact">Start</a>
+  </article>
+</div>
+
+<div class="sf-faq">
+  <details class="sf-faq__item">
+    <summary>Is this a Tailwind replacement?</summary>
+    <p>No. Synced Flow uses named primitives and patterns for common website work.</p>
+  </details>
+</div>
+```
+
+## CTA And Footer
+
+```html
+<section class="sf-section">
+  <div class="sf-container">
+    <div class="sf-cta" data-layout="split">
+      <div class="sf-stack sf-stack--tight">
+        <h2>Ready to build?</h2>
+        <p class="sf-text-muted">Start with patterns, then customize tokens.</p>
+      </div>
+      <a class="sf-button" href="/contact">Start a project</a>
+    </div>
+  </div>
+</section>
+
+<footer class="sf-footer">
+  <div class="sf-container sf-repel">
+    <p class="sf-text-caption">Synced Flow</p>
+    <a class="sf-link" href="#main">Back to top</a>
+  </div>
+</footer>
+```
+
+See `examples/plain-html` for the complete website demo.

package/docs/why-synced-flow.md

@@ -0,0 +1,99 @@
+# Why Synced Flow?
+
+AI can build front ends quickly. The harder problem is keeping those front ends consistent once a project has more than one page, one template, one developer, or one coding agent.
+
+Synced Flow exists for that gap.
+
+It gives humans and AI coding agents a shared CSS contract: tokens, fluid scales, layout primitives, website recipes, accessibility defaults, and CLI checks that keep the work inside the system.
+
+## The problem
+
+Most websites do not become inconsistent all at once.
+
+They drift.
+
+One section gets a custom spacing value. Another gets a one-off colour. A third gets a breakpoint patch because the first two nearly worked. AI-assisted development can make that drift happen faster because it is very good at generating plausible CSS.
+
+Plausible is not the same as systemised.
+
+Synced Flow is designed to reduce the number of styling decisions made from scratch during a build.
+
+## The position
+
+Synced Flow is not trying to be a Tailwind clone, a Bootstrap replacement, or a React component library.
+
+It is an AI-native fluid CSS design system for brand-consistent websites and agency builds.
+
+Use it when you want:
+
+- fluid type and spacing before breakpoint patches
+- brand tokens before one-off colours
+- layout primitives before custom wrappers
+- accessible defaults before decorative resets
+- source-scanned utilities before shipping a large universal stylesheet
+- project-local agent guidance before asking AI to guess the styling rules
+
+## What it gives an AI coding agent
+
+Most CSS frameworks document for humans. Synced Flow also gives coding agents a discoverable styling contract.
+
+Useful surfaces include:
+
+- `catalog --json` for machine-readable class and token discovery
+- `suggest` for finding matching primitives and recipes
+- `recipe` and `pattern` for generating known page sections
+- `lint` for spotting drift from the system
+- `doctor` for setup checks
+- `agents install` for adding project-local AI guidance
+- a packaged Synced Flow skill for coding agents that support skill files
+
+The result is not magic. It is constraint.
+
+The agent gets fewer opportunities to invent a second design system inside the first one.
+
+## What it gives agencies
+
+Agencies need systems that work across real client projects, not just React demos.
+
+Synced Flow supports:
+
+- WordPress themes and plugins
+- PHP and template scanning
+- enqueue-ready CSS output
+- Next
+- Astro
+- Vite
+- plain HTML
+- reusable website patterns
+
+That makes it useful for brand-led websites, local business sites, campaign pages, portfolios, SaaS landing pages, and agency delivery systems.
+
+## What it gives developers
+
+Synced Flow gives developers a practical CSS foundation with modern defaults:
+
+- CSS custom properties
+- cascade layers
+- OKLCH colour tokens
+- `clamp()` based fluid scales
+- logical properties
+- container-aware layout primitives
+- reduced-motion safeguards
+- visible focus states
+- modular CSS exports
+- generated utilities based on real project usage
+
+You can import the full stylesheet for speed, or import only the layers a project needs.
+
+## Comparison in one line
+
+- Tailwind gives you utilities.
+- Bootstrap gives you a complete responsive toolkit.
+- shadcn/ui gives you owned components.
+- Synced Flow gives you an owned, fluid, agent-readable CSS system for brand-consistent websites.
+
+## The practical promise
+
+Build quickly without handing every spacing, colour, and responsive decision to a blank page.
+
+That is the point of Synced Flow.

package/docs/wordpress.md

@@ -0,0 +1,66 @@
+# WordPress
+
+Synced Flow can be used in WordPress themes and plugins without asking
+WordPress to resolve npm CSS imports in the browser.
+
+## Setup
+
+```bash
+pnpm add @syncedco/flow
+pnpm exec synced-flow init --preset wordpress
+pnpm flow:build
+```
+
+The WordPress preset:
+
+- scans `templates`, `parts`, `patterns`, `blocks`, `inc`, `includes`, `src`,
+  and `assets` when those folders exist
+- scans PHP, HTML, JS, TS, JSX, TSX, Twig, Vue, Svelte, Astro, and MDX files
+- enables `includeCore`
+- writes `assets/css/synced-flow.css`
+
+See [`examples/wordpress`](../examples/wordpress) for a lean block theme style
+template with `theme.json`, template parts, PHP patterns, enqueue code, and an
+enqueue-ready generated CSS output.
+
+## Example Structure
+
+```text
+examples/wordpress/
+  functions.php
+  theme.json
+  synced-flow.config.mjs
+  assets/css/synced-flow.css
+  parts/header.html
+  parts/footer.html
+  templates/front-page.html
+  templates/index.html
+  patterns/landing-hero.php
+  patterns/feature-grid.php
+  patterns/contact-cta.php
+```
+
+## Enqueue
+
+```php
+wp_enqueue_style(
+  'synced-flow',
+  get_theme_file_uri('assets/css/synced-flow.css'),
+  [],
+  wp_get_theme()->get('Version')
+);
+```
+
+For plugins, use `plugins_url()` or `plugin_dir_url()` instead of
+`get_theme_file_uri()`.
+
+## Dynamic Classes
+
+Synced Flow generates utility CSS from complete class tokens. Keep class names
+complete in PHP and templates.
+
+```php
+<section class="sf-section text-primary">
+```
+
+When a class is composed dynamically, add the full class to `safelist`.

package/examples/README.md

@@ -0,0 +1,16 @@
+# Examples
+
+These examples show the intended starting point for new projects.
+
+- `next` - Next.js App Router setup
+- `astro` - Astro content-site setup
+- `vite` - Vite React setup
+- `plain-html` - no framework setup with a complete website demo using only
+  Synced Flow primitives for header, hero, content, cards, form, notice, and footer
+- `templates` - copy-ready full-page HTML templates for SaaS, portfolio, blog,
+  and coming soon pages
+- `wordpress` - block theme style setup with enqueue code, templates, parts,
+  and PHP patterns
+
+Each example uses `synced-flow.config.mjs`, imports a single CSS entry file,
+and keeps `responsiveVariants` off.

package/examples/astro/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "synced-flow-astro-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "flow:build": "synced-flow build",
+    "flow:check": "synced-flow build --check",
+    "flow:lint": "synced-flow lint",
+    "flow:watch": "synced-flow watch",
+    "flow:doctor": "synced-flow doctor"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.0",
+    "@syncedco/flow": "file:../..",
+    "astro": "^5.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/examples/astro/src/pages/index.astro

@@ -0,0 +1,85 @@
+---
+import '../styles/synced-flow.css'
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Synced Flow Astro Example</title>
+  </head>
+  <body>
+    <header class="sf-section sf-section--compact sf-sticky-top sf-bg-background">
+      <nav class="sf-container sf-nav" aria-label="Main navigation">
+        <a class="sf-nav__link" href="#home">Studio</a>
+        <ul class="sf-nav__list">
+          <li><a class="sf-nav__link" href="#articles">Articles</a></li>
+          <li><a class="sf-nav__link" href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main id="home">
+      <section class="sf-section">
+        <div class="sf-container sf-stack">
+          <p class="sf-badge">Astro template</p>
+          <h1 class="sf-text-display">A content site from native CSS primitives.</h1>
+          <p class="sf-text-lead sf-prose">
+            Replace these sections with project content. The layout, typography, cards, navigation, and form styling come from Synced Flow.
+          </p>
+          <div class="sf-cluster">
+            <a class="sf-button sf-button--default" href="#contact">Start a project</a>
+            <a class="sf-button sf-button--outline" href="#articles">Read articles</a>
+          </div>
+        </div>
+      </section>
+
+      <section id="articles" class="sf-section">
+        <div class="sf-container sf-stack">
+          <div class="sf-section-header">
+            <p class="sf-kicker">Articles</p>
+            <h2 class="sf-text-h2">Blog cards and article metadata without custom CSS.</h2>
+          </div>
+          <div class="sf-auto-grid">
+            <article class="sf-card sf-card--interactive sf-stack">
+              <p class="sf-meta">Guide · 5 min read</p>
+              <h3 class="sf-text-h4">Theme from reusable tokens</h3>
+              <p class="sf-text-muted">Keep brand choices in config before adding project CSS.</p>
+            </article>
+            <article class="sf-card sf-card--interactive sf-stack">
+              <p class="sf-meta">Pattern · 3 min read</p>
+              <h3 class="sf-text-h4">Native disclosure and tabs</h3>
+              <p class="sf-text-muted">Use browser primitives first and add optional JS only when needed.</p>
+            </article>
+            <article class="sf-card sf-card--interactive sf-stack">
+              <p class="sf-meta">Recipe · 4 min read</p>
+              <h3 class="sf-text-h4">Scroll panels</h3>
+              <p class="sf-text-muted">Create immersive panels with scroll snap and sticky layout classes.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section id="contact" class="sf-section">
+        <div class="sf-container sf-split">
+          <div class="sf-stack">
+            <p class="sf-kicker">Contact</p>
+            <h2 class="sf-text-h2">Ready for a real content workflow.</h2>
+            <p class="sf-prose">This example is deliberately complete enough for an AI agent to replace sections instead of inventing new styling.</p>
+          </div>
+          <form class="sf-form sf-card">
+            <label class="sf-field">
+              <span class="sf-label">Email</span>
+              <input class="sf-input" type="email" placeholder="you@example.com" />
+            </label>
+            <label class="sf-field">
+              <span class="sf-label">Project</span>
+              <textarea class="sf-textarea" rows="4" placeholder="Tell us about the site."></textarea>
+            </label>
+            <button class="sf-button sf-button--default" type="submit">Send</button>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/examples/astro/src/styles/synced-flow.css

@@ -0,0 +1,2 @@
+@import "@syncedco/flow/styles.css";
+@import "./synced-flow.generated.css";

package/examples/astro/src/styles/synced-flow.generated.css

@@ -0,0 +1,206 @@
+/* Generated by @syncedco/flow. Edit synced-flow.config.mjs or run synced-flow build to refresh. */
+
+@layer reset, tokens, base, app, layout, components, utilities, overrides;
+
+@layer tokens {
+  :root {
+    color-scheme: light;
+    --font-sans: var(--sf-font-sans, ui-sans-serif, system-ui, sans-serif);
+    --font-display: var(--sf-font-display, ui-serif, Georgia, serif);
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+
+    --step--2: clamp(0.6944rem, 0.6866rem + 0.0348vw, 0.72rem);
+    --step--1: clamp(0.8333rem, 0.8129rem + 0.0907vw, 0.9rem);
+    --step-0: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --step-1: clamp(1.2rem, 1.1369rem + 0.2806vw, 1.4063rem);
+    --step-2: clamp(1.44rem, 1.3427rem + 0.4324vw, 1.7578rem);
+    --step-3: clamp(1.728rem, 1.5843rem + 0.6385vw, 2.1973rem);
+    --step-4: clamp(2.0736rem, 1.8676rem + 0.9156vw, 2.7466rem);
+    --step-5: clamp(2.4883rem, 2.1991rem + 1.2856vw, 3.4332rem);
+    --step-6: clamp(2.986rem, 2.5863rem + 1.7763vw, 4.2915rem);
+    --step-7: clamp(3.5832rem, 3.0379rem + 2.4235vw, 5.3644rem);
+    --step-8: clamp(4.2998rem, 3.5634rem + 3.2731vw, 6.7055rem);
+
+    --space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
+    --space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
+    --space-xs: clamp(0.75rem, 0.7213rem + 0.1276vw, 0.8438rem);
+    --space-s: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --space-m: clamp(1.5rem, 1.4426rem + 0.2551vw, 1.6875rem);
+    --space-l: clamp(2rem, 1.9235rem + 0.3401vw, 2.25rem);
+    --space-xl: clamp(3rem, 2.8852rem + 0.5102vw, 3.375rem);
+    --space-2xl: clamp(4rem, 3.8469rem + 0.6803vw, 4.5rem);
+    --space-3xl: clamp(6rem, 5.7704rem + 1.0204vw, 6.75rem);
+    --space-4xl: clamp(8rem, 7.6939rem + 1.3605vw, 9rem);
+    --space-3xs-2xs: clamp(0.25rem, 0.1543rem + 0.4252vw, 0.5625rem);
+    --space-2xs-xs: clamp(0.5rem, 0.3948rem + 0.4677vw, 0.8438rem);
+    --space-xs-s: clamp(0.75rem, 0.6352rem + 0.5102vw, 1.125rem);
+    --space-s-m: clamp(1rem, 0.7895rem + 0.9354vw, 1.6875rem);
+    --space-m-l: clamp(1.5rem, 1.2704rem + 1.0204vw, 2.25rem);
+    --space-l-xl: clamp(2rem, 1.5791rem + 1.8707vw, 3.375rem);
+    --space-xl-2xl: clamp(3rem, 2.5408rem + 2.0408vw, 4.5rem);
+    --space-2xl-3xl: clamp(4rem, 3.1582rem + 3.7415vw, 6.75rem);
+    --space-s-l: clamp(1rem, 0.6173rem + 1.7007vw, 2.25rem);
+    --space-m-xl: clamp(1.5rem, 0.926rem + 2.551vw, 3.375rem);
+    --space-l-2xl: clamp(2rem, 1.2347rem + 3.4014vw, 4.5rem);
+
+    --grid-max-width: 90rem;
+    --grid-gutter: var(--space-s-l);
+    --grid-columns: 12;
+
+    --radius-none: 0;
+    --radius-xs: 0.25rem;
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-2xl: 1.25rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 999rem;
+    --radius: var(--radius-xl);
+
+    --color-ink-950: oklch(14% 0.025 248);
+    --color-ink-900: oklch(18% 0.024 246);
+    --color-ink-800: oklch(24% 0.022 244);
+    --color-ink-700: oklch(34% 0.02 240);
+    --color-ink-600: oklch(45% 0.018 236);
+    --color-ink-500: oklch(56% 0.015 232);
+    --color-paper: oklch(98.6% 0.014 78);
+    --color-paper-alt: oklch(96.6% 0.018 82);
+    --color-white: oklch(100% 0 0);
+    --color-black: oklch(0% 0 0);
+
+    --color-background: oklch(14% 0.025 248);
+    --color-foreground: oklch(96% 0.01 92);
+    --color-card: oklch(18% 0.024 246);
+    --color-card-foreground: oklch(96% 0.01 92);
+    --color-popover: oklch(18% 0.024 246);
+    --color-popover-foreground: oklch(96% 0.01 92);
+    --color-primary: oklch(69% 0.18 44);
+    --color-primary-hover: oklch(64% 0.18 44);
+    --color-primary-label: oklch(55% 0.18 44);
+    --color-primary-border: oklch(66% 0.17 43);
+    --color-primary-foreground: oklch(98% 0.01 95);
+    --color-secondary: oklch(24% 0.018 22);
+    --color-secondary-foreground: oklch(96% 0.01 92);
+    --color-muted: oklch(26% 0.012 24);
+    --color-muted-foreground: oklch(76% 0.01 92);
+    --color-accent: oklch(24% 0.018 22);
+    --color-accent-foreground: oklch(96% 0.01 92);
+    --color-destructive: oklch(55% 0.2 28);
+    --color-destructive-foreground: oklch(98% 0.01 95);
+    --color-border: oklch(100% 0 0 / 0.12);
+    --color-input: oklch(100% 0 0 / 0.12);
+    --color-ring: oklch(69% 0.18 44);
+    --color-heading: oklch(20% 0.02 18);
+    --color-page-text: oklch(23% 0.02 18);
+    --color-body: oklch(45% 0.02 28);
+    --color-body-dark: oklch(40% 0.02 28);
+    --color-subdued: oklch(42% 0.02 20);
+    --color-surface: oklch(96% 0.015 80);
+    --color-surface-alt: oklch(96.6% 0.018 82);
+    --color-hero-bg: oklch(8% 0.02 260);
+    --color-green: oklch(55% 0.12 148);
+    --color-green-dark: oklch(45% 0.12 148);
+    --color-green-muted: oklch(40% 0.12 148);
+    --color-green-light: oklch(90% 0.06 148);
+    --color-green-lighter: oklch(92% 0.04 148);
+    --color-green-bg: oklch(88% 0.07 148);
+    --color-green-bg-alt: oklch(82% 0.1 148);
+    --color-green-vivid: oklch(78% 0.08 148);
+    --color-green-mid: oklch(75% 0.12 148);
+    --color-green-deep: oklch(70% 0.14 150);
+    --color-green-deepest: oklch(60% 0.14 150);
+    --color-green-wash: oklch(93% 0.06 148);
+    --color-green-wash-alt: oklch(88% 0.08 148);
+    --color-green-gradient-from: oklch(82% 0.1 148);
+    --color-green-gradient-to: oklch(86% 0.06 148);
+    --color-deco-lime: oklch(80% 0.18 130);
+    --color-deco-blue: oklch(60% 0.12 240);
+    --color-deco-warm: oklch(80% 0.06 60);
+    --color-deco-warm-light: oklch(92% 0.02 80);
+    --color-deco-warm-mid: oklch(80% 0.15 60);
+    --color-purple-light: oklch(95% 0.05 280);
+    --color-purple-mid: oklch(92% 0.05 280);
+    --color-purple-dark: oklch(90% 0.06 280);
+    --color-purple-darker: oklch(87% 0.07 280);
+    --color-purple-icon: oklch(55% 0.2 280);
+    --color-warm-light: oklch(95.6% 0.05 22);
+    --color-warm-mid: oklch(95% 0.04 40);
+    --color-warm-grad-to: oklch(90% 0.08 30);
+    --color-warm-grad-to-alt: oklch(90% 0.06 30);
+    --color-warm-icon: oklch(60% 0.17 44);
+    --color-cool-light: oklch(92% 0.04 200);
+    --color-cool-dark: oklch(87% 0.06 200);
+    --color-primary-glow: oklch(80% 0.12 44);
+    --color-primary-soft: oklch(69% 0.18 44 / 0.10);
+    --color-primary-soft-border: oklch(69% 0.18 44 / 0.30);
+    --color-primary-soft-border-light: oklch(69% 0.18 44 / 0.25);
+    --color-primary-soft-text: oklch(85% 0.08 44);
+    --color-primary-highlight: oklch(75% 0.14 44);
+
+    --shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.06);
+    --shadow-md: 0 0.5rem 1.5rem oklch(0% 0 0 / 0.08);
+    --shadow-lg: 0 1rem 2rem oklch(0% 0 0 / 0.1);
+    --shadow-xl: 0 1.5rem 3rem oklch(0% 0 0 / 0.14);
+    --shadow-2xl: 0 2rem 4rem oklch(0% 0 0 / 0.18);
+    --shadow-primary-cta: 0 0.875rem 1.875rem oklch(69% 0.18 44 / 0.24);
+    --shadow-glow: 0 0 2rem oklch(69% 0.18 44 / 0.28);
+
+    --duration-fast: 150ms;
+    --duration-normal: 220ms;
+    --duration-slow: 360ms;
+    --ease-standard: cubic-bezier(.2, 0, 0, 1);
+  }
+}
+
+@layer tokens {
+  :root {
+    --sf-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --font-sans: var(--sf-font-sans);
+    --sf-font-display: Fraunces, Georgia, serif;
+    --font-display: var(--sf-font-display);
+    --sf-colour-background: oklch(97% 0.018 78);
+    --color-background: var(--sf-colour-background);
+    --sf-colour-foreground: oklch(18% 0.022 55);
+    --color-foreground: var(--sf-colour-foreground);
+    --sf-colour-muted: oklch(43% 0.02 65);
+    --color-muted: var(--sf-colour-muted);
+    --sf-colour-surface: oklch(100% 0 0);
+    --color-surface: var(--sf-colour-surface);
+    --sf-colour-surface-alt: oklch(94% 0.02 80);
+    --color-surface-alt: var(--sf-colour-surface-alt);
+    --sf-colour-border: oklch(18% 0.022 55 / 0.14);
+    --color-border: var(--sf-colour-border);
+    --sf-colour-primary: oklch(58% 0.17 42);
+    --color-primary: var(--sf-colour-primary);
+    --sf-colour-primary-hover: oklch(50% 0.16 40);
+    --color-primary-hover: var(--sf-colour-primary-hover);
+    --sf-colour-primary-foreground: oklch(100% 0 0);
+    --color-primary-foreground: var(--sf-colour-primary-foreground);
+    --sf-colour-accent: oklch(62% 0.13 150);
+    --color-accent: var(--sf-colour-accent);
+    --sf-colour-link: oklch(50% 0.16 40);
+    --color-link: var(--sf-colour-link);
+    --sf-colour-link-hover: oklch(58% 0.17 42);
+    --color-link-hover: var(--sf-colour-link-hover);
+    --sf-colour-ring: oklch(58% 0.17 42);
+    --color-ring: var(--sf-colour-ring);
+    --sf-container-max: 72rem;
+    --grid-max-width: 72rem;
+    --sf-gutter: var(--sf-space-m-l);
+    --grid-gutter: var(--sf-space-m-l);
+    --sf-button-radius: 999rem;
+    --button-radius: 999rem;
+    --sf-button-block-size: 2.75rem;
+    --button-size: 2.75rem;
+    --sf-card-radius: 0.5rem;
+    --card-radius: 0.5rem;
+    --sf-card-padding: var(--sf-space-l);
+    --sf-input-radius: 0.375rem;
+  }
+}
+
+@layer utilities {
+
+
+}

package/examples/astro/synced-flow.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from '@syncedco/flow/config'
+import { themePresets } from '@syncedco/flow/presets'
+
+export default defineConfig({
+  scan: ['src'],
+  out: 'src/styles/synced-flow.generated.css',
+  responsiveVariants: false,
+  theme: themePresets.editorial,
+})

package/examples/next/app/layout.tsx

@@ -0,0 +1,14 @@
+import './synced-flow.css'
+
+export const metadata = {
+  title: 'Synced Flow Next Example',
+  description: 'A strict-fluid Synced Flow starter.',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}