Cyber Wafuu

赛博和风

stylekitMITExperimental · experimentalFuturistic · futuristicRegional · regionalLight 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

"Cyber Wafuu" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-wafuu @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/cyber-wafuu · bfa7da909e86 · © AnxForever

Do

Use dark indigo backgrounds (bg-[#080814])
Add seigaiha wave pattern backgrounds with CSS repeating-radial-gradient
Use shoji screen grid as card frame structure
Apply kintsugi gold crack line borders and accents
Use torii gate shape for navigation framing
Add circuit trace connecting lines between elements
Layer traditional patterns with digital overlay effects
Use restrained interaction motion: subtle hover lift (1-2px) with circuit-glow amplification

Don't

No soft pastel colors
No organic irregular rounded shapes
No Western serif fonts
No rounded-full borders
No light backgrounds (bg-white, bg-gray-50)
No bouncy spring motion or large scale transforms
No slow dreamy transitions beyond 320ms on interactive controls

Prompt

Use Cyber Wafuu style to create a dark Japanese-tech landing page:
1. Background: dark indigo with seigaiha wave pattern overlay
2. Navigation: torii gate shaped frame with vermillion accents
3. Cards: shoji screen grid frames with kintsugi gold crack accents
4. Circuit trace lines connecting card elements
5. Cherry blossom with neon outlines as decorative accents
6. Asanoha hemp leaf grid as section background

---
"Cyber Wafuu" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-wafuu @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Cyber Wafuu. \"Cyber Wafuu\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-wafuu @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-cyber-wafuu",
      "license": "MIT",
      "attribution": "\"Cyber Wafuu\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-wafuu @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#080814"
    },
    "foreground": {
      "$type": "color",
      "$value": "#e2e8f0"
    },
    "card": {
      "$type": "color",
      "$value": "#080814"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#e2e8f0"
    },
    "primary": {
      "$type": "color",
      "$value": "#1e3a5f"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#080814"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#e2e8f0"
    },
    "accent": {
      "$type": "color",
      "$value": "#c41e3a"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#171722"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#93979c"
    },
    "border": {
      "$type": "color",
      "$value": "#2b2b35"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1e3a5f"
    }
  },
  "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": "0px"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 0 15px rgba(56,189,248,0.3)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Cyber Wafuu" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-wafuu @ bfa7da909e86. */
:root {
  --background: #080814;
  --foreground: #e2e8f0;
  --card: #080814;
  --card-foreground: #e2e8f0;
  --primary: #1e3a5f;
  --primary-foreground: #fafaf9;
  --secondary: #080814;
  --secondary-foreground: #e2e8f0;
  --accent: #c41e3a;
  --accent-foreground: #fafaf9;
  --muted: #171722;
  --muted-foreground: #93979c;
  --border: #2b2b35;
  --destructive: #dc2626;
  --ring: #1e3a5f;
  --radius: 0px;
  --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 15px rgba(56,189,248,0.3);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Cyber Wafuu" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-wafuu @ bfa7da909e86. */
/** Tailwind theme extend for Cyber Wafuu (stylekit-cyber-wafuu) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#080814",
        "foreground": "#e2e8f0",
        "card": "#080814",
        "primary": "#1e3a5f",
        "primary-foreground": "#fafaf9",
        "secondary": "#080814",
        "accent": "#c41e3a",
        "muted": "#171722",
        "border": "#2b2b35",
        "destructive": "#dc2626",
        "ring": "#1e3a5f"
      },
      "borderRadius": {
        "lg": "0px"
      },
      "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 15px rgba(56,189,248,0.3)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Cyber Wafuu" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-wafuu @ bfa7da909e86. */
@layer base {
:root {
  --background: #080814;
  --foreground: #e2e8f0;
  --card: #080814;
  --card-foreground: #e2e8f0;
  --primary: #1e3a5f;
  --primary-foreground: #fafaf9;
  --secondary: #080814;
  --secondary-foreground: #e2e8f0;
  --accent: #c41e3a;
  --accent-foreground: #fafaf9;
  --muted: #171722;
  --muted-foreground: #93979c;
  --border: #2b2b35;
  --destructive: #dc2626;
  --ring: #1e3a5f;
  --radius: 0px;
  --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 15px rgba(56,189,248,0.3);
}
}