Dark Mode
Guidelines
This document outlines the rules, tokens, and component adaptations required to bring the Ancile Services design system into a premium, control-room dark mode. The goal is to feel calm, operator-grade, and highly legible without defaulting to pure SaaS tropes.
1. System Rules & Guidance
Core principles preserving consistency with light mode.
Typography, spacing, layouts, and component structure remain 100% identical to light mode. Only surface colors, contrast, and elevation shifts change.
Avoid pure black (#000000) for surfaces. Use #0A0A0A for canvas, #171717 for sections, and #1F1F1F for raised cards to create subtle modern depth.
Treat orange (#F97316) as a restrained signal. Use it for primary CTAs and key highlights. Never use it for large background floods in dark mode.
Replace heavy drop shadows with subtle borders (border-white/5 to border-white/10) and slight surface lighting shifts to separate planes.
2. Color System Tokens
3. Dark Component Variants
Brand orange with glowing shadow.
Translucent white surface with subtle border.
Base surface pill for eyebrows.
Soft accent fill for distinct categorization.
“Since switching to Ancile, our applicant volume increased by 300%. We finally have a reliable pipeline of qualified drivers for our routes.”
4. Homepage Adaptation
Example of the hero section translated into dark mode.
Stop Posting.
Start Hiring.
Done-for-you driver recruiting for FedEx Ground ISPs and Amazon DSP operators. We fill your pipeline so you can focus on operations, not HR.
