Artifically - Enterprise AI Automation Platform

Multi-brand palette

Wide-gamut color tokens adapt across brand expressions and P3 capable displays.

Quantum

Primaryoklch(0.65 0.32 264)sRGB

Primary P3color(display-p3 0.62 0.45 0.96)P3

Accentoklch(0.75 0.28 192)Accent

Accent P3color(display-p3 0.74 0.9 0.82)P3

Successoklch(0.72 0.24 145)Success

Aurora

Primaryoklch(0.72 0.22 140)sRGB

Primary P3color(display-p3 0.6 0.88 0.5)P3

Accentoklch(0.78 0.25 180)Accent

Accent P3color(display-p3 0.5 0.82 0.88)P3

Successoklch(0.72 0.16 190)Success

Midnight

Primaryoklch(0.55 0.25 260)sRGB

Primary P3color(display-p3 0.42 0.36 0.86)P3

Accentoklch(0.62 0.28 305)Accent

Accent P3color(display-p3 0.76 0.34 0.88)P3

Successoklch(0.68 0.18 215)Success

Theme adaptability

Preview the interface system rendered in light, dark, and high-contrast modes.

Light

Elegant glass surfaces, warm gradients, and crisp typography.

Adaptive layout

Dark

High contrast UI tuned for focus in low-light control rooms.

Immersive workflows

High contrast

Accessible palette for extreme clarity and compliance reviews.

Accessibility ready

Spacing scale

Fluid spacing tokens keep layouts consistent across breakpoints.

3xsclamp(0.125rem, 0.1rem + 0.1vw, 0.2rem)

2xsclamp(0.25rem, 0.2rem + 0.15vw, 0.4rem)

xsclamp(0.5rem, 0.45rem + 0.25vw, 0.75rem)

smclamp(1rem, 0.9rem + 0.5vw, 1.5rem)

mdclamp(1.5rem, 1.3rem + 1vw, 2.5rem)

lgclamp(2rem, 1.6rem + 2vw, 4rem)

xlclamp(3rem, 2.25rem + 3.75vw, 6rem)

2xlclamp(4rem, 2.75rem + 6.25vw, 10rem)

3xlclamp(5rem, 3.25rem + 7.5vw, 14rem)

fluidXsclamp(0.75rem, 0.6rem + 0.6vw, 1.35rem)

fluidSmclamp(1.25rem, 0.95rem + 1.3vw, 2rem)

fluidMdclamp(1.75rem, 1.35rem + 2.1vw, 3rem)

fluidLgclamp(2.5rem, 1.85rem + 3.4vw, 4.5rem)

fluidXlclamp(3.5rem, 2.35rem + 5.25vw, 6.5rem)

Typography

Responsive type sizes defined with clamp() ensure readability everywhere.

xsclamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)

A a

smclamp(0.875rem, 0.825rem + 0.25vw, 1rem)

A a

baseclamp(1rem, 0.925rem + 0.375vw, 1.125rem)

A a

lgclamp(1.125rem, 1.025rem + 0.5vw, 1.375rem)

A a

xlclamp(1.25rem, 1.1rem + 0.75vw, 1.75rem)

A a

2xlclamp(1.5rem, 1.3rem + 1vw, 2.25rem)

A a

3xlclamp(1.875rem, 1.575rem + 1.5vw, 3rem)

A a

4xlclamp(2.25rem, 1.8rem + 2.25vw, 4rem)

A a

5xlclamp(3rem, 2.25rem + 3.75vw, 6rem)

A a

Raw tokens

Tokens are sourced from styles/tokens.json and applied globally as CSS custom properties.

{
  "color": {
    "brand": {
      "primary": "oklch(0.65 0.32 264)",
      "primaryP3": "color(display-p3 0.62 0.45 0.96)",
      "glow": "oklch(0.75 0.28 192)",
      "glowP3": "color(display-p3 0.74 0.9 0.82)",
      "energy": "oklch(0.70 0.26 330)",
      "energyP3": "color(display-p3 0.92 0.54 0.88)",
      "depth": "#0a0a0f",
      "muted": "#1a1a24",
      "accentGold": "#ffd700"
    },
    "brandSets": {
      "quantum": {
        "primary": "oklch(0.65 0.32 264)",
        "primaryP3": "color(display-p3 0.62 0.45 0.96)",
        "accent": "oklch(0.75 0.28 192)",
        "accentP3": "color(display-p3 0.74 0.9 0.82)",
        "success": "oklch(0.72 0.24 145)",
        "successP3": "color(display-p3 0.64 0.86 0.58)",
        "surface": "color-mix(in oklch, black 82%, oklch(0.75 0.28 192) 18%)"
      },
      "aurora": {
        "primary": "oklch(0.72 0.22 140)",
        "primaryP3": "color(display-p3 0.6 0.88 0.5)",
        "accent": "oklch(0.78 0.25 180)",
        "accentP3": "color(display-p3 0.5 0.82 0.88)",
        "success": "oklch(0.72 0.16 190)",
        "successP3": "color(display-p3 0.4 0.78 0.94)",
        "surface": "color-mix(in oklch, white 70%, oklch(0.72 0.22 140) 30%)"
      },
      "midnight": {
        "primary": "oklch(0.55 0.25 260)",
        "primaryP3": "color(display-p3 0.42 0.36 0.86)",
        "accent": "oklch(0.62 0.28 305)",
        "accentP3": "color(display-p3 0.76 0.34 0.88)",
        "success": "oklch(0.68 0.18 215)",
        "successP3": "color(display-p3 0.46 0.62 0.94)",
        "surface": "color-mix(in oklch, black 88%, oklch(0.62 0.28 305) 12%)"
      }
    },
    "state": {
      "success": "oklch(0.72 0.24 145)",
      "warning": "oklch(0.75 0.22 85)",
      "error": "oklch(0.62 0.28 25)",
      "info": "oklch(0.78 0.2 240)"
    },
    "text": {
      "primary": "#f4f6ff",
      "secondary": "rgba(214, 222, 255, 0.8)",
      "muted": "rgba(184, 196, 235, 0.7)",
      "contrastPrimary": "#ffffff",
      "contrastSecondary": "#121212"
    },
    "theme": {
      "light": {
        "background": "#f8f9ff",
        "surface": "#ffffff",
        "muted": "#f1f4ff",
        "border": "rgba(82, 102, 241, 0.35)"
      },
      "dark": {
        "background": "#050510",
        "surface": "#0f172a",
        "muted": "#111827",
        "border": "rgba(56, 68, 120, 0.5)"
      },
      "highContrast": {
        "background": "#050310",
        "surface": "#0a021f",
        "accent": "#00ffe0",
        "accentP3": "color(display-p3 0.44 0.97 0.85)",
        "text": "#ffffff",
        "textSecondary": "#ffe066",
        "border": "#00ffe0"
      }
    }
  },
  "spacing": {
    "3xs": "clamp(0.125rem, 0.1rem + 0.1vw, 0.2rem)",
    "2xs": "clamp(0.25rem, 0.2rem + 0.15vw, 0.4rem)",
    "xs": "clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem)",
    "sm": "clamp(1rem, 0.9rem + 0.5vw, 1.5rem)",
    "md": "clamp(1.5rem, 1.3rem + 1vw, 2.5rem)",
    "lg": "clamp(2rem, 1.6rem + 2vw, 4rem)",
    "xl": "clamp(3rem, 2.25rem + 3.75vw, 6rem)",
    "2xl": "clamp(4rem, 2.75rem + 6.25vw, 10rem)",
    "3xl": "clamp(5rem, 3.25rem + 7.5vw, 14rem)",
    "fluidXs": "clamp(0.75rem, 0.6rem + 0.6vw, 1.35rem)",
    "fluidSm": "clamp(1.25rem, 0.95rem + 1.3vw, 2rem)",
    "fluidMd": "clamp(1.75rem, 1.35rem + 2.1vw, 3rem)",
    "fluidLg": "clamp(2.5rem, 1.85rem + 3.4vw, 4.5rem)",
    "fluidXl": "clamp(3.5rem, 2.35rem + 5.25vw, 6.5rem)"
  },
  "typography": {
    "font": {
      "sans": "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
      "mono": "'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Menlo, Consolas, monospace"
    },
    "size": {
      "xs": "clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)",
      "sm": "clamp(0.875rem, 0.825rem + 0.25vw, 1rem)",
      "base": "clamp(1rem, 0.925rem + 0.375vw, 1.125rem)",
      "lg": "clamp(1.125rem, 1.025rem + 0.5vw, 1.375rem)",
      "xl": "clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem)",
      "2xl": "clamp(1.5rem, 1.3rem + 1vw, 2.25rem)",
      "3xl": "clamp(1.875rem, 1.575rem + 1.5vw, 3rem)",
      "4xl": "clamp(2.25rem, 1.8rem + 2.25vw, 4rem)",
      "5xl": "clamp(3rem, 2.25rem + 3.75vw, 6rem)"
    },
    "weight": {
      "regular": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    },
    "lineHeight": {
      "tight": 1.1,
      "snug": 1.25,
      "normal": 1.5,
      "relaxed": 1.65
    }
  }
}

Navigation

Design System