tillty

Brand Identity

The tillty brand represents modern hospitality technology — fast, reliable, and beautifully simple. Our visual identity balances professionalism with approachability.

Logo & Wordmark

The tillty wordmark is always written in lowercase — even at the start of a sentence. This is a core part of our brand identity.

Primary Wordmark — Fugaz One
Accent Wordmark

Product Naming Convention

Each tillty product uses the primary wordmark paired with a product identifier in accent blue. The identifier should always be uppercase and use the Nunito font family.

tilltyPOS tilltyPAY tilltyTAP tilltyBI tilltyKDS tilltyDS

Colors

Our color palette is designed to work seamlessly in both light and dark modes. Use CSS variables for automatic theme switching.

Brand Colors

Primary
--color-primary
#142251
Accent
--color-accent
#198aff
Accent Hover
--color-accent-hover
#0070e0
Secondary
--color-secondary
#ffffff

Semantic Colors

Success
--color-success
#10b981
Warning
--color-warning
#f59e0b
Error
--color-error
#ef4444
Info
--color-info
#3b82f6

Text Colors

Primary Text
--text-primary
Secondary Text
--text-secondary
Tertiary Text
--text-tertiary

Background & Surface Colors

Body Background
--bg-body
Light: #ffffffDark: #111d47
Elevated
--bg-elevated
Light: #f4f7fcDark: #131f4a
Sunken
--bg-sunken
Light: #eef2f9Dark: #0f1a3f
Card Surface
--surface-card
Light: #ffffffDark: #131f4a

Typography

Typography creates hierarchy and personality. tillty uses three distinct font families for different purposes.

Font Families

Fugaz One
Display font for logo, brand highlights, and product names
--font-display: 'Fugaz One', cursive
Nunito
Heading font for titles, buttons, and UI labels
--font-heading: 'Nunito', sans-serif
Open Sans
Body font for paragraphs, descriptions, and general content
--font-body: 'Open Sans', sans-serif
JetBrains Mono
Monospace font for code, technical specs, and data
--font-mono: 'JetBrains Mono', monospace

Type Scale

--text-7xl4.5rem / 72px
Hero Display
--text-5xl3rem / 48px
Page Title
--text-3xl2rem / 32px
Section Heading
--text-xl1.25rem / 20px
Card Heading
--text-base1rem / 16px
Body text for paragraphs and general content. This is the default size for most readable content throughout the interface.
--text-sm0.875rem / 14px
Secondary text, captions, and helper text use this smaller size.
--text-xs0.75rem / 12px
Micro text for labels, badges, and fine print.

Font Weights

VariableValueUsage
--font-regular400Body text, paragraphs
--font-medium500Subtle emphasis
--font-semibold600Labels, navigation
--font-bold700Card headings, buttons
--font-extrabold800Page titles, hero text

Spacing

Consistent spacing creates rhythm and visual harmony. Our spacing scale uses a base unit of 4px with exponential growth for larger values.

Spacing Scale

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-6 24px
--space-8 32px
--space-12 48px
--space-16 64px
--space-24 96px

Layout Containers

VariableValueUsage
--container-sm640pxSmall content areas, modals
--container-md768pxBlog posts, articles
--container-lg1024pxStandard page content
--container-xl1280pxWide layouts
--container-2xl1440pxMaximum width, dashboards
--container-padding2remDefault horizontal padding

Buttons

Buttons trigger actions and guide users through flows. Our signature hover animation adds playful personality.

Button Variants

Button Sizes

Cards

Cards group related content and actions. They provide visual separation and interactive affordances.

Card Variants

⚡

Default Card

Basic card with subtle border. Good for static content displays.

🚀

Interactive Card

Hover to see the lift effect. Perfect for clickable items.

✨

Elevated Card

Pre-elevated with shadow for emphasis or featured content.

Forms & Inputs

Form elements for collecting user input with clear focus states.

Interactive Form Fields

All form field types with interactive state management.

Text Input

Supports onKeyDown for Enter key handling.

Email Input

Select

Multi-Select

Phone Input

Use preferredCountries: ['DK', 'SE', 'NO'] to show favorites at top.

Checkbox

Use labelChild for HTML content (links).

I agree to the terms and conditions

Textarea

Supports onKeyDown for Ctrl+Enter/Cmd+Enter handling.

Checkbox Group

Email notifications
SMS notifications
Push notifications

Radio Group

Free
Pro - $9/month
Enterprise

Static Examples

Static form field examples showing different states.

This field is required

Pills & Tags

Pills communicate status, categories, or metadata.

Pill Variants

Default Accent Success Warning Error

Loaders

Brand-focused loading indicator with animated tillty logo.

Brand Loader

The signature tillty loader with animated wave effect.

t i l l t y
Small
t i l l t y
Medium
t i l l t y
Large

With Message

t i l l t y

Loading...

t i l l t y

Submitting...

Calendar

Reusable calendar component with month/year picker, date selection, and constraints.

Calendar Variants

Single date selection, range selection, and loading state.

Mon
Tue
Wed
Thu
Fri
Sat
Sun
Date Selection
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Range Selection
January 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
t i l l t y
Loading

Time Slots

Time slot picker for scheduling interfaces.

Time Slot Variants

Basic selection, with disabled slots, and loading state.

With Disabled
No time slots available
Empty State
t i l l t y
Loading

Shadows

Shadows create visual hierarchy and depth. Use them intentionally to guide focus.

Shadow Scale

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-accent

Glass Effect

Glass Panel

Used for navigation bars and overlays. Combines translucent background with backdrop blur.

Border Radius

Rounded corners create a friendly, modern aesthetic.

Radius Scale

--radius-sm 4px
--radius-md 8px
--radius-lg 12px
--radius-xl 16px
--radius-2xl 20px
--radius-full 9999px

Motion

Thoughtful motion brings the interface to life.

Easing Functions

ease-out
ease-spring
ease-bounce

Durations

TokenValueUse Case
--duration-fast150msMicro-interactions
--duration-normal300msStandard transitions
--duration-slow500msComplex animations

Accessibility

tillty is committed to building inclusive products.

Focus States

All interactive elements have visible focus indicators. Tab through these elements to see the focus ring.

Press Tab to navigate between elements Link

Screen Reader Text

The .sr-only class hides content visually while keeping it accessible to screen readers.

Icon button with hidden label for screen readers
<button>✕<span class="sr-only">Close dialog</span></button>

Color Contrast

Maintain WCAG AA contrast ratios (4.5:1 for text, 3:1 for large text).

Good Contrast
#142251 on #FFFFFF
✓ 14.5:1
Poor Contrast
#a0a0a0 on #e0e0e0
✗ 1.8:1

Key Guidelines

  • Color Contrast — All text meets WCAG AA (4.5:1 for body, 3:1 for large text)
  • Focus States — Visible focus indicators on all interactive elements
  • Semantic HTML — Proper heading hierarchy and landmarks
  • Keyboard Navigation — All functionality accessible via keyboard

Responsive

tillty products work across all screen sizes. Use these breakpoints for consistent responsive behavior.

Breakpoints

Based on Tailwind CSS industry standards. Use max-width media queries for desktop-first approach.

NameMin WidthMax WidthTarget Devices
Mobile0px767pxPhones
Tablet768px1023pxTablets
Desktop1024px1535pxLaptops & Desktops
Large1536px—Large Displays