Limestone Digital

---
version: alpha
name: Limestone Digital
description: No rewrite pitch—turn your AI-absent product into AI-native.
colors:
  primary: "#1a1a1a"
  secondary: "#b4a4fc"
  tertiary: "#5d4af5"
  neutral: "#f7f7f7"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Archivo
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.07
  headline-md:
    fontFamily: Archivo
    fontSize: 43px
    fontWeight: 500
    lineHeight: 1.12
  headline-sm:
    fontFamily: Archivo
    fontSize: 33px
    fontWeight: 500
    lineHeight: 1.21
  headline-xs:
    fontFamily: Helvetica Neue
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.19
  body-md:
    fontFamily: Geist
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 6px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 40px
  lg: 80px
  xl: 120px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#fdfdfc"
    rounded: "{rounded.md}"
    padding: 8px 24px
    height: 38px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 8px 24px
    height: 38px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 32px
---

# Limestone Digital: Sparse Black Type, One Working Purple

## Overview

Limestone Digital's UI is serious, sparse, and operations-minded. The audience is engineering and product leadership (plus PE) who expect numbers over hype. Layout runs spacious with large headlines and 80–120px section gaps, white cards on a soft neutral canvas, and a single vivid purple used to signal actions and key illustrations. When tokens don't cover a case, prefer minimal color, ample whitespace, and measurable language in the component.

## Colors

- Primary (#1a1a1a): Core ink for headlines, body text, and icons.
- Secondary (#b4a4fc): Soft lavender accent for illustrations and subtle highlights.
- Tertiary (#5d4af5): Primary action color for CTAs, links that need weight, and key UI markers.
- Neutral (#f7f7f7): Page canvas and section backgrounds.
- Surface (#f7f7f7): Default surface on which white cards and content sit.
- On-surface (#1a1a1a): Text and icon color on neutral/surface backgrounds.

## Typography

- Archivo (Google, available): Used for headline-lg (56/1.07), headline-md (43/1.12), and headline-sm (33/1.21). A geometric grotesk that holds large sizes cleanly. Acceptable substitutes: Inter, Public Sans, or system-ui for environments without Archivo.
- Helvetica Neue (proprietary/custom): Used at headline-xs (26/1.19). When licensing isn't available, substitute Inter, IBM Plex Sans, or Noto Sans to maintain a neutral neo-grotesk tone.
- Geist (Google, available): Body-md at 20/1.4 for all running copy and UI labels. Acceptable substitutes: Inter or Manrope when Geist can't be loaded.
- DM Mono (Google, available): Suitable for metrics, code, and IDs. If missing, use Roboto Mono or Space Mono. Keep sizes aligned to body-md unless a larger display readout is required.

## Layout

Spacing follows an 8px base. Use xs 8px and sm 16px for intra-component gaps, md 40px for grouping elements within a block, and lg 80px to xl 120px to separate major sections. Cards carry 32px internal padding on a #f7f7f7 canvas with wide breathing room. A 12-column responsive grid works well; align headlines left and keep hero copy width moderate for fast scanning.

## Elevation & Depth

Depth is subtle. Use white cards on the neutral canvas for separation; employ sm shadow (rgba(0,0,0,0.04) 0 1px 2px) for small lifts and md shadow (rgba(0,0,0,0.15) 0 8px 24px) for modals or prominent overlays. lg/xl/inner are none—hierarchy is driven by typography, whitespace, and tonal contrast rather than heavy shadows.

## Shapes

Corners are tight and utilitarian. Cards use rounded.sm (6px) for a crisp boxy feel; primary buttons use rounded.md (8px) for approachable touch targets; button-link stays square (0px). Avoid radii beyond 8px to keep components cohesive.

## Components

- Button — Primary: Background #5d4af5, text #fdfdfc, height 38px, padding 8px 24px, radius 8px. Reserve for the key action (e.g., Book a discovery call).
- Button — Secondary: Background #1a1a1a, text #1a1a1a, height 38px, padding 8px 24px, radius 8px. Use carefully and prefer primary or link where clarity demands.
- Button — Link: Text #1a1a1a, radius 0. Use for lightweight actions like Learn more.
- Card: Background #ffffff, text #1a1a1a, radius 6px, padding 32px. Default container for content blocks.

Distinctive components on this page:

### Top Navigation Bar
Sticky, white surface with sm shadow. Right-aligned "BOOK A CALL" using #5d4af5 on #fdfdfc; nav links in #1a1a1a with 16px gaps.

### Hero Header
Left-aligned headline-lg 56/1.07 (Archivo), body-md 20/1.4 (Geist), primary CTA button and a lightweight secondary action; right column carries a purple step-chart illustration.

### Trust Badge Row
Monochrome badge strip (Clutch, GDPR, etc.) above hero copy. Horizontal spacing sm 16px, top/bottom margins md 40px.

### Client Logos Marquee
Two rows of grayscale logos on neutral canvas. Vertical padding md 40px; gaps sm 16px for compact brand density.

### Three-Layer Approach Grid
"Layer 01/02/03" cards with 32px padding and Learn more links. Headline-sm (33/1.21) titles; use card defaults on #f7f7f7 background.

### Problem/Solution Stack
A sequence of headline-md and headline-sm blocks describing common failure modes. Keep 40px vertical rhythm between items for rapid scanning.

### DevInt Metrics Strip
Compact grid of 3–4 data points (e.g., Cycle time p50). Numbers may use DM Mono 20px for stability; house them in cards with sm shadow only when lift is needed.

### Testimonials Carousel
White cards with 32px padding and quote text at body-md, author lines in headline-xs. Use arrows or dots sparingly; content is primary.

## Do's and Don'ts

- Do reserve #5d4af5 for primary CTAs and key diagrams; one purple action per viewport keeps hierarchy clear.
- Do set hero headlines with Archivo at 56px/1.07 and body with Geist at 20px/1.4.
- Do space major sections with 80–120px and keep card padding at 32px on a #f7f7f7 canvas.
- Don't use heavy shadows; lg/xl are none. Prefer tonal separation and whitespace.
- Don't exceed 8px corner radius or introduce new color accents.
- Don't specify Helvetica Neue unless licensed; use Inter, IBM Plex Sans, or Noto Sans instead.

## Agent Prompt Guide

Quick color reference — text: #1a1a1a, background: #f7f7f7, border: #1a1a1a, accent: #5d4af5.

1) Build the hero
- Canvas #f7f7f7 with a centered white card (radius 6px, padding 32px).
- H1 uses Archivo 56px, weight 500, line-height 1.07, color #1a1a1a.
- Body uses Geist 20px/1.4, color #1a1a1a.
- Primary button: 38px height, padding 8px 24px, radius 8px, background #5d4af5, text #fdfdfc.
- Secondary action as a text link using #1a1a1a.

2) Three-card "Approach" grid
- Section background #f7f7f7 with 80px top/bottom padding.
- Three cards, each bg #ffffff, radius 6px, padding 32px, 24px gaps.
- Card titles use Archivo 33px/1.21; copy uses Geist 20px/1.4.
- Each card ends with a link styled as Button-link (#1a1a1a, radius 0).

3) DevInt metrics strip
- One row, 4 equal items. Use white cards (radius 6px, padding 32px) on #f7f7f7.
- Label (Geist 20px/1.4, #1a1a1a) over value set in DM Mono 20px, #1a1a1a.
- Optional sm shadow: rgba(0,0,0,0.04) 0 1px 2px.

4) Testimonial card
- White card, radius 6px, padding 32px, md shadow rgba(0,0,0,0.15) 0 8px 24px.
- Quote body in Geist 20px/1.4; author line in Archivo 26px/1.19.
- Place a primary CTA below using the button-primary spec (#5d4af5 on #fdfdfc).

5) CTA footer bar
- Full-width white card on #f7f7f7 with 80px padding.
- Headline uses Archivo 43px/1.12.
- Primary button per spec; secondary action as Button-link.

## Similar Brands

- Vercel — Similar black/white restraint and Geist body; diverges with darker themes and product-led visuals over services narrative.
- Scale AI — Enterprise AI tone with a purple accent; heavier gradients and marketing art than Limestone's sparse cards.
- Thoughtworks — Consulting narrative and proof-first content; uses warmer palettes and denser editorial patterns.
- Retool — Developer-centric grid, minimal color, bold headings; diverges with app UI chrome and green accents over purple.

:root {
  /* Colors */
  --color-primary: #1a1a1a;
  --color-secondary: #b4a4fc;
  --color-tertiary: #5d4af5;
  --color-neutral: #f7f7f7;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.07;
  --text-headline-md-size: 43px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.12;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 26px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --font-archivo: "Archivo";
  --font-helvetica-neue: "Helvetica Neue";
  --font-geist: "Geist";

  /* Rounded */
  --radius-sm: 6px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  --spacing-xl: 120px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #fdfdfc;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 8px 24px;
  --button-primary-height: 38px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 8px 24px;
  --button-secondary-height: 38px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 32px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "No rewrite pitch—turn your AI-absent product into AI-native.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.102,
          0.102,
          0.102
        ],
        "hex": "#1a1a1a"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.706,
          0.643,
          0.988
        ],
        "hex": "#b4a4fc"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.365,
          0.29,
          0.961
        ],
        "hex": "#5d4af5"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.969,
          0.969,
          0.969
        ],
        "hex": "#f7f7f7"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.969,
          0.969,
          0.969
        ],
        "hex": "#f7f7f7"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.102,
          0.102,
          0.102
        ],
        "hex": "#1a1a1a"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 80,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 120,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Archivo",
        "fontSize": {
          "value": 56,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Archivo",
        "fontSize": {
          "value": 43,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Archivo",
        "fontSize": {
          "value": 33,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Helvetica Neue",
        "fontSize": {
          "value": 26,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}