Bold Typography (Mobile Poster)

ui-ux-pro-maxMITContent & media · content-mediaBlog · blogMobile app · mobile-appLanding · landingWarm · warmFuturistic · futuristicDark · darkLow (display) · lowRed · redVivid · vividSerif · serif

Bold Typography (Mobile Poster). Best for Creative brand heroes, reading-focused apps, event/exhibition pages, editorial mobile experiences, landing hero sections.

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

"Bold Typography (Mobile Poster)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bold-typography-mobile-poster @ 28b3b8dee8c9.

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

Do

H1 at least 4–5× body size
☐ All containers 0 radius
☐ Underline CTA pattern used
☐ Large vertical gaps between sections
☐ No shadows or soft corners
☐ Accent used only for interaction

Don't

Utility dashboards
kids apps
playful consumer products
contexts needing many icons or heavy imagery

Prompt

Design a Bold Typography (Mobile Poster) mobile interface using bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.

---
"Bold Typography (Mobile Poster)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bold-typography-mobile-poster @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

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