Audience fit
Built for founder-led service teams in contracting, healthcare, HVAC, and operator-heavy businesses that need trust before spectacle.
Clockless Design System
One brand. Two product surfaces.
Brand, tokens, logo assets, components, motion, and implementation references for the dark public website and the warm app-facing system layer.
Brand Foundations
Clockless should feel precise, premium, and operational.
This page is not a token dump. It explains why the brand looks this way, who it is for, and which assets are stable enough to reuse across future website and product work.
One brand, two surfaces
The public website stays dark, cinematic, and high-trust. The app-facing surface gets warmer, denser, and easier to work inside for long sessions.
Stable assets
Logo family, cyan/orange website accents, warm app tokens, signal green, glass shells, and orbital glow are canonical. They are not one-off experiments.
Review contract
Every block here is designed to be screenshotted, referenced in PRs, and reused as the baseline for later marketing and product surfaces.
Logo System
Real logo family, with usage boundaries.
These are the actual shipped assets from `public/brand/`. Show them on both dark and light grounds so later implementations do not guess about fit.
Primary Mark
Default use on dark surfaces, nav bars, and hero areas.
120px minimum width
Circle
Avatar, app icon, profile surfaces, and compact navigation.
40px minimum
Square
Tile-based contexts, social previews, and app launcher slots.
48px minimum
White PNG
Fallback for dark-image overlays and exported static decks.
120px minimum width
Favicon
Browser tab, system shortcuts, and tiny brand affordances.
16px minimumClear space
Keep at least the favicon width around the mark. Never crowd it with dense UI chrome.
Background pairing
Primary logo belongs on dark surfaces. Circle and square variants handle smaller, lighter contexts.
Don’t
Do not recolor, stretch, crop, or place the mark on noisy gradients that destroy edge clarity.
Color System
Separate the website shell from the app layer.
The dark website palette and the warm app palette belong to the same brand, but they solve different jobs. They must be displayed with context, not merged into one blob.
Website dark palette
High-trust, cinematic, and public-facing.
Background--brand-bg-dark
Page canvas and large trust surfaces.
#060B18Elevated--brand-bg-elevated-dark
Sticky nav, glass shell, raised zones.
#0B1426Card--brand-bg-card-dark
Cards, demos, and comparison slices.
#101D35Cyan--brand-accent-cyan
Links, highlights, orbital glow, section accents.
#00D4FFOrangeBRAND.md baseline
CTA energy, urgency, and secondary emphasis.
#FF6B35Green--brand-green
Live signal, success, and health state.
#10B981App light palette
Warm, denser, and easier for long working sessions.
Canvas--brand-bg
App docs and warm system background.
#FFF8F6Surface Low--brand-surface-container-low
Soft panels and grouped sections.
#FBF2EFSurface Mid--brand-surface-container
Inputs, muted surfaces, dividers.
#F5ECE9Surface Base--brand-surface-container-lowest
Cards and primary work surfaces.
#FFFFFFPrimary--brand-primary
Primary buttons and brand anchors.
#A03B00Tertiary--brand-tertiary
Secondary logic, data accents, and app contrast.
#4D44E3Success#10B981
Status dots, healthy flows, completed loops.
#10B981Info#3B82F6
System info, links, and contextual assistance.
#3B82F6Pilot#8B5CF6
Premium states, experimental features, and guidance.
#8B5CF6Warning#F59E0B
Needs attention, pending review, cautious states.
#F59E0BDanger#EF4444
Errors, overdue states, broken automations.
#EF4444Typography
Space Grotesk leads. Plus Jakarta Sans carries the work.
Typography must work in English and Chinese contexts. Use real sample copy instead of raw token labels so hierarchy is legible at a glance.
AI systems that never sleep.
AI 系统持续在线，不等人起床。Space Grotesk 700 · clamp(3.2rem, 8vw, 6rem)Systemized, cinematic, controlled.
系统化，但不做工具感堆砌。Space Grotesk 700 · clamp(2rem, 4vw, 3rem)Readable enough for long operator sessions and client-facing explanation.
给老板看得懂，也给客户感到安心。Plus Jakarta Sans 500 · 1rem / 1.7WEBSITE DARK / APP LIGHT / LIVE SIGNAL
网站深色 / App 浅色 / 状态可见Plus Jakarta Sans 600 · 0.78rem / trackingSurfaces, Borders, Radius, Shadows
Depth comes from tone and blur before it comes from borders.
Decide first whether the section needs glass, solid structure, or simply more space. Radius stays soft and modern; borders stay ghosted and supportive.
Use for sticky nav, hero utility panels, and high-trust overlays. Blur supports depth, not decoration.
Use for dense reading, operator cards, pricing, and testimonial blocks where content needs stable contrast.
If a section is already visually distinct, use rhythm and whitespace instead of wrapping it in another card.
Radius8 / 12 / 16 / 20 / 28 / pill
ShadowSubtle in app, atmospheric on dark shell
BorderGhost white on dark, warm outline on light
Components
Components should show shipping behavior, not museum poses.
Every family below includes a usage note and a do / don’t rule so later pages can inherit the right behavior instead of only copying shapes.
Buttons & statusPrimary, outline, live, review
Systems onlineAutomation readyHuman review
Inputs & navWarm product-grade controls
OverviewPipelineClients
Cards & comparisonPricing, testimonials, feature rows
Growth
$699/mo
Most popular for founder-led service teams.“Clockless gives our operation a visible rhythm instead of a pile of reminders.”
Marcus Chen · Summit BuildersAI inbox triageIncluded
Buttons
Primary for decisive CTA, outline for secondary navigation, ghost/text for local actions.
Do: One clear primary action per cluster.Don’t: Do not make every button glow.Pills & status
Use pill labels for state, mode, and signal. Keep copy short and legible.
Do: Live, review, pilot, blocked.Don’t: Do not use badge stacks as decoration.Inputs
Warm surface, clear border, and focused accent ring. Form fields should feel product-grade, not marketing-only.
Do: Use for lead capture and app forms.Don’t: Do not rely on placeholders as labels.Nav surfaces
Top nav is glass and shallow. Section nav is compact, sticky, and mobile-scrollable.
Do: Keep anchor nav accessible on small screens.Don’t: Do not hide core navigation on mobile.Cards
Cards can carry testimonials, pricing, feature comparisons, and operator work queues.
Do: Differentiate cards with tone and scale.Don’t: Do not repeat identical card grids without hierarchy.Status indicators
Green pulse for live, cyan for ready, amber for human review, red for failure.
Do: Tie motion to a real system state.Don’t: Do not animate everything at once.Motion & Loaders
Curated motion, not a wall of experiments.
The raw source libraries still exist under `/brand/loaders.html` and `/brand/animations.html`. Shipping UI should only promote the core set below.
AI thinking
Background processing
Composing or conversational reply
Async workflow progression
Page load: use staggered reveal and orbital atmosphere, not constant motion everywhere.
AI thinking: recommend Breathe and Orbit loaders for contemplative or background reasoning states.
Async action: use Typing, Pulse, or Pipeline for explicit in-progress moments.
Health state: keep the green pulse reserved for live / online / healthy signal.
Reduced motion: disable pulsing, spinning, and floating while preserving information hierarchy.
Experimental / not default
Galaxy and Morse are visually interesting but too ornamental for default UI.
Bounce and Hourglass feel louder than the Clockless baseline and should stay experimental.
Use `/brand/loaders.html` and `/brand/animations.html` as source libraries, not as shipping galleries.
Composition Examples
How the system combines into real screens.
These blocks show what happens when tokens, surfaces, motion, and copy are composed into meaningful UI slices rather than isolated specimens.
Dark trust shell with live system cues.
Large headline, sparse accent copy, glow field, and one high-confidence CTA. The hero should feel premium before it feels busy.
Tonal cards with asymmetric emphasis.
Feature grids can break symmetry. One card leads, others support. Use cyan and orange sparingly to guide scan order.
Warm content block inside a dark page.
Pricing earns a calmer, lighter island so cost and scope are easy to compare without glare fatigue.
Operator surfaces favor density over spectacle.
Warm surfaces, disciplined borders, and strong typography make long operational sessions feel stable instead of flashy.
Implementation Notes
Direct guidance for future builds.
This page should act as the implementation contract for later website and product work, not just a presentation artifact.
Tokens: source from `~/.clockless/data/brand/tokens.css` and `~/.clockless/data/brand/DESIGN-SYSTEM.md`.
Website baseline: follow `clockless-website/SITE.md` and the approved `b99f4a9` visual language from `BRAND.md`.
Logo assets: use the real files under `public/brand/` and do not substitute generated mock marks.
Motion sources: curate from `public/brand/loaders.html` and `public/brand/animations.html`; do not dump every experiment onto shipping pages.
Static vs interactive: color, type, logo, and usage guidance can stay static; loaders and section anchors should remain interactive and responsive.