@paraxe/design 1.0.0

package/src/presets/local-business.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/local-business.css
+   LAYER 3 — PERSONALITY: Warm, approachable, community-rooted
+   Rubik display + Nunito Sans body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&family=Nunito+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Rubik", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-size-base: 1rem;
+  --space-4: 1rem;
+  --radius-md: 0.75rem;
+  --motion-duration-normal: 300ms;
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --shadow-elevation-low: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --glass-blur: 16px;
+  --button-radius: var(--radius-full);
+  --button-padding-x: 1.5rem;
+  --button-padding-y: 0.75rem;
+  --card-radius: var(--radius-xl);
+  --nav-height: 4.5rem;
+}

package/src/presets/minimal.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/minimal.css
+   LAYER 3 — PERSONALITY: Clean, airy, minimal
+   Outfit display + Karla body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800&family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Karla", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;
+  --font-weight-light: 200;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-size-base: 1rem;
+  --space-4: 1rem;
+  --radius-md: 0.375rem;
+  --motion-duration-normal: 300ms;
+  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --shadow-elevation-low: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --glass-blur: 16px;
+  --button-radius: var(--radius-md);
+  --button-padding-x: 1.25rem;
+  --button-padding-y: 0.625rem;
+  --card-radius: var(--radius-md);
+  --nav-height: 4rem;
+}

package/src/presets/premium.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/premium.css
+   LAYER 3 — PERSONALITY: Premium agency signature
+   Syne display + Manrope body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Syne", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-size-base: 1rem;
+  --space-4: 1rem;
+  --radius-md: 0.375rem;
+  --motion-duration-normal: 300ms;
+  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --shadow-elevation-low: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --glass-blur: 16px;
+  --button-radius: var(--radius-full);
+  --button-padding-x: 1.5rem;
+  --button-padding-y: 0.75rem;
+  --card-radius: var(--radius-lg);
+  --nav-height: 4.5rem;
+}

package/src/presets/tech.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/tech.css
+   LAYER 3 — PERSONALITY: Modern, precise, technical
+   Space Grotesk display + IBM Plex Sans body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-size-base: 1rem;
+  --space-4: 1rem;
+  --radius-md: 0.25rem;
+  --motion-duration-normal: 200ms;
+  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --shadow-elevation-low: 0 1px 3px rgba(0, 0, 0, 0.12);
+  --glass-blur: 12px;
+  --button-radius: var(--radius-base);
+  --button-padding-x: 1.25rem;
+  --button-padding-y: 0.5rem;
+  --card-radius: var(--radius-md);
+  --nav-height: 4rem;
+}

package/src/tailwind.css

@@ -0,0 +1,106 @@
+/* ==========================================================================
+   @loba/design — tailwind.css (optional bridge)
+
+   Maps Tailwind v4 `@theme` to the canonical Loba tokens.
+   Only import this when Tailwind v4 is used in a consumer project.
+
+   The canonical `:root` contract is defined in tokens.css / themes /
+   presets. This file only re-exposes those values as Tailwind utility
+   generators so `p-4`, `text-lg`, `rounded-md`, `shadow-md`, etc.
+   resolve against the Loba design tokens.
+   ========================================================================== */
+
+@theme {
+  /* ---- Spacing (maps Tailwind utilities → canonical tokens) ---- */
+  --spacing-0: var(--space-0);
+  --spacing-px: var(--space-px);
+  --spacing-0\.5: calc(var(--space-1) / 2);
+  --spacing-1: var(--space-1);
+  --spacing-1\.5: calc(var(--space-1) * 1.5);
+  --spacing-2: var(--space-2);
+  --spacing-2\.5: calc(var(--space-2) * 1.25);
+  --spacing-3: var(--space-3);
+  --spacing-3\.5: calc(var(--space-3) * 1.16667);
+  --spacing-4: var(--space-4);
+  --spacing-5: var(--space-5);
+  --spacing-6: var(--space-6);
+  --spacing-7: var(--space-7);
+  --spacing-8: var(--space-8);
+  --spacing-9: var(--space-9);
+  --spacing-10: var(--space-10);
+  --spacing-11: var(--space-11);
+  --spacing-12: var(--space-12);
+  --spacing-14: var(--space-14);
+  --spacing-16: var(--space-16);
+  --spacing-20: var(--space-20);
+  --spacing-24: var(--space-24);
+  --spacing-28: var(--space-28);
+  --spacing-32: var(--space-32);
+  --spacing-36: var(--space-36);
+  --spacing-40: var(--space-40);
+  --spacing-44: var(--space-44);
+  --spacing-48: var(--space-48);
+  --spacing-52: var(--space-52);
+  --spacing-56: var(--space-56);
+  --spacing-60: var(--space-60);
+  --spacing-64: var(--space-64);
+  --spacing-72: var(--space-72);
+  --spacing-80: var(--space-80);
+  --spacing-96: var(--space-96);
+
+  /* ---- Breakpoints ---- */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* ---- Typography ---- */
+  --font-sans: var(--font-family-body);
+  --font-display: var(--font-family-display);
+  --font-mono: var(--font-family-mono);
+
+  --text-xs: var(--font-size-xs);
+  --text-sm: var(--font-size-sm);
+  --text-base: var(--font-size-base);
+  --text-lg: var(--font-size-lg);
+  --text-xl: var(--font-size-xl);
+  --text-2xl: var(--font-size-2xl);
+  --text-3xl: var(--font-size-3xl);
+  --text-4xl: var(--font-size-4xl);
+  --text-5xl: var(--font-size-5xl);
+  --text-6xl: var(--font-size-6xl);
+  --text-7xl: var(--font-size-7xl);
+  --text-8xl: var(--font-size-8xl);
+  --text-9xl: var(--font-size-9xl);
+
+  --leading-tight: var(--line-height-tight);
+  --leading-snug: var(--line-height-snug);
+  --leading-normal: var(--line-height-normal);
+  --leading-relaxed: var(--line-height-relaxed);
+  --leading-loose: var(--line-height-loose);
+
+  /* ---- Radius ---- */
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+
+  /* ---- Shadows ---- */
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-inner: var(--shadow-inner);
+
+  /* ---- Motion ---- */
+  --ease-in: var(--motion-ease-in);
+  --ease-out: var(--motion-ease-out);
+  --ease-in-out: var(--motion-ease-in-out);
+  --ease-spring: var(--motion-ease-spring);
+  --animate-smooth: var(--motion-ease-smooth);
+}
+

package/src/themes/crimson.css

@@ -0,0 +1,45 @@
+/* ==========================================================================
+   @loba/design — themes/crimson.css
+   Bold — Crimson red (#d72638) on near-black (#120608)
+   LAYER 2 — COLOR TOKENS (consumes tokens.css)
+   ========================================================================== */
+
+@import "./default.css";
+
+:root {
+  --brand-primary: #d72638;
+  --brand-primary-hover: #b81f2f;
+  --brand-primary-active: #9a1a27;
+  --brand-primary-light: #e86a77;
+  --brand-primary-muted: color-mix(in srgb, #d72638 15%, transparent);
+  --brand-glow: color-mix(in srgb, #d72638 25%, transparent);
+  --text-on-brand: #ffffff;
+
+  --background-primary: #120608;
+  --background-secondary: color-mix(in srgb, #120608 92%, white);
+
+  --surface-base: color-mix(in srgb, #120608 92%, white);
+  --surface-raised: color-mix(in srgb, #120608 84%, white);
+  --surface-card: color-mix(in srgb, #120608 88%, white);
+  --surface-hover: color-mix(in srgb, #120608 84%, white);
+
+  --text-primary: color-mix(in srgb, #120608 4%, white);
+  --text-secondary: color-mix(in srgb, #120608 40%, white);
+  --text-muted: color-mix(in srgb, #120608 60%, white);
+  --text-inverse: color-mix(in srgb, white 96%, black);
+}
+
+[data-theme="light"] {
+  --background-primary: #ffffff;
+  --background-secondary: color-mix(in srgb, #ffffff 95%, black);
+
+  --surface-base: color-mix(in srgb, #ffffff 93%, black);
+  --surface-raised: color-mix(in srgb, #ffffff 86%, black);
+  --surface-card: color-mix(in srgb, #ffffff 97%, black);
+  --surface-hover: color-mix(in srgb, #ffffff 90%, black);
+
+  --text-primary: color-mix(in srgb, black 92%, white);
+  --text-secondary: color-mix(in srgb, black 70%, white);
+  --text-muted: color-mix(in srgb, black 55%, white);
+  --text-inverse: color-mix(in srgb, white 96%, black);
+}

package/src/themes/dark.css

@@ -0,0 +1,35 @@
+/* ==========================================================================
+   @loba/design — themes/dark.css
+   Deep space — Blue brand (#2563eb) on dark navy (#050816)
+   LAYER 2 — COLOR TOKENS (consumes tokens.css)
+   ========================================================================== */
+
+@import "./default.css";
+
+:root {
+  --brand-primary: #2563eb;
+  --brand-primary-hover: #1d4ed8;
+  --brand-primary-active: #1e40af;
+  --brand-primary-light: #60a5fa;
+  --brand-primary-muted: color-mix(in srgb, #2563eb 15%, transparent);
+  --brand-glow: color-mix(in srgb, #2563eb 25%, transparent);
+
+  --background-primary: #050816;
+  --background-secondary: color-mix(in srgb, #050816 92%, white);
+
+  --surface-base: color-mix(in srgb, #050816 92%, white);
+  --surface-raised: color-mix(in srgb, #050816 84%, white);
+  --surface-card: color-mix(in srgb, #050816 88%, white);
+  --surface-hover: color-mix(in srgb, #050816 84%, white);
+  --surface-elevated-1: color-mix(in srgb, #050816 84%, white);
+  --surface-elevated-2: color-mix(in srgb, #050816 76%, white);
+  --surface-elevated-3: color-mix(in srgb, #050816 68%, white);
+  --surface-glass: color-mix(in srgb, white 6%, transparent);
+  --surface-glass-strong: color-mix(in srgb, white 10%, transparent);
+
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --text-inverse: #050816;
+}
+