X Enterprises

xlayer-ui

Base UI layer for Nuxt — shared fonts (Mona Sans, Hubot Sans), 60+ CSS design tokens, utility classes, and a useXUI() composable consumed by all xlayers.

xlayer-ui

Base design-system layer for Nuxt 4. Provides two variable fonts, 60+ CSS custom properties (design tokens), utility classes, a useXUI() composable, and app.config.ts defaults. All other xlayers extend this layer — consuming layers inherit fonts, tokens, and utility classes without importing anything manually.

Installation

npm install xlayer-ui

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ["xlayer-ui"],
});

What This Layer Provides

  • 2 variable fonts — Mona Sans (display/body) and Hubot Sans (mono), bundled and preloaded
  • 60+ CSS custom properties — typography scale, spacing, content widths, radius, shadows, glow, glass morphism, z-index, animation durations/easings
  • Utility classes — x-font-*, x-text-*, x-glass, x-hover-lift, x-fade-up, x-focus-ring
  • useXUI() composable — runtime access to design tokens from app.config.ts
  • Dark mode — automatic via @media (prefers-color-scheme: dark) and .dark class

Fonts

FontUsageWeight RangeStretch Range
Mona SansDisplay + body text200–90075%–125%
Hubot SansMonospace / code200–90075%–125%

Both fonts use font-display: swap and are preloaded via <link rel="preload"> in the document <head>.

Design Tokens (CSS Custom Properties)

All tokens are defined on :root and can be overridden by consumer layers via app.config.ts.

Font Families

TokenDefault
--x-font-displayMona Sans, system fallbacks
--x-font-bodyMona Sans, system fallbacks
--x-font-monoHubot Sans, monospace fallbacks

Typography Scale

ScaleSizeLine HeightTrackingWeight
--x-text-display3.75rem1-0.025em800
--x-text-headline2.25rem1.1-0.02em700
--x-text-title1.5rem1.25-0.01em600
--x-text-body1rem1.6250400
--x-text-small0.875rem1.50400
--x-text-caption0.75rem1.50.01em400

Each scale exposes three tokens: --x-text-{scale} (size), --x-text-{scale}-leading, --x-text-{scale}-tracking.

Spacing

TokenValue
--x-space-xs0.25rem
--x-space-sm0.5rem
--x-space-md1rem
--x-space-lg1.5rem
--x-space-xl2rem
--x-space-2xl3rem
--x-space-3xl4rem

Content Widths

TokenValue
--x-content-sm640px
--x-content-md768px
--x-content-lg1024px
--x-content-xl1280px

Section Padding

TokenValue
--x-section-py4rem
--x-section-py-lg6rem

Border Radius

TokenValue
--x-radius-sm0.375rem
--x-radius-md0.5rem
--x-radius-lg0.75rem
--x-radius-xl1rem
--x-radius-full9999px

Animation Durations

TokenValue
--x-duration-instant100ms
--x-duration-fast150ms
--x-duration-normal250ms
--x-duration-slow400ms
--x-duration-slower700ms

Easing Curves

TokenValue
--x-ease-outcubic-bezier(0.16, 1, 0.3, 1)
--x-ease-in-outcubic-bezier(0.65, 0, 0.35, 1)
--x-ease-bouncecubic-bezier(0.34, 1.56, 0.64, 1)

Shadows & Glow

TokenDescription
--x-shadow-smSubtle shadow
--x-shadow-mdMedium shadow
--x-shadow-lgLarge shadow
--x-shadow-xlExtra large shadow
--x-glow-primaryBlue glow effect
--x-glow-subtleMuted glow effect

Glass Morphism

TokenLightDark
--x-glass-bgrgb(255 255 255 / 0.7)rgb(15 23 42 / 0.7)
--x-glass-borderrgb(255 255 255 / 0.2)rgb(255 255 255 / 0.08)
--x-glass-blur12px12px

Z-Index Scale

TokenValue
--x-z-dropdown50
--x-z-sticky100
--x-z-overlay200
--x-z-modal300
--x-z-toast400

Utility Classes

ClassDescription
.x-font-displayApply display font family
.x-font-bodyApply body font family
.x-font-monoApply monospace font family
.x-text-displayDisplay typography (3.75rem, weight 800)
.x-text-headlineHeadline typography (2.25rem, weight 700)
.x-text-titleTitle typography (1.5rem, weight 600)
.x-text-bodyBody typography (1rem)
.x-text-smallSmall text (0.875rem)
.x-text-captionCaption text (0.75rem)
.x-glassGlass morphism (blur + translucent background)
.x-fade-upFade-up entrance animation
.x-hover-liftLift on hover with shadow transition
.x-focus-ringAccessible focus ring on :focus-visible

useXUI() Composable

Returns the xUI namespace from app.config.ts, providing runtime access to design token values in JavaScript.

<script setup>
const { fonts, typography, spacing, radius, duration } = useXUI()
</script>

Configuration (app.config.ts)

All token defaults can be overridden by consumer layers:

export default defineAppConfig({
  xUI: {
    fonts: {
      display: "Inter",
      body: "Inter",
      mono: "JetBrains Mono",
    },
    spacing: {
      md: "1.25rem",
    },
  },
});

Environment Variables

None required.

How It Works

nuxt.config.ts loads x-ui.css globally via css: [...] and preloads both variable fonts via <link rel="preload"> in the document <head> (using fileURLToPath for layer-safe path resolution). x-ui.css declares @font-face rules, defines all CSS custom properties on :root, provides dark mode overrides via @media (prefers-color-scheme: dark) and .dark, sets the base html font, and includes all utility classes. app.config.ts exposes the same token values in the xUI namespace so consumer layers can override them and composables can read them at runtime. useXUI() reads from useAppConfig().xUI.

Layer Files

FilePurpose
nuxt.config.tsLoads CSS, preloads fonts
assets/css/x-ui.cssFont faces, design tokens, utility classes
app/app.config.tsDefault token values (overridable)
app/composables/useXUI.jsRuntime access to design tokens
app/types/x-ui.tsTypeScript type definitions
public/Mona Sans/Mona Sans variable font files
public/Hubot Sans/Hubot Sans variable font files

Configuration

app.config.ts and runtimeConfig reference for @xenterprises/nuxt-x-affiliate.

useXUI

Runtime access to design tokens from app.config.ts — fonts, typography, spacing, border radius, and animation durations.

Copyright © 2026