Modern Dark (Cinema Mobile)

ui-ux-pro-maxMITDeveloper tools · developer-toolsFinance · financeContent & media · content-mediaMobile app · mobile-appGlassmorphism · glassmorphismGradient · gradientLuxury · luxuryDark · darkHigh (data-dense) · highBlue · blueMedium · mediumSerif · serif

Modern Dark (Cinema Mobile). Best for Developer tools, pro productivity apps, fintech/trading dashboards, media/streaming platforms, AI tool interfaces, high-end gaming companion 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

"Modern Dark (Cinema Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#modern-dark-cinema-mobile @ 28b3b8dee8c9.

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

Do

No pure #000000 backgrounds
☐ LinearGradient base screen
☐ Animated ambient blobs (Reanimated
native driver)
☐ BlurView on tab bar and headers
☐ borderRadius 16 on all cards

Don't

Consumer apps needing warmth
children's apps
health/medical contexts where dark feels harsh
high-accessibility contexts needing maximum contrast

Prompt

Design a Modern Dark (Cinema Mobile) mobile interface using dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.

---
"Modern Dark (Cinema Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#modern-dark-cinema-mobile @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Modern Dark (Cinema Mobile). \"Modern Dark (Cinema Mobile)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#modern-dark-cinema-mobile @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-modern-dark-cinema-mobile",
      "license": "MIT",
      "attribution": "\"Modern Dark (Cinema Mobile)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#modern-dark-cinema-mobile @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ededef"
    },
    "foreground": {
      "$type": "color",
      "$value": "#020203"
    },
    "card": {
      "$type": "color",
      "$value": "#ededef"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#020203"
    },
    "primary": {
      "$type": "color",
      "$value": "#020203"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#050506"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#020203"
    },
    "accent": {
      "$type": "color",
      "$value": "#5e6ad2"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#dfdfe1"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#5b5b5b"
    },
    "border": {
      "$type": "color",
      "$value": "#ccccce"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#020203"
    }
  },
  "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 */
/* "Modern Dark (Cinema Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#modern-dark-cinema-mobile @ 28b3b8dee8c9. */
:root {
  --background: #ededef;
  --foreground: #020203;
  --card: #ededef;
  --card-foreground: #020203;
  --primary: #020203;
  --primary-foreground: #fafaf9;
  --secondary: #050506;
  --secondary-foreground: #020203;
  --accent: #5e6ad2;
  --accent-foreground: #fafaf9;
  --muted: #dfdfe1;
  --muted-foreground: #5b5b5b;
  --border: #ccccce;
  --destructive: #dc2626;
  --ring: #020203;
  --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 */
/* "Modern Dark (Cinema Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#modern-dark-cinema-mobile @ 28b3b8dee8c9. */
/** Tailwind theme extend for Modern Dark (Cinema Mobile) (uupm-modern-dark-cinema-mobile) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ededef",
        "foreground": "#020203",
        "card": "#ededef",
        "primary": "#020203",
        "primary-foreground": "#fafaf9",
        "secondary": "#050506",
        "accent": "#5e6ad2",
        "muted": "#dfdfe1",
        "border": "#ccccce",
        "destructive": "#dc2626",
        "ring": "#020203"
      },
      "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 */
/* "Modern Dark (Cinema Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#modern-dark-cinema-mobile @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #ededef;
  --foreground: #020203;
  --card: #ededef;
  --card-foreground: #020203;
  --primary: #020203;
  --primary-foreground: #fafaf9;
  --secondary: #050506;
  --secondary-foreground: #020203;
  --accent: #5e6ad2;
  --accent-foreground: #fafaf9;
  --muted: #dfdfe1;
  --muted-foreground: #5b5b5b;
  --border: #ccccce;
  --destructive: #dc2626;
  --ring: #020203;
  --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);
}
}