@paraxe/design 1.0.0

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.css" {
+  const css: string
+  export default css
+}
+

package/src/index.ts

@@ -0,0 +1,354 @@
+/**
+ * @loba/design — public entry point.
+ *
+ * The canonical token contract for the Loba ecosystem.
+ * `@loba/ui` components consume these tokens directly (no aliases).
+ *
+ * This module exports:
+ *  - The canonical token names (typed, frozen v1.0)
+ *  - CSS entry points (tokens / themes / presets)
+ *
+ * Runtime consumers typically import the CSS files directly, e.g.:
+ *   import "@loba/design/tokens.css"
+ *   import "@loba/design/themes/default.css"
+ *   import "@loba/design/presets/default.css"
+ */
+
+// ---- Canonical token names (frozen v1.0) -------------------------------
+
+/** Structural token names from tokens.css (Layer 1). */
+export const TOKEN_NAMES = {
+  // Spacing scale
+  space0: "--space-0",
+  spacePx: "--space-px",
+  space1: "--space-1",
+  space2: "--space-2",
+  space3: "--space-3",
+  space4: "--space-4",
+  space5: "--space-5",
+  space6: "--space-6",
+  space7: "--space-7",
+  space8: "--space-8",
+  space9: "--space-9",
+  space10: "--space-10",
+  space11: "--space-11",
+  space12: "--space-12",
+  space14: "--space-14",
+  space16: "--space-16",
+  space20: "--space-20",
+  space24: "--space-24",
+  space28: "--space-28",
+  space32: "--space-32",
+  space36: "--space-36",
+  space40: "--space-40",
+  space44: "--space-44",
+  space48: "--space-48",
+  space52: "--space-52",
+  space56: "--space-56",
+  space60: "--space-60",
+  space64: "--space-64",
+  space72: "--space-72",
+  space80: "--space-80",
+  space96: "--space-96",
+
+  // Spacing roles
+  sectionSpacing: "--section-spacing",
+  containerPadding: "--container-padding",
+  containerPaddingLg: "--container-padding-lg",
+  cardPadding: "--card-padding",
+  cardPaddingSm: "--card-padding-sm",
+  cardPaddingLg: "--card-padding-lg",
+  stackGap: "--stack-gap",
+  stackGapSm: "--stack-gap-sm",
+  stackGapLg: "--stack-gap-lg",
+  inlineGap: "--inline-gap",
+  inlineGapSm: "--inline-gap-sm",
+  inlineGapLg: "--inline-gap-lg",
+  gridGap: "--grid-gap",
+  gridGapSm: "--grid-gap-sm",
+  gridGapLg: "--grid-gap-lg",
+
+  // Layout
+  containerMaxWidth: "--container-max-width",
+  containerNarrow: "--container-narrow",
+  containerGutter: "--container-gutter",
+  containerGutterLg: "--container-gutter-lg",
+  contentWidthNarrow: "--content-width-narrow",
+
+  // Z-index
+  zBase: "--z-base",
+  zFloor: "--z-floor",
+  zSticky: "--z-sticky",
+  zNavbar: "--z-navbar",
+  zDropdown: "--z-dropdown",
+  zOverlay: "--z-overlay",
+  zModal: "--z-modal",
+  zPopover: "--z-popover",
+  zTooltip: "--z-tooltip",
+
+  // Typography
+  fontFamilyDisplay: "--font-family-display",
+  fontFamilyBody: "--font-family-body",
+  fontFamilyMono: "--font-family-mono",
+  fontWeightLight: "--font-weight-light",
+  fontWeightRegular: "--font-weight-regular",
+  fontWeightMedium: "--font-weight-medium",
+  fontWeightSemibold: "--font-weight-semibold",
+  fontWeightBold: "--font-weight-bold",
+  fontWeightExtrabold: "--font-weight-extrabold",
+  fontSizeXs: "--font-size-xs",
+  fontSizeSm: "--font-size-sm",
+  fontSizeBase: "--font-size-base",
+  fontSizeLg: "--font-size-lg",
+  fontSizeXl: "--font-size-xl",
+  fontSize2xl: "--font-size-2xl",
+  fontSize3xl: "--font-size-3xl",
+  fontSize4xl: "--font-size-4xl",
+  fontSize5xl: "--font-size-5xl",
+  fontSize6xl: "--font-size-6xl",
+  fontSize7xl: "--font-size-7xl",
+  fontSize8xl: "--font-size-8xl",
+  fontSize9xl: "--font-size-9xl",
+  lineHeightTight: "--line-height-tight",
+  lineHeightSnug: "--line-height-snug",
+  lineHeightNormal: "--line-height-normal",
+  lineHeightRelaxed: "--line-height-relaxed",
+  lineHeightLoose: "--line-height-loose",
+  letterSpacingTight: "--letter-spacing-tight",
+  letterSpacingNormal: "--letter-spacing-normal",
+  letterSpacingWide: "--letter-spacing-wide",
+  letterSpacingWider: "--letter-spacing-wider",
+  letterSpacingWidest: "--letter-spacing-widest",
+
+  // Typography — semantic layer
+  typographyH1Size: "--typography-h1-size",
+  typographyH2Size: "--typography-h2-size",
+  typographyH3Size: "--typography-h3-size",
+  typographyH4Size: "--typography-h4-size",
+  typographyLeadSize: "--typography-lead-size",
+  typographyBodySize: "--typography-body-size",
+  typographyCaptionSize: "--typography-caption-size",
+  typographyOverlineSize: "--typography-overline-size",
+  typographyHeadingWeight: "--typography-heading-weight",
+  typographyBodyWeight: "--typography-body-weight",
+  typographyHeadingLineheight: "--typography-heading-lineheight",
+  typographyBodyLineheight: "--typography-body-lineheight",
+  typographyHeadingLetterspacing: "--typography-heading-letterspacing",
+  typographyBodyLetterspacing: "--typography-body-letterspacing",
+
+  // Radius
+  radiusNone: "--radius-none",
+  radiusSm: "--radius-sm",
+  radiusBase: "--radius-base",
+  radiusMd: "--radius-md",
+  radiusLg: "--radius-lg",
+  radiusXl: "--radius-xl",
+  radius2xl: "--radius-2xl",
+  radius3xl: "--radius-3xl",
+  radiusFull: "--radius-full",
+
+  // Shadows (structural)
+  shadowSm: "--shadow-sm",
+  shadowBase: "--shadow-base",
+  shadowMd: "--shadow-md",
+  shadowLg: "--shadow-lg",
+  shadowXl: "--shadow-xl",
+  shadow2xl: "--shadow-2xl",
+  shadowInner: "--shadow-inner",
+
+  // Motion durations
+  motionDurationFast: "--motion-duration-fast",
+  motionDurationNormal: "--motion-duration-normal",
+  motionDurationSlow: "--motion-duration-slow",
+  motionDurationSlower: "--motion-duration-slower",
+  motionDurationSlowest: "--motion-duration-slowest",
+
+  // Motion easings
+  motionEaseIn: "--motion-ease-in",
+  motionEaseOut: "--motion-ease-out",
+  motionEaseInOut: "--motion-ease-in-out",
+  motionEaseSpring: "--motion-ease-spring",
+  motionEaseSmooth: "--motion-ease-smooth",
+
+  // Motion combinators
+  motionFast: "--motion-fast",
+  motionNormal: "--motion-normal",
+  motionSlow: "--motion-slow",
+  motionSlower: "--motion-slower",
+  easeStandard: "--ease-standard",
+  easeSmooth: "--ease-smooth",
+  easeSpring: "--ease-spring",
+  transitionFast: "--transition-fast",
+  transitionNormal: "--transition-normal",
+  transitionSlow: "--transition-slow",
+
+  // Component structure
+  buttonRadius: "--button-radius",
+  buttonPaddingX: "--button-padding-x",
+  buttonPaddingY: "--button-padding-y",
+  buttonGap: "--button-gap",
+  cardRadius: "--card-radius",
+  badgeRadius: "--badge-radius",
+  navHeight: "--nav-height",
+  navBlur: "--nav-blur",
+  glassBlur: "--glass-blur",
+  glassSaturate: "--glass-saturate",
+  focusRingWidth: "--focus-ring-width",
+  focusRingOffset: "--focus-ring-offset",
+} as const
+
+/** Color token names from themes/*.css (Layer 2). */
+export const COLOR_TOKEN_NAMES = {
+  brandPrimary: "--brand-primary",
+  brandPrimaryHover: "--brand-primary-hover",
+  brandPrimaryActive: "--brand-primary-active",
+  brandPrimaryLight: "--brand-primary-light",
+  brandPrimaryMuted: "--brand-primary-muted",
+  brandGlow: "--brand-glow",
+  textOnBrand: "--text-on-brand",
+  colorSuccess: "--color-success",
+  colorWarning: "--color-warning",
+  colorDanger: "--color-danger",
+  colorInfo: "--color-info",
+  backgroundPrimary: "--background-primary",
+  backgroundSecondary: "--background-secondary",
+  surfaceBase: "--surface-base",
+  surfaceRaised: "--surface-raised",
+  surfaceCard: "--surface-card",
+  surfaceHover: "--surface-hover",
+  surfaceElevated1: "--surface-elevated-1",
+  surfaceElevated2: "--surface-elevated-2",
+  surfaceElevated3: "--surface-elevated-3",
+  surfaceGlass: "--surface-glass",
+  surfaceGlassStrong: "--surface-glass-strong",
+  textPrimary: "--text-primary",
+  textSecondary: "--text-secondary",
+  textMuted: "--text-muted",
+  textInverse: "--text-inverse",
+  textAccent: "--text-accent",
+  textLink: "--text-link",
+  textLinkHover: "--text-link-hover",
+  borderDefault: "--border-default",
+  borderStrong: "--border-strong",
+  borderSubtle: "--border-subtle",
+  borderFocus: "--border-focus",
+  glassBackground: "--glass-background",
+  glassBorder: "--glass-border",
+  cardHighlight: "--card-highlight",
+  cardHighlightInset: "--card-highlight-inset",
+  overlayScrim: "--overlay-scrim",
+  overlayScrimStrong: "--overlay-scrim-strong",
+  focusRingColor: "--focus-ring-color",
+  selectionBackground: "--selection-background",
+  selectionText: "--selection-text",
+
+  // Buttons
+  buttonPrimaryBg: "--button-primary-bg",
+  buttonPrimaryText: "--button-primary-text",
+  buttonPrimaryBorder: "--button-primary-border",
+  buttonPrimaryHoverBg: "--button-primary-hover-bg",
+  buttonPrimaryHoverBorder: "--button-primary-hover-border",
+  buttonPrimaryActiveBg: "--button-primary-active-bg",
+  buttonPrimaryDisabledBg: "--button-primary-disabled-bg",
+  buttonPrimaryDisabledText: "--button-primary-disabled-text",
+  buttonSecondaryBg: "--button-secondary-bg",
+  buttonSecondaryText: "--button-secondary-text",
+  buttonSecondaryBorder: "--button-secondary-border",
+  buttonSecondaryHoverBg: "--button-secondary-hover-bg",
+  buttonSecondaryHoverBorder: "--button-secondary-hover-border",
+  buttonSecondaryActiveBg: "--button-secondary-active-bg",
+  buttonSecondaryDisabledBg: "--button-secondary-disabled-bg",
+  buttonSecondaryDisabledText: "--button-secondary-disabled-text",
+  buttonSecondaryDisabledBorder: "--button-secondary-disabled-border",
+  buttonGhostBg: "--button-ghost-bg",
+  buttonGhostText: "--button-ghost-text",
+  buttonGhostBorder: "--button-ghost-border",
+  buttonGhostHoverBg: "--button-ghost-hover-bg",
+  buttonGhostHoverBorder: "--button-ghost-hover-border",
+  buttonGhostActiveBg: "--button-ghost-active-bg",
+  buttonGhostDisabledText: "--button-ghost-disabled-text",
+  buttonOutlineBg: "--button-outline-bg",
+  buttonOutlineText: "--button-outline-text",
+  buttonOutlineBorder: "--button-outline-border",
+  buttonOutlineHoverBg: "--button-outline-hover-bg",
+  buttonOutlineHoverBorder: "--button-outline-hover-border",
+  buttonOutlineActiveBg: "--button-outline-active-bg",
+  buttonOutlineDisabledText: "--button-outline-disabled-text",
+  buttonOutlineDisabledBorder: "--button-outline-disabled-border",
+  buttonDangerBg: "--button-danger-bg",
+  buttonDangerText: "--button-danger-text",
+  buttonDangerBorder: "--button-danger-border",
+  buttonDangerHoverBg: "--button-danger-hover-bg",
+  buttonDangerHoverBorder: "--button-danger-hover-border",
+  buttonDangerActiveBg: "--button-danger-active-bg",
+  buttonDangerDisabledBg: "--button-danger-disabled-bg",
+  buttonDangerDisabledText: "--button-danger-disabled-text",
+
+  // Cards
+  cardBackground: "--card-background",
+  cardBackgroundHover: "--card-background-hover",
+  cardBorder: "--card-border",
+  cardBorderHover: "--card-border-hover",
+  cardShadow: "--card-shadow",
+  cardShadowHover: "--card-shadow-hover",
+
+  // Nav
+  navBackground: "--nav-background",
+  navBorder: "--nav-border",
+  navLink: "--nav-link",
+  navLinkHover: "--nav-link-hover",
+  navLinkActive: "--nav-link-active",
+  navLinkActiveBorder: "--nav-link-active-border",
+  navFocusRing: "--nav-focus-ring",
+
+  // Forms
+  formBackground: "--form-background",
+  formBorder: "--form-border",
+  formBorderHover: "--form-border-hover",
+  formBorderFocus: "--form-border-focus",
+  formText: "--form-text",
+  formTextMuted: "--form-text-muted",
+  formPlaceholder: "--form-placeholder",
+  formBgDisabled: "--form-bg-disabled",
+  formBorderDisabled: "--form-border-disabled",
+  formTextDisabled: "--form-text-disabled",
+
+  // Badges
+  badgeBackground: "--badge-background",
+  badgeBorder: "--badge-border",
+  badgeText: "--badge-text",
+
+  // Footer
+  footerBackground: "--footer-background",
+  footerBorder: "--footer-border",
+  footerText: "--footer-text",
+  footerLink: "--footer-link",
+  footerLinkHover: "--footer-link-hover",
+
+  // Shadow elevation
+  shadowElevationLow: "--shadow-elevation-low",
+  shadowElevationMedium: "--shadow-elevation-medium",
+  shadowElevationHigh: "--shadow-elevation-high",
+  shadowElevationModal: "--shadow-elevation-modal",
+} as const
+
+export type TokenName = (typeof TOKEN_NAMES)[keyof typeof TOKEN_NAMES]
+export type ColorTokenName = (typeof COLOR_TOKEN_NAMES)[keyof typeof COLOR_TOKEN_NAMES]
+
+/** All canonical token names (combination of Layer 1 + Layer 2). */
+export const ALL_TOKEN_NAMES = {
+  ...TOKEN_NAMES,
+  ...COLOR_TOKEN_NAMES,
+} as const
+
+/** Helper to create a `var()` reference for a canonical token. */
+export function token(name: TokenName | ColorTokenName): string {
+  return `var(${name})`
+}
+
+/** Import the CSS entry points so bundlers pick them up automatically. */
+import "./tokens.css"
+import "./themes/default.css"
+import "./presets/default.css"
+import "./components.css"
+

package/src/presets/corporate.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/corporate.css
+   LAYER 3 — PERSONALITY: Professional, clear, corporate
+   Manrope display + Inter body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Inter", 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/presets/creative.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/creative.css
+   LAYER 3 — PERSONALITY: Bold, playful, expressive
+   Bricolage Grotesque display + Instrument Sans body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wdth,wght@75..100,400;75..100,500;75..100,600;75..100,700&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Instrument 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.5rem;
+  --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-lg);
+  --button-padding-x: 1.5rem;
+  --button-padding-y: 0.75rem;
+  --card-radius: var(--radius-xl);
+  --nav-height: 4.5rem;
+}

package/src/presets/default.css

@@ -0,0 +1,58 @@
+/* ==========================================================================
+   @loba/design — presets/default.css
+   LAYER 3 — PERSONALITY (FROZEN v1.0)
+
+   Balanced, neutral baseline — Plus Jakarta Sans for display and body.
+   Only personality overrides (~15 vars). Structural defaults come from
+   tokens.css; colors come from themes/*.css.
+
+   ✅ font families, weight/density/radius/motion/shadow anchors,
+      component personality
+   ❌ the entire spacing scale, all font sizes, all radii, colors
+   ========================================================================== */
+
+/* ---- Font imports (personality-specific) ---- */
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  /* ---- Font Families ---- */
+  --font-family-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+  --font-family-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
+  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;
+
+  /* ---- Typography Personality ---- */
+  --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;
+
+  /* ---- Spacing Density Anchor ---- */
+  --space-4: 1rem;
+
+  /* ---- Radius Anchor ---- */
+  --radius-md: 0.5rem;
+
+  /* ---- Motion Speed Anchor ---- */
+  --motion-duration-normal: 300ms;
+
+  /* ---- Motion Personality ---- */
+  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  /* ---- Shadow Softness Anchor ---- */
+  --shadow-elevation-low: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  /* ---- Glass Intensity ---- */
+  --glass-blur: 16px;
+
+  /* ---- Component Personality ---- */
+  --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/editorial.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/editorial.css
+   LAYER 3 — PERSONALITY: Content-first, editorial
+   Fraunces display + Libre Franklin body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Libre+Franklin:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Fraunces", ui-serif, Georgia, serif;
+  --font-family-body: "Libre Franklin", 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: 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-sm);
+  --button-padding-x: 1.25rem;
+  --button-padding-y: 0.625rem;
+  --card-radius: var(--radius-base);
+  --nav-height: 4rem;
+}

package/src/presets/fashion.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/fashion.css
+   LAYER 3 — PERSONALITY: Elegant, high-fashion editorial
+   Josefin Sans display + Cormorant Garamond body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=Cormorant+Garamond:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Josefin Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Cormorant Garamond", ui-serif, Georgia, 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.25rem;
+  --motion-duration-normal: 400ms;
+  --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: 20px;
+  --button-radius: var(--radius-sm);
+  --button-padding-x: 1.5rem;
+  --button-padding-y: 0.75rem;
+  --card-radius: var(--radius-base);
+  --nav-height: 4.5rem;
+}

package/src/presets/friendly.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/friendly.css
+   LAYER 3 — PERSONALITY: Warm, approachable
+   Quicksand display + Plus Jakarta Sans body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Quicksand", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Plus Jakarta 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: 350ms;
+  --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/future.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/future.css
+   LAYER 3 — PERSONALITY: Sleek, geometric, forward-thinking
+   Saira display + Rubik body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700;800;900&family=Rubik:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Saira", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Rubik", 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.5rem;
+  --motion-duration-normal: 250ms;
+  --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-md);
+  --button-padding-x: 1.5rem;
+  --button-padding-y: 0.75rem;
+  --card-radius: var(--radius-lg);
+  --nav-height: 4.5rem;
+}

package/src/presets/industrial.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   @loba/design — presets/industrial.css
+   LAYER 3 — PERSONALITY: Bold, condensed, industrial strength
+   Oswald display + Ubuntu body
+   ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Ubuntu:wght@300;400;500;700&family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap");
+
+:root {
+  --font-family-display: "Oswald", ui-sans-serif, system-ui, sans-serif;
+  --font-family-body: "Ubuntu", 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 2px 8px rgba(0, 0, 0, 0.15);
+  --glass-blur: 12px;
+  --button-radius: var(--radius-base);
+  --button-padding-x: 1.5rem;
+  --button-padding-y: 0.625rem;
+  --card-radius: var(--radius-md);
+  --nav-height: 4.5rem;
+}