QuickApp.ai brand & design system

Logo

Keep clear space of at least the height of the mark on all sides. Do not recolour, stretch, rotate or add effects to the logo. Use the gold-on-dark wordmark on dark hero sections and the full-colour wordmark on white.

• /icons/app-icon.png

  App icon, favicon, social preview, schema.org logo (512x512 PNG)

• src/assets/quickapp-logo-full.png

  Full horizontal wordmark for light backgrounds

• src/assets/quickapp-logo-full-yellow-black.png

  Wordmark for dark / cinematic backgrounds

• src/assets/quickapp-logo.png

  Compact mark, used where space is tight

Browser theme colour: #007BFF

Colours — light theme

Colour tokens are stored as HSL triplets and consumed through semantic Tailwind classes such as bg-primary or text-muted-foreground. Never hardcode a hex value in a component.

• --background

  #ffffff · hsl(0 0% 100%)

  Page background

• --foreground

  #111827 · hsl(220 39% 11%)

  Default body text

• --card

  #ffffff · hsl(0 0% 100%)

  Card and panel surfaces

• --card-foreground

  #111827 · hsl(220 39% 11%)

  Text on cards

• --popover

  #ffffff · hsl(0 0% 100%)

  Popover and dropdown surfaces

• --popover-foreground

  #111827 · hsl(220 39% 11%)

  Text inside popovers

• --primary

  #111827 · hsl(220 39% 11%)

  Primary brand colour — headers, primary buttons, dark sections

• --primary-foreground

  #ffffff · hsl(0 0% 100%)

  Text on primary surfaces

• --primary-light

  #303a50 · hsl(220 25% 25%)

  Lighter primary tint for gradients and hovers

• --primary-dark

  #0a111f · hsl(220 50% 8%)

  Deepest primary shade for cinematic hero backgrounds

• --accent-gold

  #d79942 · hsl(35 65% 55%)

  Signature gold accent — highlights, pills, key CTAs

• --accent-gold-foreground

  #111827 · hsl(220 39% 11%)

  Text on gold surfaces

• --accent-bronze

  #cea67e · hsl(30 45% 65%)

  Secondary bronze accent for gradients

• --accent-bronze-foreground

  #111827 · hsl(220 39% 11%)

  Text on bronze surfaces

• --secondary

  #f8fafc · hsl(210 40% 98%)

  Secondary surfaces and muted buttons

• --secondary-foreground

  #273759 · hsl(220 39% 25%)

  Text on secondary surfaces

• --muted

  #f8fafc · hsl(210 40% 98%)

  Muted background blocks

• --muted-foreground

  #65758b · hsl(215 16% 47%)

  Secondary and supporting text

• --accent

  #f1f5f9 · hsl(210 40% 96%)

  Subtle accent background

• --accent-foreground

  #111827 · hsl(220 39% 11%)

  Text on accent background

• --success

  #16a249 · hsl(142 76% 36%)

  Success state

• --success-foreground

  #ffffff · hsl(0 0% 100%)

  Text on success surfaces

• --warning

  #d79942 · hsl(35 65% 55%)

  Warning state

• --warning-foreground

  #111827 · hsl(220 39% 11%)

  Text on warning surfaces

• --destructive

  #ef4343 · hsl(0 84% 60%)

  Errors and destructive actions

• --destructive-foreground

  #ffffff · hsl(0 0% 100%)

  Text on destructive surfaces

• --border

  #e5e7eb · hsl(220 13% 91%)

  Borders and dividers

• --input

  #e5e7eb · hsl(220 13% 91%)

  Form field borders

• --ring

  #111827 · hsl(220 39% 11%)

  Focus ring

• --sidebar-background

  #111827 · hsl(220 39% 11%)

  Application sidebar surface

• --sidebar-foreground

  #ffffff · hsl(0 0% 100%)

  Application sidebar surface

• --sidebar-primary

  #d79942 · hsl(35 65% 55%)

  Application sidebar surface

• --sidebar-primary-foreground

  #111827 · hsl(220 39% 11%)

  Application sidebar surface

• --sidebar-accent

  #303a50 · hsl(220 25% 25%)

  Application sidebar surface

• --sidebar-accent-foreground

  #ffffff · hsl(0 0% 100%)

  Application sidebar surface

• --sidebar-border

  #303a50 · hsl(220 25% 25%)

  Application sidebar surface

• --sidebar-ring

  #d79942 · hsl(35 65% 55%)

  Application sidebar surface

• --feature-foreground

  #fafafa · hsl(0 0% 98%)

  Theme colour

• --feature-muted

  #94a3b8 · hsl(215 20% 65%)

  Theme colour

Colours — dark theme

• --background

  #111827 · hsl(220 39% 11%)

  Page background

• --foreground

  #fafafa · hsl(0 0% 98%)

  Default body text

• --card

  #192234 · hsl(220 35% 15%)

  Card and panel surfaces

• --card-foreground

  #fafafa · hsl(0 0% 98%)

  Text on cards

• --popover

  #192234 · hsl(220 35% 15%)

  Popover and dropdown surfaces

• --popover-foreground

  #fafafa · hsl(0 0% 98%)

  Text inside popovers

• --primary

  #d79942 · hsl(35 65% 55%)

  Primary brand colour — headers, primary buttons, dark sections

• --primary-foreground

  #111827 · hsl(220 39% 11%)

  Text on primary surfaces

• --secondary

  #192234 · hsl(220 35% 15%)

  Secondary surfaces and muted buttons

• --secondary-foreground

  #fafafa · hsl(0 0% 98%)

  Text on secondary surfaces

• --muted

  #192234 · hsl(220 35% 15%)

  Muted background blocks

• --muted-foreground

  #94a3b8 · hsl(215 20% 65%)

  Secondary and supporting text

• --accent

  #242e42 · hsl(220 30% 20%)

  Subtle accent background

• --accent-foreground

  #d79942 · hsl(35 65% 55%)

  Text on accent background

• --success

  #1cce5e · hsl(142 76% 46%)

  Success state

• --success-foreground

  #111827 · hsl(220 39% 11%)

  Text on success surfaces

• --warning

  #e0af6c · hsl(35 65% 65%)

  Warning state

• --warning-foreground

  #111827 · hsl(220 39% 11%)

  Text on warning surfaces

• --destructive

  #f37272 · hsl(0 84% 70%)

  Errors and destructive actions

• --destructive-foreground

  #111827 · hsl(220 39% 11%)

  Text on destructive surfaces

• --border

  #242e42 · hsl(220 30% 20%)

  Borders and dividers

• --input

  #242e42 · hsl(220 30% 20%)

  Form field borders

• --ring

  #d79942 · hsl(35 65% 55%)

  Focus ring

• --sidebar-background

  #192234 · hsl(220 35% 15%)

  Application sidebar surface

• --sidebar-foreground

  #94a3b8 · hsl(215 20% 65%)

  Application sidebar surface

• --sidebar-primary

  #d79942 · hsl(35 65% 55%)

  Application sidebar surface

• --sidebar-primary-foreground

  #111827 · hsl(220 39% 11%)

  Application sidebar surface

• --sidebar-accent

  #242e42 · hsl(220 30% 20%)

  Application sidebar surface

• --sidebar-accent-foreground

  #fafafa · hsl(0 0% 98%)

  Application sidebar surface

• --sidebar-border

  #242e42 · hsl(220 30% 20%)

  Application sidebar surface

• --sidebar-ring

  #d79942 · hsl(35 65% 55%)

  Application sidebar surface

Gradients

Used for hero sections, cards and accent surfaces.

--gradient-primary (light)

linear-gradient(135deg, hsl(220 39% 11%), hsl(220 25% 25%), hsl(35 65% 55%))

--gradient-subtle (light)

linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%))

--gradient-hero (light)

linear-gradient(135deg, hsl(220 39% 11%) 0%, hsl(220 30% 20%) 35%, hsl(30 45% 65%) 100%)

--gradient-primary (dark)

linear-gradient(135deg, hsl(35 65% 55%), hsl(30 45% 65%))

--gradient-subtle (dark)

linear-gradient(180deg, hsl(220 39% 11%), hsl(220 35% 15%))

--gradient-hero (dark)

linear-gradient(135deg, hsl(220 39% 11%) 0%, hsl(220 30% 20%) 35%, hsl(35 65% 55%) 100%)

Typography

Inter 300, 400, 500, 600, 700 (Google Fonts); Instrument Serif for editorial accents

Sans stack

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif

Body font-family

'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif

Heading weight

600

Heading letter-spacing

-0.025em

Tailwind CSS v3 default type scale — the site uses no custom fontSize overrides.

Spacing, radius and shadows

Spacing unit

0.25rem (4px)

Spacing scale

Tailwind CSS v3 default spacing scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32 (x 0.25rem).

Container padding

2rem

Container max width

1400px

Base radius (--radius)

0.75rem

rounded-lg

var(--radius)

rounded-md

calc(var(--radius) - 2px)

rounded-sm

calc(var(--radius) - 4px)

--shadow-card (light)

0 4px 12px -2px hsl(220 39% 11% / 0.08), 0 8px 24px -4px hsl(220 39% 11% / 0.04)

--shadow-button (light)

0 2px 6px 0 hsl(220 39% 11% / 0.12), 0 2px 4px 0 hsl(220 39% 11% / 0.08)

--shadow-hero (light)

0 25px 50px -12px hsl(220 39% 11% / 0.25)

--shadow-card (dark)

0 4px 12px -2px hsl(0 0% 0% / 0.3), 0 8px 24px -4px hsl(0 0% 0% / 0.15)

--shadow-button (dark)

0 2px 6px 0 hsl(0 0% 0% / 0.2), 0 2px 4px 0 hsl(0 0% 0% / 0.12)

Breakpoints

2xl

1536px

xs

475px

sm

640px

md

768px

lg

1024px

xl

1280px

Motion

Tailwind's ease-out and ease-in-out are used for interface motion; framer-motion drives hero and mega-menu entrances.

accordion-down

accordion-down 0.2s ease-out

accordion-up

accordion-up 0.2s ease-out