Anti-Design

反设计

stylekitMITExperimental · experimentalBrutalist · brutalistLight · lightMedium · mediumNeutral · neutralMuted · mutedSerif · serifGeneral · generalLanding · landing

故意打破传统UI规范的粗野主义实验风格，极粗边框、高饱和色彩与不规则排版

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

"Anti-Design" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/anti-design @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/anti-design · bfa7da909e86 · © AnxForever

Do

Use ultra-thick black borders (4-8px) on everything
Use sharp corners only (border-radius: 0)
Apply high-saturation primary colors (red, blue, yellow, magenta)
Rotate text and elements at odd angles (-3deg to 5deg)
Mix font sizes dramatically within the same section
Use asymmetric, uneven borders (thicker on right/bottom)
Create intentional visual conflict between adjacent elements
Use hard offset shadows only (e.g., shadow-[8px_8px_0_#000])

Don't

Don't use rounded corners of any kind
Don't use subtle or muted colors
Don't use consistent spacing or alignment
Don't use drop shadows or soft shadows
Don't use gradients (flat colors only)
Don't make things pretty or harmonious
Don't use backdrop-blur or translucency
Don't use smooth polished easing (ease-in-out, spring, bounce)

Prompt

Use Anti-Design style to create a portfolio page:
1. Yellow hero section with giant rotated black uppercase title
2. White cards with border-4 border-black and hard offset shadows
3. Each card has a different primary color accent strip
4. Mix font sizes dramatically - some text huge, some tiny
5. Rotate some elements slightly for visual chaos
6. No rounded corners anywhere - everything sharp
7. Footer: black background with white text and thick border

---
"Anti-Design" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/anti-design @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Anti-Design. \"Anti-Design\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/anti-design @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-anti-design",
      "license": "MIT",
      "attribution": "\"Anti-Design\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/anti-design @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "accent": {
      "$type": "color",
      "$value": "#ff0000"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#595959"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdbdb"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#000000"
    }
  },
  "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": "8px 8px 0 #000"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Anti-Design" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/anti-design @ bfa7da909e86. */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #fafaf9;
  --secondary: #ffffff;
  --secondary-foreground: #000000;
  --accent: #ff0000;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #595959;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #000000;
  --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: 8px 8px 0 #000;
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Anti-Design" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/anti-design @ bfa7da909e86. */
/** Tailwind theme extend for Anti-Design (stylekit-anti-design) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ffffff",
        "foreground": "#000000",
        "card": "#ffffff",
        "primary": "#000000",
        "primary-foreground": "#fafaf9",
        "secondary": "#ffffff",
        "accent": "#ff0000",
        "muted": "#f0f0f0",
        "border": "#dbdbdb",
        "destructive": "#dc2626",
        "ring": "#000000"
      },
      "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": "8px 8px 0 #000"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Anti-Design" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/anti-design @ bfa7da909e86. */
@layer base {
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #fafaf9;
  --secondary: #ffffff;
  --secondary-foreground: #000000;
  --accent: #ff0000;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #595959;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #000000;
  --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: 8px 8px 0 #000;
}
}