clockless-design

name	clockless-design
description	Use this skill to generate well-branded interfaces and assets for Clockless AI, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable	true

Read the README.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Key files

• README.md — brand, content, visual, iconography foundations.
• colors_and_type.css — CSS variables + semantic type classes (.t-hero, .t-section, .t-app-*).
• assets/ — logos (SVG + PNG), favicon, OG image, and the upstream DESIGN-SYSTEM-original.md + tokens-original.css for reference.
• ui_kits/website/ — legacy website UI kit. Use the light-mode tokens for new production work.
• ui_kits/app/ — light-theme in-app kit (TopBar, TabBar, Dashboard, Chat).
• preview/ — card specimens rendered in the Design System tab.

When designing

• Light mode only — use warm product surfaces (#fff8f6 + earthy orange). Do not introduce a separate alternate marketing shell.
• Type — Space Grotesk for headlines (tight -0.02em to -0.04em), Plus Jakarta Sans or Inter for body. No other fonts.
• Casing — sentence case for everything. UPPERCASE only for eyebrow labels (0.18em tracking).
• CTAs — only "Book discovery call" (primary) and "Join waitlist" (secondary). Do not add "Learn more", "Get started", "Contact us".
• Emoji are allowed only in product-app info/content metadata rows. Keep marketing, category badges, nav, CTAs, and core brand marks restrained: use typographic glyphs (#, ~, », !, ✔) or Lucide for generic UI icons (stroke-width 1.75–2).
• Cards — 14–20px radius, white fill, 1px warm-tint border, shadow-sm default, shadow-md on hover + translateY(-4px).
• Buttons — pill (9999px radius), 44–52px min-height, gradient fill for primary, warm shadow rgba(160,59,0,.15).
• Motion — cubic-bezier(0.4, 0, 0.2, 1) standard; cubic-bezier(0.34, 1.2, 0.64, 1) for overshoot. Honor prefers-reduced-motion.