Claude Code
Cursor
Codex
GitHub Copilot
vidIQ
DESIGN.md · measured October 30, 2026
heyclicky design system
Light interface · Inter · 8px corners
- #F5F5F5
- #FFFFFF
- #000000
- #65A8EF
From heyclicky.com ↗ · 232 elements at 1440×900 and 390×844 Independent analysis, not affiliated with heyclicky
heyclicky color palette
10 colors with hex codes, grouped by where each one is used on the page.
Surfaces
Snow
#F5F5F5backgroundPage background · 3×White
#FFFFFFsurface-container-low · --tw-ring-offset-colorRaised areas one step from the page · 19×Vivid Yellow 35%
#FEEA3D59overlayTranslucent fill for cards and controls · 1×Text
Near Black
#000000on-surfacePrimary text and headings · 38×Slate
#626262on-surface-variantSecondary text · 15×Near Black
#000000on-primaryText and icons on primaryAccents
Blue
#65A8EFprimaryMost used accent color · 8×Dark Indigo
#221898secondaryAccent in text, fills and borders · 2×Borders
Blue
#65A8EFoutlineBorders and dividers · 8×Near Black 5%
#0000000Doutline-variantSecondary dividers · 1×Gradients
heyclicky fonts and type scale
2 families.
AaInterWeights 400, 500Inter, Inter Fallback, Inter, -apple-system
AaGeist MonoMonospace · Weights 500Geist Mono, Geist Mono Fallback, ui-monospace, monospace
headline-displayPage title (h1)heyclicky88px · 500 · 1.1 · -0.03em
mobile 56px
mobile 56px
headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog56px · 500 · 1.2 · -0.03em
headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog28px · 500 · 1 · -0.03em
headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog20px · 500 · 1 · -0.03em
mobile 24px
mobile 24px
body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5
body-lgLead paragraphsThe quick brown fox jumps over the lazy dog18px · 500 · 1.5 · -0.03em
body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 1 · -0.03em
label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog12px · 400 · 1 · -0.03em
codeCode and technical valuesconst ready = true;20px · 500 · 1.5 · -0.03em
Contrast
Text on #F5F5F5
AaAAA
19.2:1AaAA
5.5:1Spacing
No strict grid · 74% are multiples of 4px
xs4pxsm5pxmd12pxlg20pxxl64pxgutter8pxsection128pxmargin24pxBreakpoints: 1023px 1024px 1439.98px
Shapes
Corner radii, most used first.
md8px · 88×
sm4px · 52×
full9999px · 32×
Depth
Shadow
Shadow
Shadow
Shadow
heyclicky UI components
Rebuilt from the measured CSS.
download for windows
download for mac
play video
play video
Card
Inline link
Motion
Interface transitions
0.12s0.15s0.45s0.22seaseease-out
Do’s and don’ts
Rules written from the measurements, so a coding agent stays on style.
- Use #F5F5F5 for the page and lift surfaces in small steps: #FFFFFF.
- Keep text in 2 levels: #000000, #626262.
- Reserve #65A8EF for primary actions and key highlights.
- Set headlines in Inter with tight tracking (-0.03em).
- Reuse the measured spacing steps (5px, 12px, 20px).
- Use 8px corners on most elements; larger surfaces also use 4px.
- Introduce new font families beyond Inter and Geist Mono.
- Use #65A8EF for large backgrounds or body text.
- Make interface transitions slower than 0.45s.
heyclicky DESIGN.md227 lines
---
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).
What you can build with it
Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.
Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.
Build a landing page for my product. Follow for every color, font, spacing value, corner and button.
Need a page behind a login?
The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.
More designs
Brand examples →
Another site? Make a DESIGN.md from any link.
FAQ
heyclicky design system questions
What font does heyclicky use?
heyclicky’s website uses Inter (weights 400 and 500), with Geist Mono for code. Page titles are 88px at weight 500 (56px on phones) and body text is 16px. Measured on October 30, 2026.
What are the heyclicky colors and hex codes?
On heyclicky.com: #F5F5F5 (snow) for the background, #000000 (near black) for text and #65A8EF (blue) as the main accent, with #221898 (dark indigo) as another accent. The color palette above lists all 10 colors with their hex codes and where each one is used.
What is the heyclicky design system?
The design system on this page is heyclicky.com’s, as measured on October 30, 2026: Inter type, #65A8EF as the main color and 8px corners, written down as a DESIGN.md. It is not heyclicky’s own documentation.
What is the heyclicky DESIGN.md?
A plain-text file with heyclicky’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.
How do I use it with Claude Code or Cursor?
Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.
Is this heyclicky’s official design system?
No. Sitepeel measured it from heyclicky.com’s public page on October 30, 2026. It is an independent analysis, not made or approved by heyclicky.
Can I use heyclicky’s style in my own product?
Use it to learn, prototype and compare. For a real product, make the style your own, and never copy heyclicky’s logo, name, pictures or text.
How accurate are the values?
Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.