@skaile/brand

The single source of truth for the Skaile brand: design tokens, CSS custom properties, a Tailwind preset, and brand assets (logo, icon, identity).

Surfaces

• @skaile/brand/brand.css — raw CSS custom properties (--color-*), dark, the marketing/website surface (gradient, persona avatars, spacing/shadow scales).
• @skaile/brand/theme.css — shadcn-semantic CSS variables, light + dark, the app surface (platform, store).
• @skaile/brand/nuxt-ui.css — Nuxt UI 4 bridge: imports theme.css and maps its variables onto the semantic --ui-* tokens Nuxt UI components read (palette, radius, light/dark).
• @skaile/brand/tailwind-preset — Tailwind preset bound to theme.css vars.
• @skaile/brand/tokens — canonical tokens.json.
• @skaile/brand/assets/* — skaile-logo.svg, skaile-icon.svg, favicon.svg, identity.md.

Quick start

/* App (platform/store), Tailwind v4 */
@import '@skaile/brand/theme.css';

// Marketing (Astro) — plain CSS asset import
import '@skaile/brand/brand.css'

/* Nuxt UI 4 app (Tailwind v4): import AFTER "@nuxt/ui" — same specificity, source order decides */
@import "tailwindcss";
@import "@nuxt/ui";
@import "@skaile/brand/nuxt-ui.css"; /* includes theme.css */

Nuxt UI bridge (nuxt-ui.css)

Takes the brand palette, radius and light/dark switch into every Nuxt UI component with no per-app overrides. Dark mode follows the .dark class Nuxt UI's color mode puts on <html>. It replaces @ecsplico/brand/nuxt-ui.css with identical output; migrate by swapping the import specifier and the dependency.

| Selector | Effect | |---|---| | :root, .light, .dark | --ui-primary/secondary/success/warning/error/info, --ui-bg-*, --ui-text-*, --ui-border-*, --ui-radius from the brand variables | | .dark .bg-inverted | label on solid-neutral surfaces takes the dark page colour | | .dark | --ui-primary switches to --color-primary-bright; #7300ff is ~2.3:1 on the dark page |

An app with its own dark selector (forge-common's .forge-project-dark) has to repeat the --ui-* mapping under that selector, because a custom property referencing another is resolved where it is declared.