Ticketping

Brand

// COLORS

Color Palettes

Full color ranges for core design tokens

BASE COLORS

spaceblack #020202
daylight #FAFAF9

SAND

Light mode neutral

50 #f3f2f2
100 #e4e3e2
200 #cbcac8
300 #afaeab
400 #94928f
500 #7a7874
600 #615f5c
700 #494846
800 #32312f
900 #181716
950 #0d0d0c

CEMENT

Dark mode neutral

50 #f3f5f6
100 #e5e9eb
200 #cbd3d7
300 #b1bdc3
400 #9aaab2
500 #7f939d
600 #647882
700 #49585f
800 #313b40
900 #181d20
950 #0d1011

PARROT

Success / Positive

50 #f5faef
100 #e9f5dc
200 #d5ebbc
300 #bee199
400 #aad779
500 #94cd56
600 #78b536
700 #598628
800 #3c5b1b
900 #1d2b0d
950 #101807

WATER

Info / Links

500 #45abf7
600 #1f98f5

FOREST

Resolved

100 #E2F3EB
500 #4CB782

BROWNPAPER

Waiting

50 #FBF9F3
200 #F2E9D4
500 #DFCB99
600 #D2B66F
700 #C4A045
800 #9F8032
// TYPOGRAPHY

Typography

Mostly obvious from this page, but here it is anyway

FONT FAMILIES

font-display (InterVariable)

Section headings and page titles

font-sans (Default body)

Body text, descriptions, and general content throughout the app

font-mono (GeistMonoVariable)

#4CB782 · 96×96 · $29/mo · TKT-1234

HEADING SIZES

text-3xl Heading
text-2xl Heading
text-xl Heading
text-lg Heading

BODY TEXT SIZES

text-base The quick brown fox jumps over the lazy dog
text-sm The quick brown fox jumps over the lazy dog
text-xs The quick brown fox jumps over the lazy dog

FONT WEIGHTS

font-300 Light
font-400 Regular
font-500 Medium
font-600 Semibold
font-700 Bold
// LINKS

Links

Inline link styles used across the app

WITH ICON

View installation guide

WITHOUT ICON

View installation guide

BLOG / PROSE

Read more about how we built this in our installation guide for step-by-step instructions.

BLOG / PROSE SM

Read more about how we built this in our installation guide for step-by-step instructions.

BLOG / PROSE SM + NEW TAB

Read more about how we built this in our installation guide for step-by-step instructions.

// LOGO

Logo & Identity

Brand marks and wordmarks for various use cases

LOGO MARK

on light
on dark

FAVICON

Favicon SVG
SVG
Favicon PNG
96×96 PNG
Favicon ICO
ICO

WORDMARK

on light
on dark

FULL LOGO

on light
on dark

ANIMATED LOGO

animated
// BUTTONS

Buttons

Button styles and variants used across the application

VARIANTS

btn-primary
btn-secondary
btn-rose
btn-transparent

LANDING CTA

Primary buttons with animated caret arrow (hover to see animation)

btn-caret
secondary + caret

SIZES

btn-xxs
btn-xs
btn-sm
btn-md
btn-lg
btn-xl

STATES

default
disabled
loading
default
disabled
loading
// FORMS

Form Elements

Inputs, selects, checkboxes, and toggles

TEXT INPUT

class="form-input"

SELECT DROPDOWN

Priority
Status

<StandardSelect />

CHECKBOX & SWITCH

<Checkbox /> · <Switch />

// TICKET_STATUS

Ticket Status Labels

Visual indicators for different ticket states

Open open
Resolved resolved
Waiting for Customer waiting-for-customer
Spam spam
// PRIORITY

Priority Labels

Priority indicators with colored dots

Urgent
urgent
High
high
Medium
medium
Low
low

COLOR VALUES

urgent
#ef4444
high
#fb923c
medium
#facc15
low
rgb(127 147 157 / 50%)
// TOASTS

Toast Notifications

Click buttons to trigger different toast types

USAGE

import { toast } from 'svelte-sonner'

// Success
toast.success('Your action was completed')

// Error
toast.error('Something went wrong')

// Info
toast.info('New ticket received')

// Warning
toast.warning('Session expires in 5 minutes')

// Loading with update
const id = toast.loading('Processing...')
toast.success('Done!', { id })