Clockless Design System

Design system for Clockless AI — AI operations for small service businesses. This system captures the brand as shipped on clockless.ai (commit b99f4a9) and in the companion app, and makes it reusable for new designs, mocks, and production work.

What is Clockless?

One-liner: AI operations systems for small service business.

Clockless builds custom AI agents for owner-operators (general contractors, healthcare clinics, HVAC, real estate teams, e-commerce) — replacing hours of repetitive ops work (follow-ups, scheduling, client comms, triage) without adding headcount. Not a generic chatbot; a consultative, service-led offer ("Book Discovery Call") where Clockless designs and deploys a system trained on the buyer's business.

The current site uses one light-mode personality bridged by the same logo mark, fonts, and brand orange:

Surface	Theme	Vibe
clockless.ai (marketing)	Light — warm cream + primary orange	Calm, operational, owner-operator friendly.
app.clockless.ai (product)	Light — warm cream + primary orange	Dense, readable, long-session friendly.

Sources

• Codebase (provided as local mount, read-only): clockless-website/ — React + Vite marketing site with the production DESIGN-SYSTEM.md and tokens.css at clockless-website/brand/.
• Design reference artifacts copied into assets/:
  • logo.svg, logo-circle.svg, logo-square.{svg,png}, logo-white.png, favicon.svg, icon-192.png, icon-512.png, og-image.png
  • DESIGN-SYSTEM-original.md — upstream spec
  • tokens-original.css — upstream CSS variables
  • styles-original.css — upstream full stylesheet (reference for component CSS)
• Deployed site: https://clockless.ai

No Figma was provided.

Index — files in this folder

Path	Purpose
README.md	This file. Brand overview, content + visual foundations, iconography.
SKILL.md	Agent Skill manifest — use this design system as a Claude Code skill.
colors_and_type.css	Single source of truth CSS variables + semantic type classes.
assets/	Logos, icons, reference spec, original stylesheet, preview images.
preview/	Cards rendered in the Design System tab (colors, type, components).
ui_kits/website/	Legacy marketing site UI kit + interactive screens; new production work should use light-mode tokens.
ui_kits/app/	Light-theme in-app UI kit (nav, cards, dashboard).

Content fundamentals

Voice & tone

• Professional, clear, consultative — not flashy or startup-bro.
• Confident without overpromising. Spec explicitly calls out: avoid "always-on", "never sleeps", "revolutionary", "custom AI operators". (The legacy landing page did use some of this language; newer copy is calmer.)
• Mobile-first small-business owners — speak to owner-operators, not engineers.

Casing

• Sentence case for everything — H1s, section headings, buttons, CTAs. (e.g. Book discovery call, not Book Discovery Call.)
• UPPERCASE only for eyebrow labels (8–14px, letter-spacing 0.08–0.18em): WHAT YOUR AI DOES, HOW IT WORKS, TESTIMONIALS.

Person & address

• You / your for the buyer. No "we" on the product pitch — keep it about them.
• "Your AI", "your clients", "your workflow" — possessive framing of the product.
• "We" appears in process language: "We learn how your business runs", "We design and deploy…"

Copy examples

• Hero (current): "The Agent. Built for You." / "Your all-in-one AI — internal ops, client service, private concierge."
• Hero (spec-refined): "Clockless helps small service businesses run response, coordination, and back-office work without adding more headcount."
• Section: "Stop doing it yourself. Let your AI handle everything."
• Pricing: "Three tiers. One AI workforce. Pick your level."
• FAQ q's lead with plain-language objections: "How secure is my data?", "What happens if the AI gets something wrong?"

Punctuation & rhythm

• Em-dashes (with spaces) for extended clauses — like this one.
• Periods at the end of short value-prop lines. Full stops, not exclamations.
• Occasional one-word emphasis in bold or italic ("everything", "Built for You.").

CTA system (keep it disciplined)

• Primary: Book discovery call
• Secondary: Join waitlist (or email fallback)
• Do not introduce parallel CTAs (See pricing, Learn more, Contact us, Get started).

Emoji / marks

• Marketing and categorical badges stay typographic: #, ~, », !. Keep the restraint for brand marks, nav, CTAs, hero cards, and bento cards.
• Product-app info/content rows may use emoji when the row is user data (Email, Phone, Location, Budget, Notes, etc.). Treat emoji as metadata affordances, not decoration: one emoji per row, warm-tint container, no animated emoji, and no emoji in primary navigation.

---

Visual foundations

Color vibe

• Light theme (app) — warm off-white (#fff8f6) with a subtle warm radial diagonal background gradient, not a flat fill. Deep earthy orange (#a03b00 → #c94c00) remains the dominant brand color. Purple and blue-purple (#7b40e0, #4d44e3) appear as secondary accents in gradients and status chips, never as the primary identity.
• Light mode everywhere — warm off-white (#fff8f6) with deep earthy orange (#a03b00 → #c94c00) as the dominant brand color. Green pulse (#10B981) remains the health/status signal.
• Imagery vibe: warm, human, calm. No grayscale, no neon gradients.

Type

• Headlines — Space Grotesk (700, tight letter-spacing -0.02em to -0.06em, line-height 0.9 for hero, 1.1 for sections).
• Body — Plus Jakarta Sans.
• Mono — SF Mono / Menlo for code blocks.
• Sizes use clamp() for fluid responsive scaling. Eyebrow labels uppercase, tracked out.

Backgrounds

• Soft radial glows (600px circles, 120px blur, ~8–16% opacity) in corners of hero sections — warm orange + cool purple on light.
• Dot-grid motifs — animated <circle> matrix that morphs between pictograms (phone, envelope, clock, calendar, heart, star, dollar) in the hero. Base dot radius 2px, halo 3.8px, active 6px.
• No photography by default; the brand is illustration-free and relies on mark + motion + glow. No hand-drawn illustrations, no repeating patterns or textures beyond the dot matrix.

Animation

• Easing: cubic-bezier(0.4, 0, 0.2, 1) (standard) and cubic-bezier(0.34, 1.2, 0.64, 1) (emphasized, slight overshoot).
• Durations: 0.15s fast, 0.18s standard, 0.3s smooth, 0.5s slow.
• Pulse: 2-2.6s infinite — the green "online" dot.
• Scroll fade-in: IntersectionObserver-triggered, 0.7s.
• Hover: translateY(-2px to -4px) + shadow-depth increase.
• Press: transform: scale(0.97) — subtle shrink.
• Reduced motion: honored via @media (prefers-reduced-motion) → all animations disabled.

Hover / press states

• Hover: raise (translateY(-2px)) + deepen shadow; gradient buttons go from rgba(160,59,0,0.15) to rgba(160,59,0,0.25) in shadow opacity. Link hover = color shift to --primary.
• Press / active: transform: scale(0.97) on buttons. Nav links have no press state.

Borders

• Default: rgba(0, 0, 0, 0.06).
• Strong (emphasis): rgba(0, 0, 0, 0.12).
• Outline token: #8d7166 (warm gray).
• Outline variant (subtle): #e1bfb2 (light warm tint).

Shadows (systematic, not ad-hoc)

• sm 0 1px 2px rgba(30,27,25, 0.04) — subtle cards.
• md 0 4px 12px rgba(30,27,25, 0.08) — elevated cards.
• lg 0 8px 24px rgba(30,27,25, 0.12) — modals, dropdowns.
• Accent buttons: 0 8px 24px rgba(160, 59, 0, 0.15) → hover 0 12px 32px rgba(160, 59, 0, 0.25).
• Warm brown tint, not neutral gray — shadows are rgba(30, 27, 25, *) not rgba(0, 0, 0, *).

Protection vs capsules

• Pills/capsules everywhere — status chips, trust pills, nav CTAs, badges all use border-radius: 9999px. Corner radii smooth progressively: sm 8 → md 12 → lg 16 → xl 20 → 2xl 28 → pill.
• Protection gradients: the light hero uses warm radial gradients behind text rather than scrims/fades. Testimonial cards have a subtle inner gradient; scrims are rare.

Transparency & blur

• Glass — rgba(255, 255, 255, 0.4–0.97) / rgba(11, 20, 38, 0.62–0.74) + backdrop-filter: blur(12–24px) saturate(1.5).
• Used for: fixed nav bars, dropdowns, modals, testimonial/feature cards.
• Borders are always 1px solid — glass without a border looks soft/mushy.

Corner radii

• Buttons, pills, tabs → 9999px.
• Inputs → 14–16px.
• Cards → 16–20px.
• Hero cards, modals → 20–28px.

Cards (the anchor component)

• Light theme: background: #ffffff (or var(--surface-container-lowest)), border: 1px solid var(--border), border-radius: 14–20px, shadow: sm default → md on hover. Glass variant: rgba(255, 255, 255, 0.4) + 20px blur + warm border.
• Hover: translateY(-4px) + shadow lift.

Layout rules

• Fixed top nav (72px on marketing, 56px on app). In the product app, the top nav should not draw its own chrome background, border, or blur; it floats directly over the app's diagonal warm gradient. Browser/PWA theme-color should use the warm top-of-gradient tint (#fff1eb), not a separate flat chrome color or brand orange.
• Top-level tab pages should not paint their own page background underneath the nav. Let the shared app shell gradient continue through the nav and content; reserve white/warm surfaces for cards, controls, sheets, and repeated items.
• Mobile bottom tab bar keeps the iOS 26-style floating glass capsule: about 70px inner height, 14px minimum bottom inset, a single safe-area-inset-bottom pass on iPhone, 34-46px radius, translucent white fill, warm shadow, and a raised active bubble. Do not flatten it into a full-width Material-style bottom bar or stack extra padding on top of the safe area.
• Container width: min(1200px, calc(100vw - 48px)) on web; 480px max for mobile app, 720px for desktop app.
• Breakpoints: < 768px mobile (single column, bottom tabs), ≥ 768px desktop (side panels, top nav).

Gradients

• Primary 135deg, #a03b00 → #c94c00 — logos, primary buttons.
• Hero 135deg, #a03b00 → #7b40e0 — gradient text, hero emphasis.
• CTA 135deg, #c94c00 → #E8400D — call-to-action buttons (warm).
• Secondary logic 135deg, #a03b00 → #4d44e3 — sparing data or emphasis accents.

---

Iconography

Logo

• 9-dot diamond grid in rgb(192, 85, 42) — dots vary in size (2.2–5px radius) and opacity (0.45–1.0). Sourced from assets/logo.svg, logo-circle.svg, logo-square.{svg,png}, logo-white.png.
• The dot grid is the core brand motif — it reappears as the animated hero matrix.
• Wordmark: "Clockless" or "Clockless AI" in Space Grotesk 700, letter-spacing -0.02em to -0.04em. Always paired with the mark; minimum clearspace 25% of mark width.

Icon strategy (current state in the codebase)

The website does not use a general-purpose icon library. Instead it uses:

• Typographic glyphs as iconographic labels: # (Internal Operations), ~ (Client Service), » (Private Concierge), ! (Always learning / Manual Bottleneck), ✔ (Clockless Advantage). Rendered in Space Grotesk 700, containerized in a 48×48 rounded-square with brand-orange fill.
• CSS-drawn marks for UI primitives: checkmarks (angled border rotate), X icons (two rotated bars), info tooltips (i in a circle), pricing table checkmarks (solid circle + rotated border).
• Hand-rolled SVG pictograms for the animated hero dot grid (phone, envelope, clock, person, calendar, chat, checklist, dollar, star, diamond logo, lightbulb, heart).

Substitution

Because the codebase has no general icon system, general UI icons (search, chevron, menu, close, etc.) in this design system use Lucide (via CDN):

<script src="https://unpkg.com/lucide@0.460.0/dist/umd/lucide.min.js"></script>

Lucide matches the brand's aesthetic: stroke weight 1.75, rounded caps/joins, minimal detail. Use stroke icons at 16px (inline) or 20px (tab bar), 2px stroke width. FLAGGED substitution — the upstream brand explicitly avoids a pictorial icon system, so use Lucide sparingly and prefer typographic glyphs for navigational/categorical labels.

Emoji

• Allowed in product-app info/content metadata only. Use the --font-emoji token and the .t-app-info-emoji utility. Good examples: ✉️, ☎️, 📍, 👤, 💰, 📝.
• Not for brand, marketing, navigation, or category badges. Use typographic symbols (→, », …, ×) or CSS-drawn marks in those contexts.

PWA / favicon

• icon-192.png (192×192) and icon-512.png (512×512) for PWA.
• favicon.svg — simplified 3×3 dot grid (readable at 32×32).
• og-image.png — social share card.

---

Usage (quick start)

<link rel="stylesheet" href="colors_and_type.css">
<body>
  <h1 class="t-hero">The Agent. <em>Built for you.</em></h1>
  <p class="t-body-lg">Your all-in-one AI, custom-trained…</p>
  <button class="btn btn-primary">Book discovery call</button>
</body>

For production code, lift the --* CSS variables and the .t-* type classes directly. For mocks/prototypes, import both colors_and_type.css and the relevant UI kit (ui_kits/website/ or ui_kits/app/).

---

Caveats

• No Figma was provided. The design system is reverse-engineered from the production codebase (which already contains an excellent in-house DESIGN-SYSTEM.md).
• Fonts: Space Grotesk is self-hosted from fonts/SpaceGrotesk-VariableFont_wght.ttf (brand-provided, variable weight 300–700). Plus Jakarta Sans and Inter still load from Google Fonts CDN — request brand font files for those if you want them self-hosted.
• Icon system: the codebase has no general icon set — we substitute Lucide via CDN for generic UI icons (see Iconography section). Flagged for review.
• App UI kit: the attached codebase is the marketing site; the product app (app.clockless.ai) is referenced but no source code was provided. The app UI kit is built from the design tokens + DESIGN-SYSTEM.md app-scale specs; it is a representative reconstruction, not a pixel-accurate copy.