mole sai

Generated Nov 1, 2026

DESIGN.md for hark.com

hark.com8 colors6 componentshark-serif + gt-standard-m-standard

Remix

12 screenshots captured· hark.com

1 / 12 · Hark · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Hark
description: |
  Hark's design system embodies a premium, forward-thinking aesthetic rooted in
  deep minimalism and deliberate restraint. The visual language prioritizes
  clarity and trust through a sophisticated dark canvas paired with refined
  serif typography for headlines and clean sans-serif for body copy. Every
  element is purposeful—nothing ornamental clutters the space. The atmosphere is
  calm, intelligent, and slightly futuristic, evoking a sense of capable
  confidence. Color is used sparingly as an accent; surfaces shift subtly
  through a carefully calibrated neutral scale that creates depth without visual
  noise. This is a system built for focus: the user's attention flows naturally
  to what matters.
source:
  url: "https://hark.com"
  pagesAnalyzed: 6
  extractedAt: 2026-11-01
  tokensMeasured: true
colors:
  primary: "#2A2B34"
  canvas: "#141414"
  surface: "#1E1F24"
  on-primary: "#FFFFFF"
  ink: "#FFFFFF"
  body: "#F5F5F7"
  muted: "#B1BCD2"
  faint: "#7B8499"
  neutral-1: "#000000"
typography:
  display-xl:
    fontFamily: hark-serif
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: 0px
  display-lg:
    fontFamily: hark-serif
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  display-lg-strong:
    fontFamily: hark-serif
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  display-md:
    fontFamily: hark-serif
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: 0px
  display-sm:
    fontFamily: hark-serif
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.32
    letterSpacing: 0px
  display-sm-strong:
    fontFamily: hark-serif
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.32
    letterSpacing: 0px
  heading-md:
    fontFamily: hark-serif
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.32px
  heading-sm:
    fontFamily: gt-standard-m-standard
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body-xl:
    fontFamily: gt-standard-l-standard
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.32
    letterSpacing: 0px
  body-lg:
    fontFamily: gt-standard-l-standard
    fontSize: 21px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body-md:
    fontFamily: gt-standard-m-standard
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-sm:
    fontFamily: gt-standard-l-standard
    fontSize: 16.8px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0px
  body-xs:
    fontFamily: gt-standard-m-standard
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-xs-strong:
    fontFamily: gt-standard-m-standard
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0px
  button-sm:
    fontFamily: gt-standard-m-standard
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  button-xs:
    fontFamily: gt-standard-m-standard
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  label:
    fontFamily: gt-standard-l-standard
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  caption-xs:
    fontFamily: gt-standard-m-standard
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: 0.12px
  caption-xs-tight:
    fontFamily: gt-standard-l-standard
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 20px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 44px
  band: 80px
borderWidths:
  thin: 1px
  medium: 2px
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#121213"
    textMuted: "#747474"
    border: "#D8D8D8"
    accent: "#2A2B34"
    accentFg: "#FFFFFF"
    focusRing: "#2A2B34"
    elevation: shadow
  dark:
    bg: "#141414"
    surface: "#1E1F24"
    surfaceRaised: "#303136"
    text: "#FFFFFF"
    textMuted: "#F5F5F7"
    border: "#303030"
    accent: "#616378"
    accentFg: "#FFFFFF"
    focusRing: "#2A2B34"
    elevation: "border+surface"
components:
  button-filled:
    typography: "{typography.button-sm}"
    textColor: "rgb(29, 29, 31)"
    height: 48px
    padding: "0px 20px 0px 20px"
    rounded: 24px
    backgroundColor: "{colors.body}"
  button-primary:
    typography: "{typography.button-xs}"
    textColor: "{colors.ink}"
    border: "1px solid color(srgb 1 1 1 / 0.08)"
    height: 44px
    padding: "0px 24px 0px 24px"
    rounded: 22px
    backgroundColor: "{colors.primary}"
  button-filled-sm:
    typography: "{typography.button-xs}"
    textColor: "{colors.ink}"
    border: "1px solid color(srgb 1 1 1 / 0.08)"
    height: 44px
    padding: "0px 24px 0px 24px"
    rounded: 22px
    backgroundColor: "{colors.surface}"
  button-text:
    typography: "{typography.body-xs}"
    textColor: "{colors.ink}"
    height: 19.5938px
  card:
    textColor: "rgb(29, 29, 31)"
    fontSize: 15px
    fontFamily: gt-standard-l-standard
    fontWeight: 400
  card-lg:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    padding: "16px 16px 16px 16px"
    rounded: "{rounded.xs}"
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    padding: "44px 0px 0px 0px"
    backgroundColor: "{colors.canvas}"
  footer-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    padding: "8px 0px 0px 0px"
  link:
    typography: "{typography.caption-xs-tight}"
    textColor: "{colors.body}"
  link-2:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
  badge-secondary:
    typography: "{typography.body-xs}"
    textColor: "{colors.canvas}"
    height: 31.5938px
    padding: "6px 16px 6px 16px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.on-primary}"
  badge-text:
    typography: "{typography.body-xs}"
    textColor: "{colors.canvas}"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    height: 44px
states:
  other-disabled:
    target: other
    state: disabled
    opacity: 0.4
  other-focus-visible:
    target: other
    state: focus-visible
    outline: none
  link-hover:
    target: link
    state: hover
    textDecoration: underline
  button-hover:
    target: button
    state: hover
    borderColor: "rgba(0, 0, 0, 0)"
  other-hover:
    target: other
    state: hover
    borderColor: "rgba(0, 0, 0, 0)"
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 44
    bodyPx: 18
    sectionPaddingX: 0
  - width: 768
    containerWidth: 720
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 80
    bodyPx: 18
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 976
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 80
    bodyPx: 18
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1164
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 80
    bodyPx: 18
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1164
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 80
    bodyPx: 18
    sectionPaddingX: 0
coverage:
  statesFound: 20
  gradientsFound: 0
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Hark

1. Visual Theme & Atmosphere

Hark's design system embodies a premium, forward-thinking aesthetic rooted in deep minimalism and deliberate restraint. The visual language prioritizes clarity and trust through a sophisticated dark canvas paired with refined serif typography for headlines and clean sans-serif for body copy. Every element is purposeful—nothing ornamental clutters the space. The atmosphere is calm, intelligent, and slightly futuristic, evoking a sense of capable confidence. Color is used sparingly as an accent; surfaces shift subtly through a carefully calibrated neutral scale that creates depth without visual noise. This is a system built for focus: the user's attention flows naturally to what matters.

Key Characteristics

Deep, almost-black canvas ({colors.canvas} — #141414) establishes a refined, premium foundation
Minimal accent color ({colors.primary} — #2A2B34) used selectively for CTAs and active states
Serif headlines (hark-serif) paired with geometric sans-serif body (gt-standard-m-standard, gt-standard-l-standard) create visual hierarchy and personality
Neutral ramp provides subtle, non-distracting surface differentiation
No decorative color—every hue serves a functional role
Sharp and pill-shaped button radiuses (0px and 9999px) establish distinct button personalities
Generous whitespace and measured spacing create breathing room
Typography-first design—headlines scale dramatically (up to 80px) and anchor visual weight
Interaction states are subtle and refined, prioritizing elegance over visual feedback intensity

2. Color Palette & Roles

Primary

Brand Accent ({colors.primary} — #2A2B34): Primary CTA fills, active states, brand accent in hero sections and key interactive elements. Slightly darker than the surface layer, creating subtle but perceptible emphasis.

Neutral Scale

Canvas ({colors.canvas} — #141414): Default page background; the deepest, most neutral surface. Establishes the system's premium dark aesthetic.
Surface ({colors.surface} — #1E1F24): Card and panel backgrounds, slightly elevated from canvas. Creates subtle layering without harsh contrast.
Ink ({colors.on-primary} — #FFFFFF): Primary text color on brand surfaces and key headings. Ensures readability and visual dominance.
Body ({colors.body} — #F5F5F7): Body copy and general text on dark surfaces. Warm white that feels softer than pure white, reducing eye strain.
Muted ({colors.muted} — #B1BCD2): Secondary text, captions, and subtle labels. Used for metadata and supporting information.
Faint ({colors.faint} — #7B8499): Tertiary text, placeholder text, and disabled states. Recedes visually while remaining legible.

Decorative

Neutral ({colors.neutral-1} — #000000): Pure black, used decoratively and for specific edge cases. No primary semantic role in the current system.

3. Typography Rules

Font Family

Primary Display & Headings: hark-serif (serif stack for display, heading, and large-scale text; fallback to system serif)
Secondary Body & UI: gt-standard-m-standard and gt-standard-l-standard (geometric sans-serif for body, buttons, navigation; fallback to system sans-serif)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	hark-serif	80px	400	1.12	0px	Hero headlines; maximum visual impact
Display LG	hark-serif	48px	400	1.3	0px	Major section titles
Display LG Strong	hark-serif	48px	700	1.3	0px	Emphasis variant of Display LG
Display SM	hark-serif	40px	400	1.32	0px	Secondary headlines
Display SM Strong	hark-serif	40px	700	1.32	0px	Emphasis variant of Display SM
Display MD	hark-serif	44px	400	1.12	0px	Mid-size headlines
Heading MD	hark-serif	32px	400	1.12	-0.32px	Card and section headings; tight tracking for elegance
Body XL	gt-standard-l-standard	24px	400	1.32	0px	Large body text; marketing copy
Body LG	gt-standard-l-standard	21px	500	1.3	0px	Prominent body text with medium weight
Body MD	gt-standard-l-standard	18px	400	1.4	0px	Standard body copy and list items
Body SM	gt-standard-l-standard	16.8px	400	1.27	0px	Slightly smaller body text
Body XS	gt-standard-m-standard	14px	400	1.4	0px	Small body text; secondary copy
Body XS Strong	gt-standard-m-standard	14px	500	1	0px	Small text with emphasis; links and labels
Label	gt-standard-l-standard	15px	500	1.3	0px	Form labels and input annotations
Button SM	gt-standard-m-standard	15px	500	1.3	0px	Medium button text
Button XS	gt-standard-m-standard	14px	400	1	0px	Small button and input text
Heading SM	gt-standard-m-standard	14px	500	1.4	0px	Compact headings
Caption XS	gt-standard-m-standard	12px	400	1.12	0.12px	Tiny text; captions and footnotes
Caption XS Tight	gt-standard-l-standard	12px	400	1.3	0px	Compact captions

Principles

Serif for Headlines: hark-serif creates visual distinction and personality at scale; the large letter-spacing reduction on Heading MD (-0.32px) tightens tracking for premium elegance.
Sans-Serif for Body: Clean, geometric sans-serif ensures legibility and modern feel for continuous reading and UI labels.
Line Height Restraint: Display sizes use tight line-height (1.12) for compact, confident headlines; body text opens to 1.4 for comfortable reading.
Letter Spacing Variation: Most sizes use 0px; Heading MD introduces negative tracking (-0.32px) and Caption XS adds slight positive spacing (0.12px) for refinement.
Weight Hierarchy: Body text is 400; emphasis uses 500 or 700. Display text is consistently 400 unless explicitly "Strong."
Vertical Rhythm: Line heights maintain proportional spacing that feels intentional and designed, not accidental.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#2A2B34)
Text Color: {colors.on-primary} (#FFFFFF)
Padding: 0px 24px
Height: 44px
Font: {typography.button-xs} (14px, weight 400)
Border Radius: {rounded.xs} (20px) — yields a subtle pill shape
Border: 1px solid color(srgb 1 1 1 / 0.08) — ultra-faint white border for definition
Box Shadow: none
Interaction: Hover state defined via custom CSS variables; focus uses 2px solid outline in muted color

Secondary / Filled Button (Light Variant)

Background: {colors.body} (#F5F5F7)
Text Color: #1D1D1F (near-black)
Padding: 0px 20px
Height: 48px
Font: {typography.button-sm} (15px, weight 500)
Border Radius: {rounded.full} (9999px) — full pill
Border: none
Box Shadow: none
Width: 380px (measured on login form)

Ghost / Text Button

Background: transparent
Text Color: {colors.on-primary} (#FFFFFF)
Padding: 0px
Height: auto
Font: {typography.button-xs} (14px, weight 400)
Border Radius: {rounded.none} (0px)
Border: none
Box Shadow: none
Interaction: Underline on hover; opacity 0.8 on hover for subtlety

Cards & Containers

Card Default

Background: transparent
Border: none
Border Radius: {rounded.none} (0px)
Padding: 0px
Text Color: #1D1D1F
Font: {typography.body-md} (18px, weight 400)
Box Shadow: none

Card Large (Pricing / Featured)

Background: transparent (with implied {colors.surface} context in design)
Border Radius: {rounded.xs} (20px)
Padding: {spacing.md} (16px)
Text Color: {colors.on-primary} (#FFFFFF)
Font: {typography.body-md} (18px, weight 400)
Height: 444px (pricing tier cards)
Box Shadow: none

Inputs & Forms

Text Input

Background: {colors.surface} (#1E1F24)
Text Color: {colors.body} (#F5F5F7)
Placeholder Color: {colors.faint} (#7B8499)
Font: {typography.button-xs} (14px, weight 400)
Border: 2px solid (medium border width)
Border Radius: {rounded.xs} (20px)
Padding: 12px 16px (inferred from standard spacing)
Label: {typography.label} (15px, weight 500)
Focus State: 2px solid outline in {colors.body} color

Navigation

Primary Navigation

Background: transparent
Text Color: {colors.on-primary} (#FFFFFF)
Font: {typography.button-xs} (14px, weight 400)
Height: 44px (header nav)
Padding: 0px
Border Radius: {rounded.none} (0px)
Border: none
Interaction: Hover applies background color var(--color-button-background-color-hover) and text color var(--color-button-color-hover)

Footer Navigation

Background: {colors.canvas} (#141414)
Text Color: {colors.on-primary} (#FFFFFF)
Font: {typography.body-md} (18px, weight 400)
Padding: {spacing.section} (44px) top padding
Border Radius: {rounded.none} (0px)

Badges

Secondary Badge

Background: {colors.on-primary} (#FFFFFF)
Text Color: {colors.canvas} (#141414)
Padding: 6px 16px
Font: {typography.button-xs} (14px, weight 400)
Border Radius: {rounded.xs} (20px)
Border: none
Usage: "2× more usage", "10× more usage" tier indicators

5. Layout Principles

Spacing System

Base Unit: {spacing.xs} (8px)

Scale:

{spacing.xxs} = 4px — Micro spacing; gaps between inline elements
{spacing.xs} = 8px — Tight spacing; small padding, close-grouped items
{spacing.sm} = 12px — Compact spacing; form fields, small containers
{spacing.md} = 16px — Standard spacing; card padding, moderate gaps
{spacing.lg} = 20px — Generous spacing; larger button padding, section breaks
{spacing.xl} = 24px — Large spacing; header padding, prominent gaps
{spacing.xxl} = 32px — Extra-large spacing; container padding, major section separation
{spacing.xxxl} = 40px — Double-large spacing; hero spacing, major layout breaks
{spacing.section} = 44px — Section-level spacing; content padding, page sections
{spacing.band} = 80px — Full-page band spacing; hero sections, major visual divisions

Usage Context:

Inline elements and tight groupings use {spacing.xxs} and {spacing.xs}
Form elements and cards use {spacing.md} to {spacing.lg}
Section breaks and page structure use {spacing.section} and {spacing.band}

Grid & Container

Max Width: 1164px (measured at 1280px+ viewports)
Column Strategy: 2-column grid consistent across all breakpoints (375px, 768px, 1024px, 1280px, 1440px)
Section Padding Horizontal: 0px on mobile and desktop (content is edge-to-edge or centered within the max-width container)
Content Column Width: 343px (375px viewport), 720px (768px viewport), 976px (1024px viewport), 1164px (1280px+)

Whitespace Philosophy

Hark's layout philosophy emphasizes breathing room and clarity. Content does not crowd edges; vertical rhythm is established through generous section spacing ({spacing.band} = 80px between major content blocks). Horizontal whitespace balances content width, ensuring no single line of text exceeds comfortable reading length. Whitespace is as intentional as color and typography—it signals premium quality and reduces cognitive load.

Border Radius Scale

{rounded.none} = 0px — Applied to buttons (primary, some text), cards (default), navigation, and footer. Sharp corners establish technical, minimal aesthetic.
{rounded.xs} = 20px — Applied to secondary buttons (large variant), card large, input fields, and badge components. Subtle softening for interactive elements.
{rounded.full} = 9999px — Applied to secondary/filled buttons. Extreme pill shape signals a distinct, approachable call-to-action.

Border Widths

Thin: 1px — Applied to primary button borders; ultra-subtle definition
Medium: 2px — Applied to input field borders; provides clear focus and interaction affordance

6. Depth & Elevation

Hark's depth model is color-blocking: elevation is achieved through surface color changes, not shadows. There are no measurable shadow values in the extracted token data, indicating that the system relies entirely on surface contrast to communicate depth.

Level	Treatment	Use
Base / Canvas	`{colors.canvas}` (`#141414`)	Default page background; deepest layer
Surface / Elevated	`{colors.surface}` (`#1E1F24`)	Card and panel backgrounds; one step above canvas
Interactive / CTA	`{colors.primary}` (`#2A2B34`)	Button fills, active states; emphasis layer
Text / Ink	`{colors.on-primary}` (`#FFFFFF`)	Headings and primary text; foreground layer

Shadow Philosophy: The absence of shadows is intentional. This system prioritizes clean, flat surfaces with distinct color roles. Depth emerges from contrast between carefully calibrated neutrals, not from soft drop shadows. This approach feels modern, minimal, and premium—every visual shift is purposeful and mathematically defined by the color scale, not organic blur.

Opacity Levels

2% (0.02) — Ultra-faint overlay; barely perceptible, used for delicate background effects
40% (0.40) — Moderate opacity; disabled or secondary interactive states
50% (0.50) — Half opacity; hover overlays, semi-transparent surfaces

Z-index / Layering

Base Layers: z-index 1, 2, 5 — Standard document flow; background and mid-layer components
Dropdown / Overlay Layers: z-index 10, 20, 30, 40, 50 — Progressive stacking for dropdowns, modals, and floating UI; z-index 50 is topmost (e.g., alerts, tooltips)

7. Do's and Don'ts

Do

Prioritize Readability: Always use {colors.body} or {colors.on-primary} for body text; never drop contrast below AA standards on dark surfaces.
Use Serif Headlines: Deploy hark-serif for Display and Heading roles to establish visual hierarchy and brand personality; reserve sans-serif for body and UI labels.
Respect Spacing Scale: Use defined spacing tokens ({spacing.xs} through {spacing.band}) exclusively; do not invent intermediate values.
Apply Color-Blocking for Depth: Use surface color shifts (canvas → surface → primary) to communicate layering; avoid shadows.
Button Radiuses Intentionally: Use {rounded.none} for primary buttons (technical, sharp) and {rounded.full} for secondary CTAs (approachable, pill); {rounded.xs} for input fields and badges.
Maintain Whitespace: Include minimum {spacing.md} padding inside containers; use {spacing.band} between major sections to prevent visual clutter.
Hover States Subtly: Apply opacity or color shifts; avoid abrupt visual jumps that feel jarring.

Don't

Don't Invent Colors: The palette is fixed at 8 colors. Do not add grays, accent colors, or semantic status ramps outside the defined tokens.
Don't Use Shadows for Depth: The system is shadow-free. Communicate elevation through color and surface contrast only.
Don't Mix Font Stacks: Serif is for headlines; sans-serif is for body and UI. Never apply serif to body text or sans-serif to Display roles.
Don't Abuse Opacity: Opacity is only for hover states (40%, 50%) and ultra-faint backgrounds (2%); do not use it for text readability fixes.
Don't Crowd the Canvas: Maintain breathing room. Never set padding lower than {spacing.md}; never set section gaps below {spacing.section}.
Don't Declare Semantic Colors: The site does not ship error, success, or warning states. Do not invent a red/green/yellow palette; stay within the 8-color system.
Don't Overshadow Typography: Typography is the visual backbone. Do not compete with headlines using color or decoration; let hierarchy emerge from size and weight.

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Largest Heading Size	Body Size	Section Padding X
375px (Mobile)	343px	2	44px	18px	0px
768px (Tablet)	720px	2	80px	18px	0px
1024px (Laptop)	976px	2	80px	18px	0px
1280px (Desktop)	1164px	2	80px	18px	0px
1440px (Large Desktop)	1164px	2	80px	18px	0px

Key Observations:

No breakpoint collapse: The grid remains 2 columns across all viewport sizes; no mobile hamburger menu appears (nav links visible count = 0 across all sizes).
Content width scales linearly: Grows from 343px to 1164px, then caps at 1280px+ viewports.
Typography scaling: Display headlines jump from 44px (mobile) to 80px at 768px+; body remains constant at 18px.
Max-width ceiling: Content container maxes at 1164px; viewports wider than 1280px receive equal padding on both sides.

Touch Targets

Minimum touch target size: 44px × 44px (inferred from button height measurements; primary button = 44px, secondary button = 48px). All interactive elements (buttons, links, form inputs) must meet or exceed this size to ensure accessibility on touch devices.

Collapsing Strategy

Mobile (375px): Content flows single-column where applicable; card layouts remain 2-column per grid strategy. Section padding is 0 (edge-to-edge); content relies on container max-width for centering.
Tablet (768px): Content width expands to 720px; typography scales up (Display headlines jump to 80px). Grid structure remains unchanged.
Desktop (1024px+): Content width approaches full available space (1164px cap); significant whitespace appears on ultra-wide displays. No further layout shifts.
No Hamburger Menu: Navigation structure does not collapse; if menu items exist, they reflow horizontally at all breakpoints.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Active State: Primary (#2A2B34)
Background / Canvas: Canvas (#141414)
Card / Elevated Surface: Surface (#1E1F24)
Heading / Primary Text: Ink (#FFFFFF)
Body Copy: Body (#F5F5F7)
Secondary / Muted Text: Muted (#B1BCD2)
Tertiary / Placeholder: Faint (#7B8499)
Decorative: Neutral (#000000)

Iteration Guide

Typography Hierarchy: Serif (hark-serif) for all Display and Heading roles (80px down to 32px); sans-serif (gt-standard-m-standard, gt-standard-l-standard) for body and UI text (24px down to 12px). Maintain the exact sizes and weights listed in Section 3.
Color Blocking for Depth: Never use shadows. Establish depth through surface color shifts: canvas → surface → primary. All interactive elements float atop these layers via color and border treatment, not elevation.
Button Personalities: Primary buttons are sharp ({rounded.none} = 0px) and dark (#2A2B34); secondary buttons are full pills ({rounded.full} = 9999px) and light (#F5F5F7). Input fields and badges use {rounded.xs} (20px).
Spacing Discipline: Use only the 10 defined spacing tokens. Section breaks = {spacing.band} (80px). Container padding = {spacing.section} to {spacing.xxl}. Never interpolate between scale steps.
Responsive Scaling: Content width caps at 1164px. Headlines scale 44px → 80px at 768px breakpoint; body text remains 18px across all viewports. Section padding is always 0 (relies on container max-width).
Opacity for Interaction: Hover states use 40% or 50% opacity (not shadows). Focus states use 2px solid outline. Disabled states use 40% opacity. No other opacity values.
Z-index Stacking: Base = 1–5, Dropdowns = 10–50. Modals and alerts occupy z-index 50. Do not exceed this range.
Interaction Refinement: Link hovers underline or shift opacity (0.8). Button hovers shift background via color-mix. Focus-visible uses 2px outline. Active states may use inset shadows (defined via CSS variables in the source).

10. Known Gaps

Semantic Color Roles: The site does not expose error, success, warning, or info states in its extracted styles. No semantic status ramp exists; do not invent one.
Shadow Definitions: No measurable box-shadow values were found across the extraction. Elevation relies entirely on color-blocking.
Gradient or Mesh Backgrounds: No gradients or decorative background meshes were detected; the system uses flat, solid color blocks only.
Decorative Neutral: The color {colors.neutral-1} (#000000) was extracted but has no assigned semantic role; it appears used decoratively or in edge cases not captured in the 6-page analysis.
Interaction State Completeness: While hover, focus, and active states were partially captured via CSS variable references, some state implementations rely on custom CSS variables (var(--current-button-color-hover), etc.) whose exact computed values could not be extracted. Implementations should reference the component patterns provided and test against a live instance.
Authenticated / Gated Content: The extraction covered 6 public pages only; any UI surfaces behind authentication or paywalls were not analyzed.
Dark Mode Derivation: Only one theme (dark) was directly measured. No light-mode companion exists in the extracted data.
Animation Timings: No CSS transitions, animations, or timing functions were extracted; the document specifies static styles only.
Component States Beyond Hover/Focus/Active: Disabled, loading, and empty states were partially captured but may not be exhaustively documented; refer to "Interaction States" in the extracted data for specific CSS variable definitions.
Print / Accessibility Overrides: No print styles or high-contrast mode adjustments were extracted; assume standard contrast rules apply.

Token Reference

colors:
  primary: "#2A2B34"
  canvas: "#141414"
  surface: "#1E1F24"
  on-primary: "#FFFFFF"
  body: "#F5F5F7"
  muted: "#B1BCD2"
  faint: "#7B8499"
  neutral-1: "#000000"

typography:
  display-xl:
    font: hark-serif
    size: 80px
    weight: 400
    line-height: 1.12
    letter-spacing: 0px
  display-lg:
    font: hark-serif
    size: 48px
    weight: 400
    line-height: 1.3
    letter-spacing: 0px
  display-lg-strong:
    font: hark-serif
    size: 48px
    weight: 700
    line-height: 1.3
    letter-spacing: 0px
  display-sm:
    font: hark-serif
    size: 40px
    weight: 400
    line-height: 1.32
    letter-spacing: 0px
  display-sm-strong:
    font: hark-serif
    size: 40px
    weight: 700
    line-height: 1.32
    letter-spacing: 0px
  display-md:
    font: hark-serif
    size: 44px
    weight: 400
    line-height: 1.12
    letter-spacing: 0px
  heading-md:
    font: hark-serif
    size: 32px
    weight: 400
    line-height: 1.12
    letter-spacing: -0.32px
  heading-sm:
    font: gt-standard-m-standard
    size: 14px
    weight: 500
    line-height: 1.4
    letter-spacing: 0px
  body-xl:
    font: gt-standard-l-standard
    size: 24px
    weight: 400
    line-height: 1.32
    letter-spacing: 0px
  body-lg:
    font: gt-standard-l-standard
    size: 21px
    weight: 500
    line-height: 1.3
    letter-spacing: 0px
  body-md:
    font: gt-standard-l-standard
    size: 18px
    weight: 400
    line-height: 1.4
    letter-spacing: 0px
  body-sm:
    font: gt-standard-l-standard
    size: 16.8px
    weight: 400
    line-height: 1.27
    letter-spacing: 0px
  body-xs:
    font: gt-standard-m-standard
    size: 14px
    weight: 400
    line-height: 1.4
    letter-spacing: 0px
  body-xs-strong:
    font: gt-standard-m-standard
    size: 14px
    weight: 500
    line-height: 1
    letter-spacing: 0px
  label:
    font: gt-standard-l-standard
    size: 15px
    weight: 500
    line-height: 1.3
    letter-spacing: 0px
  button-sm:
    font: gt-standard-m-standard
    size: 15px
    weight: 500
    line-height: 1.3
    letter-spacing: 0px
  button-xs:
    font: gt-standard-m-standard
    size: 14px
    weight: 400
    line-height: 1
    letter-spacing: 0px
  caption-xs:
    font: gt-standard-m-standard
    size: 12px
    weight: 400
    line-height: 1.12
    letter-spacing: 0.12px
  caption-xs-tight:
    font: gt-standard-l-standard
    size: 12px
    weight: 400
    line-height: 1.3
    letter-spacing: 0px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 44px
  band: 80px

rounded:
  none: 0px
  xs: 20px
  full: 9999px

opacity:
  faint: 0.02
  disabled: 0.4
  hover: 0.5

zindex:
  base: 1
  mid: 5
  dropdown: 10
  overlay: 20
  modal: 40
  topmost: 50

borders:
  thin: 1px
  medium: 2px

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from hark.com

Primary

#2A2B34

Primary CTA, brand accent, active state

Neutral

#141414

Default page background

#1E1F24

Card / panel background

#FFFFFF

Headings / primary text; label colour on brand surfaces

#F5F5F7

Body copy

#B1BCD2

Captions, secondary text

#7B8499

Tertiary / placeholder text

#000000

Neutral

Typography · gt-standard-m-standard

heading14px · 500 · 19.6px

link14px · 500 · 14px

button14px · 400 · 14px

caption12px · 400 · 13.44px

body14px · 400 · 19.6px

body18px · 400 · 25.2px

button15px · 500 · 19.5px

list-item18px · 400 · 25.2px

input14px · 400 · 14px

nav-link14px · 400 · 14px

link14px · 400 · 14px

button18px · 400 · 25.2px

button14px · 500 · 14px

Typography · gt-standard-l-standard

body24px · 400 · 31.68px

body21px · 500 · 27.3px

input15px · 500 · 19.5px

caption12px · 400 · 15.6px

body16.8px · 400 · 21.28px

body14px · 500 · 18.2px

Typography · hark-serif

display44px · 400 · 49.28px

h280px · 400 · 89.6px

display48px · 700 · 62.4px

h144px · 400 · 49.28px

heading32px · 400 · 35.84px

display48px · 400 · 62.4px

display40px · 700 · 52.8px

display40px · 400 · 52.8px

body20px · 700 · 26px

h180px · 400 · 89.6px

h244px · 400 · 49.28px

h232px · 400 · 35.84px

Spacing

24px

16px

44px

12px

8px

80px

40px

20px

Components · 6

Remixes of hark.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it