@syncedco/flow 0.1.0

package/skills/synced-flow/SKILL.md

@@ -0,0 +1,151 @@
+---
+name: synced-flow
+description: Use Synced Flow to set up and build modern fluid CSS systems with the CLI, tokens, presets, WordPress support, and source-scanned utility CSS.
+---
+
+# Synced Flow
+
+Use this skill when a project uses, evaluates, installs, migrates to, or
+generates UI with Synced Flow.
+
+Synced Flow is an independent modern fluid CSS system. It is not a Tailwind
+copy, compatibility layer, or one-for-one replacement. Tailwind references
+should only support migration from existing projects.
+
+## First Moves
+
+1. Check whether `@syncedco/flow` is installed.
+2. Check for `synced-flow.config.mjs`.
+3. Run or recommend `synced-flow agents status` to see whether project-level
+   guidance is installed.
+4. Run or recommend `synced-flow catalog --json` before choosing recipes and
+   class names.
+5. Use `synced-flow pattern --list` and `synced-flow pattern <id> --markup`
+   before hand-rolling native interaction markup.
+6. Use `synced-flow suggest "<brief>"` or
+   `synced-flow suggest "<brief>" --scaffold --dry-run` for section, page, or
+   starter composition.
+7. Use `synced-flow recipe <id> --markup` when a project needs copy-ready page
+   structure.
+8. Use `synced-flow lint --json` and `synced-flow doctor` to verify setup.
+9. Keep `responsiveVariants` off for new projects.
+
+## Setup
+
+Use the closest preset:
+
+```bash
+pnpm exec synced-flow init --preset next --agents
+pnpm exec synced-flow init --preset vite
+pnpm exec synced-flow init --preset astro
+pnpm exec synced-flow init --preset wordpress
+pnpm exec synced-flow init --preset plain
+```
+
+For an existing project, install project-local AI guidance:
+
+```bash
+pnpm exec synced-flow agents install
+pnpm exec synced-flow agents install --target all
+pnpm exec synced-flow agents status
+pnpm exec synced-flow skill
+```
+
+Use `--preset wordpress` for WordPress themes and plugins. It scans PHP and
+template files, enables `includeCore`, and writes an enqueue-ready CSS file at
+`assets/css/synced-flow.css`.
+
+## CSS Imports
+
+For simple bundled apps:
+
+```css
+@import "@syncedco/flow/styles.css";
+@import "@syncedco/flow/defaults.css";
+@import "./synced-flow.generated.css";
+```
+
+For smaller core loading, import only the layers needed:
+
+```css
+@import "@syncedco/flow/tokens.css";
+@import "@syncedco/flow/reset.css";
+@import "@syncedco/flow/base.css";
+@import "@syncedco/flow/defaults.css";
+@import "@syncedco/flow/layout.css";
+@import "@syncedco/flow/components.css";
+@import "./synced-flow.generated.css";
+```
+
+Leave out `components.css` if the project only uses tokens and layout
+primitives. Leave out `defaults.css` when content-style browser defaults should stay
+intact. Leave out `utilities.css` unless static helpers such as `sf-text-*`,
+`sf-prose`, `sr-only`, `not-sr-only`, `sf-skip-link`, `sf-focus-ring`,
+`sf-touch-target`, `sf-list-reset`, `sf-link`, or `sf-full-bleed` are used.
+
+## Styling Rules
+
+- Prefer primitives first: `sf-container`, `sf-section`, `sf-stack`,
+  `sf-cluster`, `sf-repel`, `sf-auto-grid`, `sf-split`, `sf-sidebar`,
+  `sf-frame`, and `sf-flow`.
+- Prefer component primitives for common UI: `sf-button`, `sf-card`,
+  `sf-badge`, `sf-field`, and `sf-input`.
+- Use `saas-landing` for public SaaS marketing pages. Use `saas-dashboard` for
+  authenticated app UI, admin panels, portals, CRMs, analytics dashboards,
+  metrics, tables, account menus, and login state.
+- Do not implement authentication logic in Synced Flow markup. Wire sessions,
+  providers, permissions, and sign-out actions in the consuming app.
+- Prefer native component patterns for common interaction: `sf-dialog`,
+  `sf-popover`, `sf-drawer`, `sf-drawer--stack`, `sf-disclosure`,
+  `sf-accordion`, `sf-tabs`, `sf-tooltip`, `sf-toast`, and `sf-banner`.
+- Use `synced-flow pattern mobile-nav-drawer --markup` for complete mobile nav
+  drawers instead of composing only `sf-nav--mobile`.
+- Use semantic utility classes such as `bg-background`, `text-foreground`,
+  `bg-primary`, `text-primary-foreground`, `border-border`, and `bg-surface`.
+- Keep browser affordances by default: body links stay underlined, content
+  lists keep markers, focus styles stay visible, and reduced-motion preferences
+  are respected.
+- Include `@syncedco/flow/defaults.css`, or run `synced-flow add defaults`, when a
+  site or app should remove raw link underlines and list markers globally.
+- Use `sr-only` / `not-sr-only`, `sf-skip-link`, `sf-focus-ring`,
+  `sf-touch-target`, `sf-list-reset`, `sf-link`, and `sf-link-plain` for
+  accessibility and explicit UI styling.
+- Put brand choices in `theme` config or theme presets rather than scattered
+  one-off CSS.
+- Use modern CSS techniques already in the system: cascade layers, custom
+  properties, logical properties, `clamp()`, OKLCH colour, container-aware
+  layout, and `prefers-reduced-motion`.
+- Keep class names complete in source files. Do not compose class names from
+  fragments.
+- Use `safelist` only when dynamic classes are unavoidable.
+
+## Migration Guidance
+
+When migrating from Tailwind, frame the work as migration guidance only.
+
+- Do not describe Synced Flow as a Tailwind clone or full replacement.
+- Use `responsiveVariants: true` only while migrating existing breakpoint
+  classes such as `sm:` or `lg:`.
+- Replace breakpoint-heavy layout with fluid primitives over time.
+- Move repeated visual decisions into tokens and theme config.
+
+## Finish Checklist
+
+Run:
+
+```bash
+pnpm flow:build
+pnpm flow:check
+pnpm exec synced-flow lint --json
+pnpm flow:doctor
+```
+
+For package or repo changes, also run:
+
+```bash
+pnpm check
+pnpm test
+pnpm pack --dry-run
+```
+
+If `doctor` warns about stale CSS, run `pnpm flow:build`.

package/src/config.ts

@@ -0,0 +1,98 @@
+type TokenMap = Record<string, string>
+
+export type SyncedFlowTheme = {
+  /**
+   * Project font stacks. Values should be complete CSS font-family values.
+   */
+  fonts?: Partial<Record<'sans' | 'display' | 'mono', string>>
+  /**
+   * Semantic colour tokens. Use OKLCH where possible.
+   */
+  colours?: TokenMap
+  /**
+   * Semantic colour overrides for .sf-theme-dark or [data-sf-theme="dark"].
+   */
+  darkColours?: TokenMap
+  /**
+   * Radius scale overrides such as md, lg, xl, full.
+   */
+  radii?: TokenMap
+  /**
+   * Layout-level tokens.
+   */
+  layout?: {
+    containerMax?: string
+    gutter?: string
+    columns?: number
+  }
+  /**
+   * Component-level token overrides.
+   */
+  components?: {
+    button?: {
+      radius?: string
+      blockSize?: string
+      paddingInline?: string
+    }
+    card?: {
+      radius?: string
+      padding?: string
+      shadow?: string
+    }
+    input?: {
+      radius?: string
+      blockSize?: string
+    }
+  }
+}
+
+export type SyncedFlowConfig = {
+  /**
+   * Directory used to resolve scan and output paths. Defaults to the current
+   * working directory.
+   */
+  cwd?: string
+  /**
+   * Source directories that the CLI scans for class tokens.
+   */
+  scan?: string[]
+  /**
+   * Class tokens to always generate when they are composed dynamically.
+   */
+  safelist?: string[]
+  /**
+   * Generated CSS output file.
+   */
+  out?: string
+  /**
+   * Project token overrides emitted into the generated CSS.
+   */
+  theme?: SyncedFlowTheme
+  /**
+   * Include reset, base, layout, and component CSS in the generated file.
+   * Most projects should import @syncedco/flow/styles.css and leave this false.
+   */
+  includeCore?: boolean
+  /**
+   * Include site/UI defaults when includeCore is true. For modular projects,
+   * import @syncedco/flow/defaults.css from the CSS entry instead.
+   */
+  includeDefaults?: boolean
+  /**
+   * Enable breakpoint-style variants such as sm:, md:, lg:, and xl:.
+   * Leave false for strict fluid projects; enable only during migrations.
+   */
+  responsiveVariants?: boolean
+  /**
+   * Fail the CLI when unsupported class tokens are detected.
+   */
+  failOnUnsupported?: boolean
+  /**
+   * Suppress non-critical CLI warnings.
+   */
+  quiet?: boolean
+}
+
+export function defineConfig(config: SyncedFlowConfig): SyncedFlowConfig {
+  return config
+}

package/src/index.ts

@@ -0,0 +1,75 @@
+export { defineConfig, type SyncedFlowConfig, type SyncedFlowTheme } from './config.js'
+export { presetNames, themePresets } from '../src/presets.mjs'
+
+export type ClassValue = string | number | boolean | null | undefined | ClassValue[] | Record<string, unknown>
+
+export function cx(...inputs: ClassValue[]) {
+  const classes: string[] = []
+
+  for (const input of inputs) appendClassValue(classes, input)
+
+  return classes.join(' ')
+}
+
+function appendClassValue(classes: string[], value: ClassValue): void {
+  if (!value) return
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    classes.push(String(value))
+    return
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) appendClassValue(classes, item)
+    return
+  }
+
+  if (typeof value === 'object') {
+    for (const [className, enabled] of Object.entries(value)) {
+      if (enabled) classes.push(className)
+    }
+  }
+}
+
+export const fluidSystem = {
+  layout: {
+    container: 'sf-container',
+    section: 'sf-section',
+    stack: 'sf-stack',
+    cluster: 'sf-cluster',
+    repel: 'sf-repel',
+    grid: 'sf-grid',
+    autoGrid: 'sf-auto-grid',
+    sidebar: 'sf-sidebar',
+    switcher: 'sf-switcher',
+    frame: 'sf-frame',
+    cover: 'sf-cover',
+    flow: 'sf-flow',
+  },
+  components: {
+    button: 'sf-button',
+    card: 'sf-card',
+    badge: 'sf-badge',
+    field: 'sf-field',
+    input: 'sf-input',
+  },
+  utilities: {
+    visuallyHidden: 'sf-visually-hidden',
+    notVisuallyHidden: 'sf-not-visually-hidden',
+    srOnly: 'sr-only',
+    notSrOnly: 'not-sr-only',
+    skipLink: 'sf-skip-link',
+    focusRing: 'sf-focus-ring',
+    focusRingInset: 'sf-focus-ring-inset',
+    touchTarget: 'sf-touch-target',
+    listReset: 'sf-list-reset',
+    listDisc: 'sf-list-disc',
+    listDecimal: 'sf-list-decimal',
+    link: 'sf-link',
+    linkSubtle: 'sf-link-subtle',
+    linkPlain: 'sf-link-plain',
+    prose: 'sf-prose',
+  },
+} as const
+
+export type FluidSystem = typeof fluidSystem

package/src/presets.d.mts

@@ -0,0 +1,21 @@
+export type SyncedFlowThemePreset = {
+  fonts?: Record<string, string>
+  colours?: Record<string, string>
+  darkColours?: Record<string, string>
+  radii?: Record<string, string>
+  layout?: {
+    containerMax?: string
+    gutter?: string
+    columns?: number
+  }
+  components?: Record<string, Record<string, string>>
+}
+
+export declare const themePresets: {
+  synced: SyncedFlowThemePreset
+  neutralSaas: SyncedFlowThemePreset
+  editorial: SyncedFlowThemePreset
+  darkApp: SyncedFlowThemePreset
+}
+
+export declare const presetNames: string[]

package/src/presets.mjs

@@ -0,0 +1,171 @@
+export const themePresets = {
+  synced: {
+    fonts: {
+      sans: 'Inter, ui-sans-serif, system-ui, sans-serif',
+      display: 'Fraunces, Georgia, serif',
+    },
+    colours: {
+      background: 'oklch(98.6% 0.006 80)',
+      foreground: 'oklch(18% 0.026 250)',
+      muted: 'oklch(45% 0.018 236)',
+      surface: 'oklch(100% 0 0)',
+      surfaceAlt: 'oklch(96.4% 0.011 80)',
+      border: 'oklch(18% 0.026 250 / 0.12)',
+      primary: 'oklch(68% 0.18 44)',
+      primaryHover: 'oklch(60% 0.17 42)',
+      primaryForeground: 'oklch(100% 0 0)',
+      accent: 'oklch(70% 0.12 205)',
+      link: 'oklch(58% 0.17 42)',
+      linkHover: 'oklch(68% 0.18 44)',
+      ring: 'oklch(68% 0.18 44)',
+    },
+    components: {
+      button: {
+        radius: '0.5rem',
+        blockSize: '2.75rem',
+        paddingInline: 'var(--sf-space-s)',
+      },
+      card: {
+        radius: '0.75rem',
+        padding: 'var(--sf-space-m-l)',
+      },
+      input: {
+        radius: '0.5rem',
+        blockSize: '2.75rem',
+      },
+    },
+  },
+  neutralSaas: {
+    fonts: {
+      sans: 'Inter, ui-sans-serif, system-ui, sans-serif',
+      display: 'Inter, ui-sans-serif, system-ui, sans-serif',
+    },
+    colours: {
+      background: 'oklch(98.5% 0.002 247)',
+      foreground: 'oklch(20.8% 0.042 265)',
+      muted: 'oklch(44.6% 0.043 257)',
+      surface: 'oklch(100% 0 0)',
+      surfaceAlt: 'oklch(96.8% 0.007 247)',
+      border: 'oklch(20.8% 0.042 265 / 0.12)',
+      primary: 'oklch(52% 0.14 250)',
+      primaryHover: 'oklch(44% 0.13 250)',
+      primaryForeground: 'oklch(100% 0 0)',
+      accent: 'oklch(70% 0.12 205)',
+      link: 'oklch(45% 0.13 250)',
+      linkHover: 'oklch(52% 0.14 250)',
+      ring: 'oklch(52% 0.14 250)',
+    },
+    layout: {
+      containerMax: '76rem',
+      gutter: 'var(--sf-space-s-l)',
+    },
+    components: {
+      button: {
+        radius: '0.5rem',
+        blockSize: '2.625rem',
+      },
+      card: {
+        radius: '0.625rem',
+      },
+      input: {
+        radius: '0.5rem',
+        blockSize: '2.625rem',
+      },
+    },
+  },
+  editorial: {
+    fonts: {
+      sans: 'Inter, ui-sans-serif, system-ui, sans-serif',
+      display: 'Fraunces, Georgia, serif',
+    },
+    colours: {
+      background: 'oklch(97% 0.018 78)',
+      foreground: 'oklch(18% 0.022 55)',
+      muted: 'oklch(43% 0.02 65)',
+      surface: 'oklch(100% 0 0)',
+      surfaceAlt: 'oklch(94% 0.02 80)',
+      border: 'oklch(18% 0.022 55 / 0.14)',
+      primary: 'oklch(58% 0.17 42)',
+      primaryHover: 'oklch(50% 0.16 40)',
+      primaryForeground: 'oklch(100% 0 0)',
+      accent: 'oklch(62% 0.13 150)',
+      link: 'oklch(50% 0.16 40)',
+      linkHover: 'oklch(58% 0.17 42)',
+      ring: 'oklch(58% 0.17 42)',
+    },
+    layout: {
+      containerMax: '72rem',
+      gutter: 'var(--sf-space-m-l)',
+    },
+    components: {
+      button: {
+        radius: '999rem',
+        blockSize: '2.75rem',
+      },
+      card: {
+        radius: '0.5rem',
+        padding: 'var(--sf-space-l)',
+      },
+      input: {
+        radius: '0.375rem',
+      },
+    },
+  },
+  darkApp: {
+    fonts: {
+      sans: 'Inter, ui-sans-serif, system-ui, sans-serif',
+      display: 'Inter, ui-sans-serif, system-ui, sans-serif',
+    },
+    colours: {
+      background: 'oklch(13.5% 0.03 252)',
+      foreground: 'oklch(96% 0.008 86)',
+      muted: 'oklch(78% 0.012 86)',
+      surface: 'oklch(18% 0.026 250)',
+      surfaceAlt: 'oklch(22% 0.024 248)',
+      border: 'oklch(100% 0 0 / 0.14)',
+      primary: 'oklch(70% 0.12 205)',
+      primaryHover: 'oklch(76% 0.12 205)',
+      primaryForeground: 'oklch(13.5% 0.03 252)',
+      accent: 'oklch(68% 0.18 44)',
+      link: 'oklch(76% 0.12 205)',
+      linkHover: 'oklch(82% 0.1 205)',
+      ring: 'oklch(70% 0.12 205)',
+    },
+    darkColours: {
+      background: 'oklch(13.5% 0.03 252)',
+      foreground: 'oklch(96% 0.008 86)',
+      muted: 'oklch(78% 0.012 86)',
+      subtle: 'oklch(68% 0.012 86)',
+      surface: 'oklch(18% 0.026 250)',
+      surfaceAlt: 'oklch(22% 0.024 248)',
+      surfaceRaised: 'oklch(21% 0.028 250)',
+      surfaceInset: 'oklch(15% 0.03 252)',
+      border: 'oklch(100% 0 0 / 0.14)',
+      borderStrong: 'oklch(100% 0 0 / 0.24)',
+      primarySoft: 'oklch(70% 0.12 205 / 0.16)',
+      primarySoftBorder: 'oklch(70% 0.12 205 / 0.32)',
+      link: 'oklch(76% 0.12 205)',
+      linkHover: 'oklch(82% 0.1 205)',
+      ring: 'oklch(70% 0.12 205)',
+    },
+    layout: {
+      containerMax: '80rem',
+      gutter: 'var(--sf-space-s-l)',
+    },
+    components: {
+      button: {
+        radius: '0.5rem',
+        blockSize: '2.625rem',
+      },
+      card: {
+        radius: '0.75rem',
+      },
+      input: {
+        radius: '0.5rem',
+        blockSize: '2.625rem',
+      },
+    },
+  },
+}
+
+export const presetNames = Object.keys(themePresets)

package/src/tokens.mjs

@@ -0,0 +1,138 @@
+export const fluidConfig = {
+  minViewport: 360,
+  maxViewport: 1536,
+  minRoot: 16,
+  maxRoot: 18,
+  minTypeScale: 1.2,
+  maxTypeScale: 1.25,
+  typeMinStep: -2,
+  typeMaxStep: 8,
+  gridColumns: 12,
+  gridMaxWidthRem: 90,
+}
+
+export const primitiveTokens = {
+  fonts: {
+    sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    display: 'Fraunces, Georgia, "Times New Roman", serif',
+    mono: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace',
+  },
+  colours: {
+    neutral0: 'oklch(100% 0 0)',
+    neutral50: 'oklch(98.6% 0.006 80)',
+    neutral100: 'oklch(96.4% 0.011 80)',
+    neutral200: 'oklch(90.8% 0.014 78)',
+    neutral300: 'oklch(82% 0.018 76)',
+    neutral400: 'oklch(68% 0.018 246)',
+    neutral500: 'oklch(53% 0.018 244)',
+    neutral600: 'oklch(43% 0.02 244)',
+    neutral700: 'oklch(34% 0.02 244)',
+    neutral800: 'oklch(27% 0.022 246)',
+    neutral850: 'oklch(22% 0.024 248)',
+    neutral900: 'oklch(18% 0.026 250)',
+    neutral950: 'oklch(13.5% 0.03 252)',
+    amber500: 'oklch(78% 0.15 82)',
+    amber700: 'oklch(54% 0.13 74)',
+    orange500: 'oklch(74% 0.17 48)',
+    orange600: 'oklch(68% 0.18 44)',
+    orange700: 'oklch(58% 0.17 42)',
+    green500: 'oklch(62% 0.13 150)',
+    green600: 'oklch(54% 0.13 150)',
+    green700: 'oklch(44% 0.12 150)',
+    cyan500: 'oklch(70% 0.12 205)',
+    cyan600: 'oklch(58% 0.12 210)',
+    blue600: 'oklch(52% 0.14 250)',
+    red600: 'oklch(56% 0.2 28)',
+    red700: 'oklch(47% 0.19 28)',
+  },
+  radii: {
+    none: '0',
+    xs: '0.25rem',
+    sm: '0.375rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+    xl: '1rem',
+    '2xl': '1.25rem',
+    '3xl': '1.5rem',
+    full: '999rem',
+  },
+  shadows: {
+    sm: '0 0.125rem 0.375rem oklch(0% 0 0 / 0.08)',
+    md: '0 0.75rem 1.75rem oklch(0% 0 0 / 0.12)',
+    lg: '0 1.25rem 3rem oklch(0% 0 0 / 0.16)',
+    xl: '0 1.75rem 4rem oklch(0% 0 0 / 0.18)',
+    inset: 'inset 0 0 0 1px var(--sf-colour-border)',
+    glow: '0 0 2rem oklch(68% 0.18 44 / 0.24)',
+  },
+}
+
+export const semanticTokens = {
+  colours: {
+    background: 'var(--sf-colour-neutral-50)',
+    foreground: 'var(--sf-colour-neutral-900)',
+    muted: 'var(--sf-colour-neutral-700)',
+    subtle: 'var(--sf-colour-neutral-500)',
+    surface: 'var(--sf-colour-neutral-0)',
+    surfaceAlt: 'var(--sf-colour-neutral-100)',
+    surfaceRaised: 'var(--sf-colour-neutral-0)',
+    surfaceInset: 'var(--sf-colour-neutral-100)',
+    border: 'oklch(18% 0.026 250 / 0.12)',
+    borderStrong: 'oklch(18% 0.026 250 / 0.22)',
+    primary: 'var(--sf-colour-orange-600)',
+    primaryHover: 'var(--sf-colour-orange-700)',
+    primaryForeground: 'var(--sf-colour-neutral-0)',
+    primarySoft: 'oklch(68% 0.18 44 / 0.12)',
+    primarySoftBorder: 'oklch(68% 0.18 44 / 0.28)',
+    link: 'var(--sf-colour-orange-700)',
+    linkHover: 'var(--sf-colour-orange-600)',
+    accent: 'var(--sf-colour-cyan-500)',
+    accentForeground: 'var(--sf-colour-neutral-950)',
+    success: 'var(--sf-colour-green-500)',
+    successForeground: 'var(--sf-colour-neutral-0)',
+    successSoft: 'oklch(62% 0.13 150 / 0.12)',
+    warning: 'var(--sf-colour-amber-500)',
+    warningForeground: 'var(--sf-colour-neutral-950)',
+    warningSoft: 'oklch(78% 0.15 82 / 0.16)',
+    danger: 'var(--sf-colour-red-600)',
+    dangerForeground: 'var(--sf-colour-neutral-0)',
+    dangerSoft: 'oklch(56% 0.2 28 / 0.12)',
+    info: 'var(--sf-colour-cyan-600)',
+    infoForeground: 'var(--sf-colour-neutral-0)',
+    infoSoft: 'oklch(70% 0.12 205 / 0.14)',
+    ring: 'var(--sf-colour-orange-600)',
+  },
+}
+
+export const componentTokens = {
+  button: {
+    radius: 'var(--sf-radius-md)',
+    blockSize: '2.75rem',
+    paddingInline: 'var(--sf-space-s)',
+  },
+  card: {
+    radius: 'var(--sf-radius-lg)',
+    padding: 'var(--sf-space-m-l)',
+  },
+  input: {
+    radius: 'var(--sf-radius-md)',
+    blockSize: '2.75rem',
+    paddingInline: 'var(--sf-space-s)',
+    border: 'var(--sf-colour-border)',
+    background: 'var(--sf-colour-surface)',
+  },
+  alert: {
+    radius: 'var(--sf-radius-lg)',
+    padding: 'var(--sf-space-s-m)',
+  },
+  nav: {
+    gap: 'var(--sf-space-xs-s)',
+    linkRadius: 'var(--sf-radius-sm)',
+  },
+}
+
+export const tokens = {
+  fluidConfig,
+  primitiveTokens,
+  semanticTokens,
+  componentTokens,
+}

package/src/utility-tokens.mjs

@@ -0,0 +1,47 @@
+export const fluidConfig = {
+  minViewport: 360,
+  maxViewport: 1536,
+  minRoot: 16,
+  maxRoot: 18,
+  minTypeScale: 1.2,
+  maxTypeScale: 1.25,
+  typeMinStep: -2,
+  typeMaxStep: 8,
+  gridColumns: 12,
+  gridMaxWidthRem: 90,
+  radii: {
+    none: '0',
+    xs: '0.25rem',
+    sm: '0.375rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+    xl: '1rem',
+    '2xl': '1.25rem',
+    '3xl': '1.5rem',
+    full: '999rem',
+  },
+  colours: {
+    ink950: 'oklch(14% 0.025 248)',
+    ink900: 'oklch(18% 0.024 246)',
+    ink800: 'oklch(24% 0.022 244)',
+    ink700: 'oklch(34% 0.02 240)',
+    ink600: 'oklch(45% 0.018 236)',
+    ink500: 'oklch(56% 0.015 232)',
+    paper: 'oklch(98.6% 0.014 78)',
+    paperAlt: 'oklch(96.6% 0.018 82)',
+    surface: 'oklch(99% 0.004 90)',
+    surfaceAlt: 'oklch(96% 0.015 80)',
+    orange700: 'oklch(58% 0.17 44)',
+    orange600: 'oklch(69% 0.18 44)',
+    orange500: 'oklch(74% 0.17 48)',
+    orangeSoft: 'oklch(69% 0.18 44 / 0.1)',
+    green700: 'oklch(45% 0.12 148)',
+    green600: 'oklch(55% 0.12 148)',
+    green100: 'oklch(90% 0.06 148)',
+    blue600: 'oklch(50% 0.13 236)',
+    purple600: 'oklch(55% 0.2 280)',
+    red600: 'oklch(55% 0.2 28)',
+    white: 'oklch(100% 0 0)',
+    black: 'oklch(0% 0 0)',
+  },
+}