---
version: alpha
name: "gitnimble.com"
description: "Design system extracted from https://gitnimble.com/ on 2026-10-28"
colors:
  background: "#ffffff"
  surface: "#fafafa"
  surface-2: "#ebebeb"
  foreground: "#282a2f"
  muted-foreground: "#5a5e66"
  primary: "#005bff"
  on-primary: "#ffffff"
  secondary: "#d97757"
  border: "#ebebeb"
typography:
  headline-display:
    fontFamily: "Inter"
    fontSize: "64px"
    fontWeight: 560
    lineHeight: "66.56px"
    letterSpacing: "-2.56px"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "48px"
    fontWeight: 560
    lineHeight: "50.88px"
    letterSpacing: "-1.68px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "20px"
    fontWeight: 540
    lineHeight: "32px"
    letterSpacing: "-0.2px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26.4px"
  label-md:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "12px"
  button:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 540
    lineHeight: "1"
  code:
    fontFamily: "ui-monospace"
    fontSize: "11.0625px"
    fontWeight: 400
    lineHeight: "17.7px"
rounded:
  none: "0px"
  full: "9999px"
  xl: "24px"
  lg: "10px"
  md: "4px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "28px"
  8: "108px"
components:
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "38px"
    padding: "0px 16px"
  button-secondary:
    backgroundColor: "#f2f3f5"
    textColor: "#8a8d94"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "0px 0px"
  card:
    backgroundColor: "#fffffff5"
    rounded: "24px"
    padding: "0px"
---

# gitnimble.com

## Overview

Nimble · The Mac Git client built for AI: The native Mac Git client built for AI. Quick Commit floats over any app, AI writes the message, then commit and push without breaking flow. Not Electron.

Pill-shaped controls, layered shadows for depth, large display type at 64px / 560, a single blue accent on neutrals. The site ships in light mode by default. Measured from 1222 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-symbol.png`: possible standalone brand symbol
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-symbol-source-hd.png`: possible standalone brand symbol / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-symbol-upscaled.png`: possible standalone brand symbol / upscaled.png
- `screenshots/media-symbol-transparent.png`: possible standalone brand symbol / transparent.png
- `screenshots/media-symbol-optimized.webp`: possible standalone brand symbol / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("Download free trial"), rest
- `screenshots/c-button-1--hover.png`: Button 1 ("Download free trial"), hover
- `screenshots/c-button-1--focus.png`: Button 1 ("Download free trial"), focus
- `screenshots/c-button-1--active.png`: Button 1 ("Download free trial"), active
- `screenshots/c-switch-1--rest.png`: Switch / toggle 1, rest
- `screenshots/c-switch-1--hover.png`: Switch / toggle 1, hover
- `screenshots/c-switch-1--focus.png`: Switch / toggle 1, focus
- `screenshots/c-switch-1--checked.png`: Switch / toggle 1, checked
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Features"), rest
- `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Features"), hover
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Features"), focus
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Features"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Features"), hover
- `screenshots/c-badge-1--rest.png`: Badge / pill / tag 1 ("tab"), rest
- `screenshots/c-counter-badge-1--rest.png`: Counter / notification dot 1, rest
- `screenshots/c-card-1--rest.png`: Card 1 ("Aurora Notes main +128 −"), rest
- `screenshots/c-pricing-card-1--rest.png`: Pricing card / plan 1 ("$49 one-time Perpetual l"), rest
- `screenshots/c-feature-item-1--rest.png`: Feature item (icon + title + text) 1 ("Keychain-backed Credenti"), rest
- `screenshots/c-stat-1--rest.png`: Stat / metric 1 ("$49 one-time"), rest
- `screenshots/c-list-1--rest.png`: Styled list 1 ("Clone repositories from "), rest
- `screenshots/c-accordion-1--rest.png`: Accordion / disclosure 1 ("Is Nimble free? Nimble i"), rest
- `screenshots/c-accordion-1--open.png`: Accordion / disclosure 1 ("Is Nimble free? Nimble i"), open
- `screenshots/c-code-1--rest.png`: Code block / inline code 1 ("> ADDED: local completio"), rest
- `screenshots/c-kbd-1--rest.png`: Keyboard key 1 ("⌘K"), rest
- `screenshots/c-icon-1--rest.png`: Icon 1, rest
- `screenshots/c-faq-1--rest.png`: FAQ block 1 ("Is Nimble free? Nimble i"), rest
- `screenshots/c-faq-1--open.png`: FAQ block 1 ("Is Nimble free? Nimble i"), open
- `screenshots/c-button-2--rest.png`: Button 2 ("Buy for $49"), rest
- `screenshots/c-button-2--hover.png`: Button 2 ("Buy for $49"), hover
- `screenshots/c-button-2--focus.png`: Button 2 ("Buy for $49"), focus
- `screenshots/c-button-2--active.png`: Button 2 ("Buy for $49"), active
- `screenshots/c-nav-link-2--rest.png`: Navigation link 2 ("Home"), rest
- `screenshots/c-nav-link-2--hover.png`: Navigation link 2 ("Home"), hover
- `screenshots/c-nav-link-2--focus.png`: Navigation link 2 ("Home"), focus
- `screenshots/c-badge-2--rest.png`: Badge / pill / tag 2 ("↩"), rest
- `screenshots/c-card-2--rest.png`: Card 2 ("Connected services GitHu"), rest
- `screenshots/c-list-2--rest.png`: Styled list 2 ("Create new Linear issues"), rest
- `screenshots/c-icon-2--rest.png`: Icon 2, rest
- `screenshots/c-button-3--rest.png`: Button 3 ("Download"), rest
- `screenshots/c-button-3--hover.png`: Button 3 ("Download"), hover
- `screenshots/c-button-3--focus.png`: Button 3 ("Download"), focus
- `screenshots/c-button-3--active.png`: Button 3 ("Download"), active
- `screenshots/c-badge-3--rest.png`: Badge / pill / tag 3 ("⌘K"), rest
- `screenshots/c-card-3--rest.png`: Card 3 ("BitbucketClone · Publish"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#fafafa` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#ebebeb` | Secondary surface |
| foreground | `#282a2f` | Primary text |
| muted-foreground | `#5a5e66` | Secondary text, captions |
| primary | `#005bff` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#d97757` | Secondary accent (orange) |
| border | `#ebebeb` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#fafafa`, `#ebebeb`, `#005bff`, `#181717`, `#d97757`, `#10a37f`, `#0052cc`, `#009e66`.

Gradients in use: `radial-gradient(120% 140% at 50% 0%, color(srgb -0.166327 0.364166 1.03865 / 0.08), rgba(0, 0, 0, 0) 55%), none`; `linear-gradient(135deg, rgb(66, 133, 244), rgb(155, 114, 203), rgb(217, 101, 112))`.

The accent `#005bff` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Inter** for h1, h2, h3, body, button, label: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **ui-monospace** for label, code: system font stack.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Inter | 64px | 560 | 66.56px | -2.56px |
| headline-lg | Inter | 48px | 560 | 50.88px | -1.68px |
| headline-md | Inter | 20px | 540 | 32px | -0.2px |
| body-md | Inter | 16px | 400 | 26.4px | normal |
| label-md | Inter | 12px | 400 | 12px | normal |
| button | Inter | 16px | 540 | 1 | normal |
| code | ui-monospace | 11.0625px | 400 | 17.7px | normal |

Type scale in use: 10px, 11px, 12px, 13px, 14px, 16px, 19px, 20px, 48px, 64px. Base body size 16px.

The hero heading (h1) renders at 64px / 560, center aligned, up to 510px wide, tracking -2.56px. Sample: "The Mac Git clientbuilt for AI.".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 28, 108 (px).
- Flex and grid gaps: 4, 8, 12, 16, 80 px.
- Content max width: 1120px, centred.
- Breakpoints: 560px, 600px, 601px, 860px, 900px.
- Header: 60px tall, sticky, background `rgba(0, 0, 0, 0)`; 6 nav links at 16px / 400 (Nimble · Home · Features · Pricing · Support · Download).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(18, 22, 30, 0.08) 0px 1px 2px 0px`
- shadow-2: `rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset, rgba(16, 22, 38, 0.12) 0px 24px 60px 0px, rgba(16, 22, 38, 0.06) 0px 6px 16px 0px`
- shadow-3: `rgba(16, 22, 38, 0.16) 0px 40px 90px 0px, rgba(16, 22, 38, 0.08) 0px 12px 28px 0px`
- shadow-4: `rgba(0, 0, 0, 0.12) 0px 0px 0px 0.5px inset`

## Shapes

- Buttons: 9999px
- Inputs: 9999px
- Cards and panels: 24px
- Images and media: 24px
- Radius scale: none 0px, full 9999px, xl 24px, lg 10px, md 4px

## Components

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#ffffff`, border none, radius 9999px, height 38px, padding 0px 16px, 14px / 540. Sample label: "Download".

### Button, secondary

Background `#f2f3f5`, text `#8a8d94`, border none, radius 9999px, height 32px, padding 0px 0px, 16px / 400.

### Card

Background `#fffffff5`, border 1px solid #0000001f, radius 24px, padding 0px, shadow `rgba(16, 22, 38, 0.16) 0px 40px 90px 0px, rgba(16, 22, 38, 0.08) 0px 12px 28px 0px`. Typical size about 520×446px.

### Link

Colour `#000000`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (22 of 87 in the checklist, 37 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 20 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | primary-with-icon, secondary, primary-with-icon sm | hover, focus, active | "Download free trial" |
| Switch / toggle | custom | hover, focus, checked |  |
| Header / navbar | default | rest only | "Nimble Home Features Pricing S" |
| Navigation link | plain, plain | hover, focus | "Features" |
| Footer | default | rest only | "Nimble A fast, beautiful, 100%" |
| Footer link | plain | hover | "Features" |
| Badge / pill / tag | subtle-square, neutral-square, subtle-square, subtle-square | rest only | "tab" |
| Counter / notification dot | subtle-filled | rest only |  |
| Card | elevated, elevated, outlined, elevated | rest only | "Aurora Notes main +128 −4 Stag" |
| Pricing card / plan | elevated | rest only | "$49 one-time Perpetual license" |
| Feature item (icon + title + text) | filled | rest only | "Keychain-backed Credentials li" |
| Stat / metric | default | rest only | "$49 one-time" |
| Styled list | default, default | rest only | "Clone repositories from GitHub" |
| Accordion / disclosure | details | open | "Is Nimble free? Nimble is a pa" |
| Code block / inline code | inline | rest only | "> ADDED: local completion noti" |
| Keyboard key | default | rest only | "⌘K" |
| Icon | outline-12px, outline-13px, filled-16px | rest only |  |
| FAQ block | aria | open | "Is Nimble free? Nimble is a pa" |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Icon button, Toggle / segmented control, Button group, Text link, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Empty state, Rating / stars, Testimonial / quote card, List row / menu row, Table, Table row, Avatar, Avatar stack, Divider, Blockquote, Image / figure, Video / media embed, Carousel / slider, Logo strip, Eyebrow / kicker, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar.

## Dark Mode

Both themes exist; the default render is light and the dark theme was reached via prefers-color-scheme. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#ffffff` | `#0b0d12` |
| surface | `#fafafa` | `#10131a` |
| surface-2 | `#ebebeb` | `#202124` |
| foreground | `#282a2f` | `#f7f8fb` |
| muted-foreground | `#5a5e66` | `#b8bdc8` |
| primary | `#005bff` | `#005bff` |
| on-primary | `#ffffff` | `#ffffff` |
| secondary | `#d97757` | `#d97757` |
| border | `#ebebeb` | `#23252a` |

Dark-theme shadows: `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px`; `rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.12) 0px 24px 60px 0px, rgba(0, 0, 0, 0.06) 0px 6px 16px 0px`; `rgba(0, 0, 0, 0.16) 0px 40px 90px 0px, rgba(0, 0, 0, 0.08) 0px 12px 28px 0px`; `rgba(255, 255, 255, 0.14) 0px 0px 0px 0.5px inset`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1120px | 465px | 16px | 64px, 2 lines, center | 60px, 6 links, 2 CTA | media below text | 2→2 col; 2→1 col; 2→1 col | content-width |
| laptop 1024px | 944px | 262px | 16px | 62.7px, 2 lines, center | 60px, 6 links, 2 CTA | media below text | 2→2 col; 2→1 col; 2→1 col | content-width |
| tablet 768px | 691px | 165px | 16px | 55px, 2 lines, center | 60px, hamburger (Use dark appearance), 1 CTA | media below text | 2→2 col; 2→1 col; 2→1 col | 2 full-width |
| phone 390px | 350px | 35px | 16px | 40px, 2 lines, center | 60px, hamburger (Use dark appearance), 1 CTA | media below text | 2→2 col; 2→1 col; 2→1 col | content-width |

- H1 goes 64px → 40px (63%), 2 → 2 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 60px → 60px.
- Card grids: 2 columns → 2 columns on phones (gap 0px → 0px).
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 35px.
- Section top padding 81px → 40px.

## Interaction & Motion

61 elements carry transitions; typical 0.15s with ease, mostly on transform, opacity, color. 5 running keyframe animations (chip-float 7.5s infinite; chip-float 8s infinite; tree-follow-scroll 0.001s 1).

- Hover on button-primary: background #f2f3f5 → #e6e7e9; cursor pointer.
- Hover on button-secondary ("Download"): background color(display-p3 0 0.357 1) → #0049cc, shadow added (color(srgb -0.166327 0.364166 1.03865 / 0.24) 0px 16px 40px ); cursor pointer; transition background, border-color, color, transform, box-shadow | 0.15s, 0.15s, 0.15s, 0.15s, 0.2s | ease, ease, ease, ease, ease | delay 0s, 0s, 0s, 0s, 0s.
- Hover on nav-link ("Nimble"): no visible change; cursor pointer.
- Focus on button-primary: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Tooltip triggers exist (1 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- No dropdown menus found in the header.
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#005bff` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 16px in Inter.
- Do match corner radii per element class (buttons 9999px, cards 24px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.