Neo Brutalism (Mobile)

ui-ux-pro-maxMITE-commerce · ecommercePortfolio · portfolioMobile app · mobile-appLanding · landingBrutalist · brutalistExperimental · experimentalLight · lightMedium · mediumYellow · yellowVivid · vividSerif · serif

Neo Brutalism (Mobile). Best for Creative tools, collab platforms, Gen Z marketing & e-commerce, portfolio sites, sticker-book style content apps.

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

"Neo Brutalism (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#neo-brutalism-mobile @ 28b3b8dee8c9.

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill · src/ui-ux-pro-max/data/styles.csv#neo-brutalism-mobile · 28b3b8dee8c9 · © Next Level Builder

Do

4px borders on major elements
☐ Hard offset shadow implemented via extra View
☐ Mechanical press hides shadow
☐ Cream canvas background
☐ Pop-art color palette used
☐ Cards/badges slightly rotated

Don't

Serious enterprise apps
conservative industries
sober fintech
accessibility-first contexts (must tune contrast)

Prompt

Design a Neo Brutalism (Mobile) mobile interface using neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.

---
"Neo Brutalism (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#neo-brutalism-mobile @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Neo Brutalism (Mobile). \"Neo Brutalism (Mobile)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#neo-brutalism-mobile @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-neo-brutalism-mobile",
      "license": "MIT",
      "attribution": "\"Neo Brutalism (Mobile)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#neo-brutalism-mobile @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fffdf5"
    },
    "foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "card": {
      "$type": "color",
      "$value": "#fffdf5"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "primary": {
      "$type": "color",
      "$value": "#fffdf5"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ff6b6b"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#000000"
    },
    "accent": {
      "$type": "color",
      "$value": "#ff6b6b"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0eee6"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#595959"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdad3"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#fffdf5"
    }
  },
  "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 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Neo Brutalism (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#neo-brutalism-mobile @ 28b3b8dee8c9. */
:root {
  --background: #fffdf5;
  --foreground: #000000;
  --card: #fffdf5;
  --card-foreground: #000000;
  --primary: #fffdf5;
  --primary-foreground: #1c1917;
  --secondary: #ff6b6b;
  --secondary-foreground: #000000;
  --accent: #ff6b6b;
  --accent-foreground: #fafaf9;
  --muted: #f0eee6;
  --muted-foreground: #595959;
  --border: #dbdad3;
  --destructive: #dc2626;
  --ring: #fffdf5;
  --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 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Neo Brutalism (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#neo-brutalism-mobile @ 28b3b8dee8c9. */
/** Tailwind theme extend for Neo Brutalism (Mobile) (uupm-neo-brutalism-mobile) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fffdf5",
        "foreground": "#000000",
        "card": "#fffdf5",
        "primary": "#fffdf5",
        "primary-foreground": "#1c1917",
        "secondary": "#ff6b6b",
        "accent": "#ff6b6b",
        "muted": "#f0eee6",
        "border": "#dbdad3",
        "destructive": "#dc2626",
        "ring": "#fffdf5"
      },
      "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 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Neo Brutalism (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#neo-brutalism-mobile @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #fffdf5;
  --foreground: #000000;
  --card: #fffdf5;
  --card-foreground: #000000;
  --primary: #fffdf5;
  --primary-foreground: #1c1917;
  --secondary: #ff6b6b;
  --secondary-foreground: #000000;
  --accent: #ff6b6b;
  --accent-foreground: #fafaf9;
  --muted: #f0eee6;
  --muted-foreground: #595959;
  --border: #dbdad3;
  --destructive: #dc2626;
  --ring: #fffdf5;
  --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 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}