Magic Circle

魔法阵风

stylekitMITExperimental · experimentalLight and dark · bothMedium · mediumBlue · blueVivid · vividSerif · serifGeneral · generalLanding · landing

同心圆环嵌套体系、六芒星几何核心、符文铭文沿圆路径排列、生命之花神圣几何、金色辉光辐射与炼金术符号交织的奇幻视觉风格。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Magic Circle" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/magic-circle @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/magic-circle · bfa7da909e86 · © AnxForever

Do

Use deep dark navy backgrounds (bg-[#0a0920])
Add concentric ring decorations around focal elements
Use hexagonal or circular card layouts
Apply runic inscription marks along borders
Add golden glow radiation from center of elements
Use sacred geometry patterns as subtle backgrounds
Place alchemical symbols at geometric intersection points
卡片使用 group 类，hover 时内部虚线同心圆环触发旋转：group-hover:rotate-180 transition-all duration-[3000ms] ease-linear（Arcane Rotation，法阵启动）

Don't

No bright neon colors (use warm gold and cool indigo only)
No brutalist style elements
No pixel art aesthetics
No heavy/thick borders
No informal/handwritten fonts
禁止按钮缺少 active:scale-95（魔法施放必须有能量聚焦感）
禁止环形装饰在 group-hover 时静止不动（法阵启动的核心视觉语言）
禁止 focus:ring 缺少 focus:ring-offset-[#0a0920]（深色背景下焦点环必须有偏移分离）

Prompt

Use Magic Circle style to create a mystical dark-themed page:
1. Background: deep navy with sacred geometry shimmer pattern
2. Hero: concentric rotating rings around golden-glow title
3. Cards: arranged in hexagonal grid with runic inscription borders
4. Buttons: hexagon-bordered with golden glow hover radiation
5. Alchemical symbols at geometric intersection points
6. Slow-rotating ring animation suggesting ancient mechanisms

---
"Magic Circle" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/magic-circle @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Magic Circle. \"Magic Circle\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/magic-circle @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-magic-circle",
      "license": "MIT",
      "attribution": "\"Magic Circle\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/magic-circle @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#0a0920"
    },
    "foreground": {
      "$type": "color",
      "$value": "#e2e8f0"
    },
    "card": {
      "$type": "color",
      "$value": "#0a0920"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#e2e8f0"
    },
    "primary": {
      "$type": "color",
      "$value": "#1e1b4b"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#0a0920"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#e2e8f0"
    },
    "accent": {
      "$type": "color",
      "$value": "#fbbf24"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#19182d"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#93979c"
    },
    "border": {
      "$type": "color",
      "$value": "#2c2b3f"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1e1b4b"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 0 20px rgba(251,191,36,0.2)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Magic Circle" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/magic-circle @ bfa7da909e86. */
:root {
  --background: #0a0920;
  --foreground: #e2e8f0;
  --card: #0a0920;
  --card-foreground: #e2e8f0;
  --primary: #1e1b4b;
  --primary-foreground: #fafaf9;
  --secondary: #0a0920;
  --secondary-foreground: #e2e8f0;
  --accent: #fbbf24;
  --accent-foreground: #fafaf9;
  --muted: #19182d;
  --muted-foreground: #93979c;
  --border: #2c2b3f;
  --destructive: #dc2626;
  --ring: #1e1b4b;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 0 20px rgba(251,191,36,0.2);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Magic Circle" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/magic-circle @ bfa7da909e86. */
/** Tailwind theme extend for Magic Circle (stylekit-magic-circle) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#0a0920",
        "foreground": "#e2e8f0",
        "card": "#0a0920",
        "primary": "#1e1b4b",
        "primary-foreground": "#fafaf9",
        "secondary": "#0a0920",
        "accent": "#fbbf24",
        "muted": "#19182d",
        "border": "#2c2b3f",
        "destructive": "#dc2626",
        "ring": "#1e1b4b"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 0 20px rgba(251,191,36,0.2)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Magic Circle" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/magic-circle @ bfa7da909e86. */
@layer base {
:root {
  --background: #0a0920;
  --foreground: #e2e8f0;
  --card: #0a0920;
  --card-foreground: #e2e8f0;
  --primary: #1e1b4b;
  --primary-foreground: #fafaf9;
  --secondary: #0a0920;
  --secondary-foreground: #e2e8f0;
  --accent: #fbbf24;
  --accent-foreground: #fafaf9;
  --muted: #19182d;
  --muted-foreground: #93979c;
  --border: #2c2b3f;
  --destructive: #dc2626;
  --ring: #1e1b4b;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 0 20px rgba(251,191,36,0.2);
}
}