{ HIG }
Human Interface Guidelines
Components, tokens, patterns, and integration guides for building Holidayseva products.
Browse Components
Core
→
Foundation
Colour · Typography · Spacing · Grid · Motion · Shadows
Primitives
→
Atoms
Button · Input · Toggle · Badge · Avatar · Spinner · 13 more
Controls
→
Forms
Calendar · Date Picker · Autocomplete · File Upload · 5 more
Structure
→
Layout
Grid · Flex · Stack · Container · Sidebar · 8 more
→
Navigation
Navbar · Sidebar · Drawer · Breadcrumb · Pagination · 2 more
Patterns
→
Interactive
Tabs · Accordion · Dropdown · Tooltip · Command Palette · 6 more
Display
→
Data Display
Card · Table · Timeline · Stats · Review Card · 7 more
States
→
Feedback
Alert · Toast · Modal · Skeleton · Empty State · 3 more
Patterns
→
Composite
Booking Card · Search Bar · Profile Card · Filters · 6 more
Assets
→
Media
Image · Video · Gallery · Carousel · Lightbox · Thumbnail Grid
Import Framework
1
Import the design system CSS
One file covers all tokens, layout grid, and component base styles.
<link rel="stylesheet"
href="/design-system.css">2
Add the PHP page shell
Include header, drawer, both sidebars, and footer on every page.
<?php include __DIR__ . '/header.php'; ?>
<div class="page-layout">
<aside class="sidebar-left">...</aside>
<main class="page-main">...</main>
<aside class="sidebar-right">...</aside>
</div>3
Load component CSS per page
Only load what the page uses — each component has its own stylesheet.
<!-- per-page, after design-system.css -->
<link rel="stylesheet"
href="/UI/Atom/toggle/toggle.css">
<link rel="stylesheet"
href="/UI/Forms/calendar/calendar.css">4
Load component JS before </body>
Auto-inits on
DOMContentLoaded — no manual wiring needed.<!-- before </body> -->
<script
src="/UI/Atom/toggle/toggle.js"
></script>CSS Custom Properties
| Token | Default | Used for |
|---|---|---|
--color-brand | #FF385C | Buttons, active states, links |
--color-text | #1d1d1f | Primary text |
--color-text-2 | #424245 | Body copy, secondary labels |
--color-border | #e5e5ea | Borders, dividers, rules |
--color-surface | #f2f2f7 | Inputs, chips, hover fills |
--radius-sm / md / lg | 6px / 10px / 14px | Buttons / cards / modals |
--font-sans | -apple-system, 'Helvetica Neue' | All UI text |
--font-mono | 'SF Mono', 'Fira Code', Menlo | Code blocks, tokens |