ARKAN DX

Interface Intelligence

Operate the symbolic architecture behind ArkansDS.

A live foundation environment for tokens, themes, components, motion, narrative pacing and exportable UI intelligence.

Sign

Every token has a semantic role before it has a visual value.

Threshold

Every interaction clarifies whether the user should advance, pause or inspect.

Return

Every component must be measurable, reusable and exportable.

Colors

Typography

Spacing

Radiuses

Shadows

Opacity

Motion

Z-Index

Blur

Layout

Component Library

Modular component intelligence.

Ritual Button

Primary action. Use when the user crosses a decision threshold.

State: hover, focus, disabled, active threshold

<button className="border px-5 py-3">Initiate reading</button>

Signal Card

Container for evidence, token previews and symbolic states.

State: hover, focus, disabled, active threshold

<article className="rounded-lg border bg-[var(--surface)] p-6" />

Threshold Form

A form pattern that asks only for context needed to begin interpretation.

State: hover, focus, disabled, active threshold

<input aria-label="Desired transformation" />

Aperture Overlay

Modal or inspection layer for component intelligence and exports.

State: hover, focus, disabled, active threshold

<section role="dialog" aria-modal="true" />

Motion Architecture

Motion behaves like initiation: reveal slowly enough to create perception, respond quickly enough to preserve control.

<motion.div
  initial={{ opacity: 0, y: 18 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.76, ease: [0.22, 1, 0.36, 1] }}
/>

Narrative Pacing

Separate noise, disclose value, prove trust, open action.

Symbolic Hierarchy

Accent is ritual, not decoration. Use ember only at decision points.

Perception Architecture

A page is a topology of attention: entry, orbit, threshold, return.

Live Page Preview

Token edits update this preview instantly. Use it to inspect typography, atmospheric overlays, CTAs, cards and spacing.

Preview Chamber

Symbolic reality architecture.

A controlled environment where foundations, components and narrative behavior can be tuned before manifestation.

Component state

Active threshold

Atmosphere

Adaptive overlay

JSON Tokens

{
  "colors": {
    "void": "#050505",
    "graphite": "#1A1A1A",
    "parchment": "#F5F1E8",
    "ash": "#A6A29F",
    "ember": "#F93202"
  },
  "typography": {
    "display": "64px",
    "title": "40px",
    "body": "16px",
    "mono": "12px"
  },
  "spacing": {
    "xs": "8px",
    "sm": "16px",
    "md": "24px",
    "lg": "40px"
  },
  "radiuses": {
    "signal": "6px",
    "panel": "10px",
    "aperture": "999px"
  },
  "shadows": {
    "low": "0 10px 30px rgba(0,0,0,0.28)",
    "high": "0 32px 90px rgba(0,0,0,0.44)",
    "ember": "0 0 42px rgba(249,50,2,0.18)"
  },
  "opacity": {
    "ghost": "0.12",
    "veil": "0.48",
    "solid": "0.92"
  },
  "motion": {
    "fast": "160ms",
    "ritual": "420ms",
    "reveal": "760ms"
  },
  "zIndex": {
    "base": "1",
    "nav": "40",
    "overlay": "80"
  },
  "blur": {
    "glass": "18px",
    "aura": "48px"
  },
  "grid": {
    "columns": "12",
    "gutter": "24px",
    "margin": "32px"
  }
}

CSS Variables

:root {
  --ark-colors-void: #050505;
  --ark-colors-graphite: #1A1A1A;
  --ark-colors-parchment: #F5F1E8;
  --ark-colors-ash: #A6A29F;
  --ark-colors-ember: #F93202;
  --ark-typography-display: 64px;
  --ark-typography-title: 40px;
  --ark-typography-body: 16px;
  --ark-typography-mono: 12px;
  --ark-spacing-xs: 8px;
  --ark-spacing-sm: 16px;
  --ark-spacing-md: 24px;
  --ark-spacing-lg: 40px;
  --ark-radiuses-signal: 6px;
  --ark-radiuses-panel: 10px;
  --ark-radiuses-aperture: 999px;
  --ark-shadows-low: 0 10px 30px rgba(0,0,0,0.28);
  --ark-shadows-high: 0 32px 90px rgba(0,0,0,0.44);
  --ark-shadows-ember: 0 0 42px rgba(249,50,2,0.18);
  --ark-opacity-ghost: 0.12;
  --ark-opacity-veil: 0.48;
  --ark-opacity-solid: 0.92;
  --ark-motion-fast: 160ms;
  --ark-motion-ritual: 420ms;
  --ark-motion-reveal: 760ms;
  --ark-zIndex-base: 1;
  --ark-zIndex-nav: 40;
  --ark-zIndex-overlay: 80;
  --ark-blur-glass: 18px;
  --ark-blur-aura: 48px;
  --ark-grid-columns: 12;
  --ark-grid-gutter: 24px;
  --ark-grid-margin: 32px;
}

Tailwind Config

theme: {
  extend: {
    colors: {
    "void": "#050505",
    "graphite": "#1A1A1A",
    "parchment": "#F5F1E8",
    "ash": "#A6A29F",
    "ember": "#F93202"
},
    spacing: {
    "xs": "8px",
    "sm": "16px",
    "md": "24px",
    "lg": "40px"
},
    borderRadius: {
    "signal": "6px",
    "panel": "10px",
    "aperture": "999px"
},
    boxShadow: {
    "low": "0 10px 30px rgba(0,0,0,0.28)",
    "high": "0 32px 90px rgba(0,0,0,0.44)",
    "ember": "0 0 42px rgba(249,50,2,0.18)"
}
  }
}