Kinetic Brutalism (Mobile)

ui-ux-pro-maxMITMobile app · mobile-appBrutalist · brutalistExperimental · experimentalDark · darkHigh (data-dense) · highYellow · yellowVivid · vividSerif · serifGeneral · general

Kinetic Brutalism (Mobile). Best for Immersive storytelling apps, brand flagship mobile, music/culture platforms, sports apps, underground zines, limited-edition product drops, performance dashboards.

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

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

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

Do

Infinite marquee rows (Reanimated
no fade edges)
☐ Hero parallax scroll (scale+opacity Interpolate)
☐ All display text uppercase
☐ 0px border-radius
☐ 2px borders

Don't

Calm informational apps
healthcare
finance contexts needing trust
children's
any context where aggressive typography feels inappropriate

Prompt

Design a Kinetic Brutalism (Mobile) mobile interface using kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.

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

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Kinetic Brutalism (Mobile). \"Kinetic Brutalism (Mobile)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#kinetic-brutalism-mobile @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-kinetic-brutalism-mobile",
      "license": "MIT",
      "attribution": "\"Kinetic Brutalism (Mobile)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#kinetic-brutalism-mobile @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fafafa"
    },
    "foreground": {
      "$type": "color",
      "$value": "#09090b"
    },
    "card": {
      "$type": "color",
      "$value": "#fafafa"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#09090b"
    },
    "primary": {
      "$type": "color",
      "$value": "#dfe104"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#09090b"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#09090b"
    },
    "accent": {
      "$type": "color",
      "$value": "#dfe104"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#ebebeb"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#5f5f60"
    },
    "border": {
      "$type": "color",
      "$value": "#d7d7d7"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#dfe104"
    }
  },
  "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 */
/* "Kinetic Brutalism (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#kinetic-brutalism-mobile @ 28b3b8dee8c9. */
:root {
  --background: #fafafa;
  --foreground: #09090b;
  --card: #fafafa;
  --card-foreground: #09090b;
  --primary: #dfe104;
  --primary-foreground: #1c1917;
  --secondary: #09090b;
  --secondary-foreground: #09090b;
  --accent: #dfe104;
  --accent-foreground: #1c1917;
  --muted: #ebebeb;
  --muted-foreground: #5f5f60;
  --border: #d7d7d7;
  --destructive: #dc2626;
  --ring: #dfe104;
  --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 */
/* "Kinetic Brutalism (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#kinetic-brutalism-mobile @ 28b3b8dee8c9. */
/** Tailwind theme extend for Kinetic Brutalism (Mobile) (uupm-kinetic-brutalism-mobile) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fafafa",
        "foreground": "#09090b",
        "card": "#fafafa",
        "primary": "#dfe104",
        "primary-foreground": "#1c1917",
        "secondary": "#09090b",
        "accent": "#dfe104",
        "muted": "#ebebeb",
        "border": "#d7d7d7",
        "destructive": "#dc2626",
        "ring": "#dfe104"
      },
      "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 */
/* "Kinetic Brutalism (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#kinetic-brutalism-mobile @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #fafafa;
  --foreground: #09090b;
  --card: #fafafa;
  --card-foreground: #09090b;
  --primary: #dfe104;
  --primary-foreground: #1c1917;
  --secondary: #09090b;
  --secondary-foreground: #09090b;
  --accent: #dfe104;
  --accent-foreground: #1c1917;
  --muted: #ebebeb;
  --muted-foreground: #5f5f60;
  --border: #d7d7d7;
  --destructive: #dc2626;
  --ring: #dfe104;
  --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);
}
}