---
version: alpha
name: heyclicky
description: "Light interface measured from heyclicky.com: Inter type, blue accents, tonal surfaces and 8px corners."
colors:
  background: "#F5F5F5"
  surface: "#F5F5F5"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#626262"
  surface-container-low: "#FFFFFF"
  overlay: "#FEEA3D59"
  outline: "#65A8EF"
  outline-variant: "#0000000D"
  primary: "#65A8EF"
  on-primary: "#000000"
  secondary: "#221898"
typography:
  headline-display:
    fontFamily: Inter
    fontSize: 88px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.03em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.03em
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  code:
    fontFamily: Geist Mono
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.03em
  headline-display-mobile:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-sm-mobile:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.03em
rounded:
  sm: 4px
  md: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 5px
  md: 12px
  lg: 20px
  xl: 64px
  gutter: 8px
  section: 128px
  margin: 24px
components:
  button-primary:
    textColor: "{colors.on-primary}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.full}"
    padding: 0px 20px 1px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.full}"
    padding: 0px 20px 1px 16px
    height: 40px
  button-tertiary:
    textColor: "{colors.surface-container-low}"
    typography: "{typography.body-lg}"
    rounded: 100px
    padding: 0px 20px 1px 16px
    height: 40px
  button-ghost:
    textColor: "{colors.surface-container-low}"
    typography: "{typography.body-lg}"
    rounded: 100px
    padding: 0px 20px 1px 16px
  card:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0px
  link:
    textColor: "#000000BF"
---

# heyclicky Design System

## Overview

heyclicky describes itself as: “heyclicky is an ai buddy for your mac or windows pc. ask out loud and it sees your screen, teaches you any app and runs agents for you. free to try.” The interface is light, built on **Snow (#F5F5F5)** with **Near Black (#000000)** text, and **Blue (#65A8EF)** as the main accent.

Type is set in **Inter**, with **Geist Mono** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 8px.

Measured from [heyclicky.com](https://www.heyclicky.com/) on October 30, 2026 at 1440×900 and 390×844 from 232 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles, plus gradient stops #F7D64B, #D6E7FF, #A2C7FF, #99CBF8.

- **Snow (#F5F5F5):** Page background, seen 3 times. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 38 times. Token `on-surface`.
- **Slate (#626262):** Secondary text, seen 15 times. Token `on-surface-variant`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 19 times. Token `surface-container-low`, CSS `--tw-ring-offset-color`.
- **Vivid Yellow 35% (#FEEA3D59):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Blue (#65A8EF):** Borders and dividers, seen 8 times. Token `outline`.
- **Near Black 5% (#0000000D):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Blue (#65A8EF):** Most used accent color, seen 8 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Dark Indigo (#221898):** Accent in text, fills and borders, seen 2 times. Token `secondary`.

## Typography

**Inter** and **Geist Mono** (monospace) share the interface. Fallback stack: `Inter, Inter Fallback, Inter, -apple-system`.

- **headline-display:** Inter 88px at weight 500, line height 1.1, tracking -0.03em (56px on mobile). Page title (h1).
- **headline-lg:** Inter 56px at weight 500, line height 1.2, tracking -0.03em. Section headings (h2).
- **headline-md:** Inter 28px at weight 500, line height 1, tracking -0.03em. Sub-section headings.
- **headline-sm:** Inter 20px at weight 500, line height 1, tracking -0.03em, lowercase (24px on mobile). Card and feature titles.
- **body-md:** Inter 16px at weight 400, line height 1.5. Body text.
- **body-lg:** Inter 18px at weight 500, line height 1.5, tracking -0.03em. Lead paragraphs.
- **body-sm:** Inter 14px at weight 400, line height 1, tracking -0.03em. Secondary and small text.
- **label-md:** Inter 12px at weight 400, line height 1, tracking -0.03em, uppercase. Buttons, navigation and labels.
- **code:** Geist Mono 20px at weight 500, line height 1.5, tracking -0.03em. Code and technical values.

## Layout

Spacing is mostly on a 4px grid (74% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 5px, md 12px, lg 20px, xl 64px.
- **Sections:** 128px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 24px on each side of full-width sections.
- **Breakpoints:** 1023px, 1024px, 1439.98px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.08) 0px 4px 12px 0px`
- `rgba(0, 0, 0, 0.12) 0px 10px 24px 0px`
- `rgba(0, 0, 0, 0.12) 0px 10px 24px 0px, rgba(255, 255, 255, 0.8) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset`

## Shapes

Most elements use 8px corners. Measured radii, most used first:

- **md (8px):** 88 elements.
- **sm (4px):** 52 elements.
- **full (9999px):** 32 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“download for windows”):** transparent fill, #000000 text, 18px/500, 999px radius, padding 0px 20px 1px 16px, border 1px solid #626262, shadow `rgba(0, 0, 0, 0.12) 0px 10px 24px 0px`.
- **button-secondary (“download for mac”):** transparent fill, #000000 text, 18px/500, 999px radius, padding 0px 20px 1px 16px, border 1px solid #221898, shadow `rgba(0, 0, 0, 0.12) 0px 10px 24px 0px`.
- **button-tertiary (“play video”):** transparent fill, #FFFFFF text, 18px/500, 100px radius, padding 0px 20px 1px 16px, border 1px solid #626262, shadow `rgba(0, 0, 0, 0.12) 0px 10px 24px 0px`.
- **button-ghost (“play video”):** transparent fill, #FFFFFF text, 18px/500, 100px radius, padding 0px 20px 1px 16px, border 1px solid #626262, shadow `rgba(0, 0, 0, 0.12) 0px 10px 24px 0px`.
- **card:** #FFFFFF fill, #000000 text, 16px/400, 8px radius, padding 0px, shadow `rgba(0, 0, 0, 0.08) 0px 4px 12px 0px`.
- **link:** transparent fill, #000000BF text, padding 0px.

## Do's and Don'ts

- Do use #F5F5F5 for the page and lift surfaces in small steps: #FFFFFF.
- Do keep text in 2 levels: #000000, #626262.
- Do reserve #65A8EF for primary actions and key highlights.
- Do set headlines in Inter with tight tracking (-0.03em).
- Do reuse the measured spacing steps (5px, 12px, 20px).
- Do use 8px corners on most elements; larger surfaces also use 4px.
- Don't introduce new font families beyond Inter and Geist Mono.
- Don't use #65A8EF for large backgrounds or body text.
- Don't make interface transitions slower than 0.45s.

## Motion

Interface transitions are quick: 0.12s, 0.15s, 0.45s, 0.22s. Longer ambient animations run 7s, 0.8s.

- **Easing:** `ease`, `ease-out`, `linear`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/heyclicky.com/), the free DESIGN.md generator (engine 2026.10.29+bf9d681d83cf).