Skip to content
AppiFire AI Chat Docs

Admin UI Design Plan — Bigger Font, Different Font, More Spacing, Styled Buttons

This document is the plan to achieve a cleaner, more spacious admin UI with:

  • Bigger font — larger base size and clearer hierarchy
  • Different font — a distinct, modern sans-serif (like in the reference screens)
  • More spacing — generous padding and gaps between sections and controls
  • Nicely styled buttons — rounded, clear primary/secondary styles, comfortable touch targets

It also recommends which theme or framework to use with Polaris, or as an alternative, to get this look.

1. Goals (reference: SmartBot / Jotform-style UI)

Section titled “1. Goals (reference: SmartBot / Jotform-style UI)”
GoalDescription
Bigger fontIncrease base body size (e.g. 15px → 16–17px) and scale headings so the UI feels readable and not cramped.
Different fontUse a clean, modern sans-serif (not the default Polaris font). Reference screens often use fonts like Inter, Plus Jakarta Sans, or DM Sans — geometric, friendly, and highly legible.
More spacingMore padding inside cards, larger gaps between form fields and between sections. Avoid tight, dense layouts.
Nicely styled buttonsRounded corners (e.g. 8–12px), clear primary (filled) vs secondary (outline) styles, comfortable height (e.g. 40–44px), optional subtle shadow.

2. Theme / framework options (with or alongside Polaris)

Section titled “2. Theme / framework options (with or alongside Polaris)”

Option A — Polaris + custom theme (recommended)

Section titled “Option A — Polaris + custom theme (recommended)”

What: Keep using @shopify/polaris and apply a custom theme that overrides Polaris design tokens (font family, font sizes, spacing, border radius).

  • Pros: Stays 100% Polaris; one place to control type and spacing; works in Shopify embedded admin.
  • Cons: Polaris theming is token-based; you need to override the right tokens (e.g. --p-font-family-*, --p-font-size-*, --p-space-*, --p-border-radius-*).
  • How:
    • Load a custom stylesheet (or CSS-in-JS) after Polaris that sets these variables on :root or on a wrapper div around the app.
    • Load your chosen font (e.g. Plus Jakarta Sans or Inter) from Google Fonts (or self-host) and set --p-font-family-sans (or the token Polaris uses for body/UI).
    • Increase --p-font-size-* and --p-space-* where needed; increase button border-radius via --p-border-radius-*.

Best for: Achieving “bigger font, different font, more spacing, nicer buttons” without leaving Polaris.

Option B — Polaris + Tailwind CSS

Section titled “Option B — Polaris + Tailwind CSS”

What: Keep Polaris for layout and components, and add Tailwind CSS for your own utility classes: typography (e.g. text-lg, font-medium), spacing (e.g. p-6, gap-6), and custom button classes (e.g. rounded-xl, px-5, py-2.5).

  • Pros: Very fast to add bigger text, more padding, and custom button styles on specific elements (cards, headings, your own buttons).
  • Cons: Two systems (Polaris + Tailwind); need to avoid conflicting with Polaris base styles (e.g. scope Tailwind to a class like .app-theme or use a prefix).
  • How:
    • Install Tailwind and restrict it to a wrapper (e.g. div.app-theme).
    • Use Tailwind for: page/section titles (text-xl / text-2xl), card padding (p-6), gaps (gap-6), and custom-styled <button> or Polaris Button wrappers with className for rounded, larger buttons.

Best for: Quick, targeted improvements (bigger font here, more spacing there, nicer buttons) while keeping Polaris as the base.

Option C — Polaris + global CSS overrides (no new framework)

Section titled “Option C — Polaris + global CSS overrides (no new framework)”

What: One global stylesheet (e.g. app/theme-overrides.css) that:

  • Imports a font (e.g. Inter or Plus Jakarta Sans) from Google Fonts.
  • Sets :root or .Polaris-AppProvider overrides for:
    • font-family
    • font-size (body and headings)
    • --p-* variables if Polaris exposes them in your version.
  • Adds utility classes for spacing (e.g. .section-gap { margin-bottom: 1.5rem; }) and for button styling (e.g. .btn-primary { border-radius: 10px; padding: 12px 24px; font-size: 15px; }).

Pros: No new dependencies; full control.
Cons: You maintain overrides and need to match Polaris class names or use high specificity.

Best for: Minimal approach: different font + bigger font + more spacing + nicer buttons via one CSS file.

Option D — Replace Polaris with another UI library (not recommended)

Section titled “Option D — Replace Polaris with another UI library (not recommended)”

What: Use something like Chakra UI, MUI, or Tailwind UI instead of Polaris.

  • Cons: Shopify embedded apps are built to look and behave like the rest of Shopify Admin; Polaris is the supported design system. Replacing it can make the app feel out of place and can break patterns (e.g. modals, toasts, navigation). Shopify’s own docs and App Bridge assume Polaris.
  • When it might be acceptable: Standalone or non-embedded admin; not typical for a Shopify app.

Recommendation: Do not replace Polaris. Use Option A, B, or C so we keep Polaris but change typography, spacing, and button style.

Section titled “3. Recommended stack for this project”
  • Base: Keep Polaris for all layout and components (Page, Card, FormLayout, Button, etc.).
  • Theme layer: Use Option A (Polaris + custom theme) or Option C (Polaris + global CSS) to get:
    • Different font: e.g. Plus Jakarta Sans or Inter (Google Fonts).
    • Bigger font: bump base to 16px and scale headings (e.g. section titles 1.25rem–1.5rem).
    • More spacing: increase section gaps and card padding (e.g. 24px between sections, 20px inside cards).
    • Nicely styled buttons: override Polaris button styles (or add a wrapper class) for border-radius ~10px, padding 12px 24px, clear primary/secondary look.

If you prefer utility-based tweaks without touching Polaris tokens, add Tailwind (Option B) and use it only for typography, spacing, and button classes on top of Polaris.

4. Concrete implementation outline

Section titled “4. Concrete implementation outline”
  1. Font
    • Pick one: Inter or Plus Jakarta Sans (or DM Sans).
    • Load via Google Fonts in app/root.jsx (or main layout) and set as the default font for the app (e.g. on body or Polaris wrapper).
  2. Bigger font
    • In theme overrides or Tailwind: set base font-size to 16px (or 1rem) and use larger sizes for headings (e.g. headingMd equivalent to 1.25rem, page title to 1.5rem).
  3. More spacing
    • Use larger gap and padding in BlockStack / InlineStack (e.g. gap="500" or gap="600" in Polaris; or Tailwind gap-6, p-6).
    • Add consistent bottom margin or gap between cards (e.g. 24px).
  4. Nicely styled buttons
    • Override Polaris Button styles (via theme tokens or a wrapping class): e.g. border-radius: 10px, padding: 12px 24px, font-weight: 600, and keep primary (filled) vs secondary (outline) clearly distinct.

5. Summary table

Section titled “5. Summary table”
ApproachFontBigger textMore spacingNicer buttonsEffort
A: Polaris + custom themeOverride tokens + Google FontToken overridesToken overridesToken overridesMedium
B: Polaris + TailwindTailwind + Google FontUtility classesUtility classesCustom classesLow–Medium
C: Polaris + global CSSOne CSS file + Google FontOverride in CSSUtility/margin classesCustom .btn-*Low
D: Replace PolarisDepends on library———Not recommended

Recommendation: Start with Option C (Polaris + global CSS) for a single overrides file (font, base size, spacing, buttons); if you later want more granular control, move to Option A (custom theme tokens) or add Option B (Tailwind) for specific screens.