Kiosk Styleguide

Color System

Comprehensive day/night mode color swatches for all UI elements. All variables are defined in css/onlyatthekiosk.css and automatically switch based on the data-theme attribute.

Backgrounds

Primary Light

--bg-primary-light

#FFFFFF

Primary Dark

--bg-primary-dark

#000000

Secondary Light

--bg-secondary-light

#F1F1F1

Secondary Dark

--bg-secondary-dark

#101010

Navbar Light

--bg-navbar-light

#FFFFFF

Navbar Dark

--bg-navbar-dark

#111111

Text Colors

Primary Light

--text-primary-light

#000000

Primary Dark

--text-primary-dark

#FFFFFF

Secondary Light

--text-secondary-light

#4A4A4A

Secondary Dark

--text-secondary-dark

#B0B0B0

Nav Link Hover

--text-nav-link-hover

#FF6600

Button Colors

Primary BG

--btn-primary-bg-light

#000000

Primary BG Dark

--btn-primary-bg-dark

#FFFFFF

Secondary BG

--btn-secondary-bg-light

transparent

Accent BG

--btn-accent-bg-light

#FF6600

Accent Hover

--btn-accent-hover-bg-light

#FB9F89

Border Colors

Primary Light

--border-primary-light

#E7E7E7

Primary Dark

--border-primary-dark

#2A2A2A

Focus Light

--border-focus-light

#000000

Focus Dark

--border-focus-dark

#FFFFFF

Accent Colors (Theme-agnostic)

Orange

--accent-orange

#FF6600

Orange Light

--accent-orange-light

#FB9F89

Teal

--accent-teal

#81AE9D

Brown

--accent-brown

#C4AF9A

Color System Usage

All color variables are defined in css/onlyatthekiosk.css

Use semantic variable names that automatically adapt to the theme:

  • --bg-primary - Main background color
  • --text-primary - Main text color
  • --btn-primary-bg - Primary button background
  • --nav-link-hover - Navigation link hover color
  • --slider-dot - Slider pagination dot color
  • --form-input-border - Form input border color
  • --card-bg - Card background color
  • --alert-success-bg - Success alert background

Theme Toggle: All colors automatically switch between light and dark modes based on the data-theme attribute on the <html> element.

Typography

Font Families

GeneralSans (Primary)

The quick brown fox jumps over the lazy dog

SuisseIntl (Secondary)

The quick brown fox jumps over the lazy dog

Headings

H1

Heading 1

H2

Heading 2

H3

Heading 3

H4

Heading 4

H5

Heading 5

H6

Heading 6

Body Text

Body Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Body Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buttons

Button styles use the comprehensive color system. All buttons automatically adapt to light/dark theme.

Uses: --btn-primary-bg, --btn-primary-text

Uses: --btn-secondary-bg, --btn-secondary-text, --btn-secondary-border

Uses: --btn-accent-bg, --btn-accent-text

Button States

--btn-primary-hover-bg

--btn-secondary-hover-bg

--btn-accent-hover-bg (#FB9F89)

Spacing

8px

16px

24px

32px

48px

64px

96px

128px