PDF Placeholder
Enterprise Onboarding Kit
A starter pack for enterprise clients covering rollout phases, governance checkpoints, and communication workflows.
Docs Placeholder
API Integration Guide
Implementation notes for authentication, webhook handling, and sector endpoint integration in staging and production.
Template Placeholder
Security Questionnaire Response Pack
Standard responses for vendor security reviews, compliance questionnaires, and procurement audits.
Frontend System Guide
Documented tokens and reusable page-building recipes.
This layer defines how future Hylani pages should be assembled. It centralizes palette, glass surfaces, motion behavior, and reusable section primitives so new routes follow the same premium system instead of diverging into ad hoc layouts.
Token Reference
Dark Palette
Background #0B0B0C | Surface #121214
Borders #1E293B and #334155
Light Palette
Background #FFFFFF | Surface #F8FAFC
Borders #E2E8F0 and #CBD5E1
Motion
Page transition 0.45s | stagger 0.08s
Card hover scale 1.02 with lift -4px
Implementation Rules
Prefer client-side wrappers for icon-heavy and motion-heavy surfaces when using lucide-react and framer-motion together.
Use PremiumBlocks and StorefrontPrimitives before creating a new one-off section pattern.
Public pages that depend on backend content must degrade gracefully to placeholders or empty states during prerender.
Gold accents are reserved for primary actions, counters, status highlights, and focus boundaries.
PremiumIntro
Hero or section lead-in block for top-of-page storytelling and framing copy.
Use when
Opening a route or introducing a major content section.
eyebrow labelheadlinesupporting body copymotion reveal
PremiumStatStrip
High-signal metrics row for operational counters, package highlights, or system status.
Use when
You need 3-4 concise proof points above supporting content.
valuelabelsupporting notekinetic hover state
PremiumFeatureGrid
Reusable feature/service/policy card matrix with icon-driven hierarchy.
Use when
Presenting grouped product capabilities, policies, or benefits.
icontitlebodyoptional eyebrowstaggered animation
PremiumChecklist
Compact operations or governance checklist for standards, principles, and commitments.
Use when
Displaying policy bullets or process guarantees as premium cards.
titlestacked checklist itemsmotion reveal
StorefrontPrimitives
Commerce-specific shell for product grids, cart panels, payment controls, and live notices.
Use when
Building or extending transactional client components in agro, tech, or fashion.
status railproduct cardscart rowspayment provider controlmessage surface