Skip to content
DesignMunkDesignMunk Submit a site

LocalCan

localcan.com
Save 50+ hours of development per month with LocalCan
Developer Tools Next.js Tailwind Homepage cascadia Mono Inter
Share Visit site
localcan.com DESKTOP · 1440
LocalCan

AI Breakdown

Design export

---
version: alpha
name: LocalCan
description: Save 50+ hours of development per month with LocalCan
colors:
  primary: "#1c1917"
  secondary: "#7b51bd"
  tertiary: "#008236"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-purception: "#d184cf"
  brand-shikon: "#282128"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: cascadiaMono
    fontSize: 50px
    fontWeight: 350
    lineHeight: 1
    letterSpacing: -0.05em
  headline-md:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 350
    lineHeight: 1.1
    letterSpacing: -0.053em
  headline-sm:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 350
    lineHeight: 1.19
  headline-xs:
    fontFamily: Inter
    fontSize: 25px
    fontWeight: 350
    lineHeight: 1.2
  body-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 350
    lineHeight: 1.5
    letterSpacing: -0.03em
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 40px
  xl: 56px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 13px 22px
    height: 44px
  button-secondary:
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 13px 22px
    height: 44px
  button-link:
    textColor: "#155dfc"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# LocalCan: Terminal-style Mono Headlines on a Dark Grid

## Overview

LocalCan's UI is technical, minimal, and direct. The tone is developer-first: confident, fast to scan, and light on ornament. Expect high contrast sections—mostly light surfaces with occasional dark panels—and compact components with clear affordances. Spacing is moderate, producing a slightly dense but deliberate rhythm suitable for docs, pricing, and feature lists.

## Colors

- Primary (#1c1917): Deep ink for headlines, dark panels, and primary button backgrounds.
- Secondary (#7b51bd): Violet accent for icons, numeric tags, and occasional emphasis.
- Tertiary (#008236): Signal green for success states, charts/patterns, and pricing affirmations.
- Neutral (#ffffff): Primary surface color for pages and cards.
- Border (#e5e7eb): Hairline dividers for sections, tables, cards, and input outlines.
- Brand-purception (#d184cf): Soft magenta accent used sparingly in illustrations or infographics.
- Brand-shikon (#282128): Charcoal tint for subdued chips, code pills, and dark UI elements lighter than primary.
- Surface (#ffffff): Canonical page/card background.
- On-surface (#1c1917): Default text color on light surfaces.

## Typography

- Cascadia Mono (custom): Used for headline-lg at 50px, weight 350, line-height 1, letter-spacing -0.05em. Self-hosted; agents should not attempt to load it directly. Substitutes: JetBrains Mono (Google), IBM Plex Mono (Google), Source Code Pro (Google).
- Inter (Google): UI and long-form text. Headline-md 40px (350, 1.1, -0.053em) for major section headers; headline-sm 32px (350, 1.19) for subheads; headline-xs 25px (350, 1.2) for card titles and FAQ questions; body-md 20px (350, 1.5, -0.03em) as the base reading size.
- Roles: Use mono display only for primary hero headlines or code-adjacent callouts; keep all supporting text in Inter for readability.

## Layout

- Spacing scale follows an 8px base: 8, 16, 32, 40, 56. Compose sections with xl (56px) top/bottom padding, md (32px) inner gaps, and sm (16px) item spacing.
- Use a responsive multi-column grid (e.g., 12 columns) with generous gutters; collapse to a single column on narrow screens.
- Prefer vertical rhythm over heavy ornament: section dividers use Border (#e5e7eb) and spacing tokens, not large shadows.

## Elevation & Depth

Shadows are minimal: only the sm shadow is available; md–xl are none. Depth is communicated through contrast (Primary vs Neutral), crisp borders (#e5e7eb), and whitespace. Use the sm shadow sparingly for overlays or floating toasts; cards and panels typically rely on borders and tonal shifts.

## Shapes

A single radius—8px—establishes the shape language. Apply it consistently to buttons, cards, pills, input fields, and panels. Square link buttons (button-link) intentionally remain unrounded at 0px to read as text actions.

## Components

Buttons and cards (tokenized):
- Button Primary: background #1c1917, text #ffffff, 44px height, 13px×22px padding, 8px radius. Use for the main CTA.
- Button Secondary: text #ffffff (typically on dark backgrounds), 44px height, 13px×22px padding, 8px radius. Treat as a quiet/ghost action alongside the primary.
- Button Link: text #155dfc, 0px radius. Inline, lightweight actions.
- Card: background #ffffff, text #1c1917, 16px padding, 8px radius. Add a #e5e7eb border for separation when needed.

Distinctive page components:

### Brew Install Pill
- Compact code chip for commands like "brew install localcan." Background #282128, text #ffffff, 8px radius, horizontal padding 16px.

### Hero Grid Panel
- Dark panel using #1c1917 with 8px radius. Two-column layout: left column holds headline-lg (Cascadia Mono or mono substitute) and body-md; right column displays a visual grid. Inner gap 40px; panel padding 32px.

### Trust Bar
- Light strip on #ffffff with logo marks. Use top/bottom borders in #e5e7eb and 16–32px vertical padding. Cards for each logo can inherit the base Card with no shadow.

### Testimonial Banner
- Full-width dark card: background #1c1917, text #ffffff, 32px padding, 8px radius. Decorative accents may use #008236 for subtle patterns; attribution in Inter body-md.

### Numbered Feature List (01–04)
- Stack of items with a small numeric flag. Number can use #7b51bd, title in headline-xs (Inter 25px), copy in body-md (20px). Vertical gap 16–32px between items.

### Pricing Ledger Comparison
- Two cards showing "LocalCan" vs "Competitor." Use Card styles with #e5e7eb dividers. Positive callouts (e.g., Flat ✓) emphasize with #008236.

### Plans Grid
- Four plan cards (+ lifetime license) using Card tokens. Title in headline-sm (32px), price in headline-md (40px) when needed, features in body-md. Primary CTA uses Button Primary; secondary links use Button Link.

### FAQ Accordion
- Each question uses headline-xs; answer in body-md. Row separators in #e5e7eb; content spacing 16–32px; corners 8px on the container.

## Do's and Don'ts

- Do reserve Cascadia Mono (or its substitutes) for the largest headline and code chips; keep running text in Inter.
- Do separate sections with #e5e7eb borders and xl (56px) spacing rather than large shadows.
- Do use #008236 sparingly for success and data highlights; prefer #7b51bd for decorative accents or numbering.
- Don't mix multiple corner radii—everything conforms to 8px except link buttons at 0px.
- Don't place dark buttons on dark panels without contrast; pair Button Primary with a light neighbor (Button Link or Secondary) when the background is #1c1917.
- Don't reduce body text below 20px; this system's density relies on spacing, not tiny type.

## Agent Prompt Guide

Quick reference — text/background/border/accent:
- Text (on light): #1c1917
- Background (surface): #ffffff
- Border: #e5e7eb
- Accents: #7b51bd (violet), #008236 (green)

1) Build a dark hero panel with mono headline
- Section background #1c1917, 8px radius, 32px padding, 40px gap.
- Headline: JetBrains Mono, 50px, weight 350, line-height 1, letter-spacing -0.05em, color #ffffff.
- Body: Inter, 20px, weight 350, line-height 1.5, color #ffffff at 80%.
- Actions: one Button Secondary (text #ffffff) and one Button Link (#155dfc).

2) Create a numbered feature list on light surface
- Container background #ffffff; section divider #e5e7eb top and bottom; 56px vertical padding.
- Each item: number in #7b51bd; title Inter 25px/1.2; copy Inter 20px/1.5 #1c1917.
- Gaps: 16px between title and copy; 32px between items; corners 8px if cards are used.

3) Price card matching the plans grid
- Card: background #ffffff, 8px radius, 16px padding, 1px border #e5e7eb.
- Plan name: Inter 32px/1.19; price: Inter 40px/1.1.
- CTA: Button Primary (bg #1c1917, text #ffffff, height 44px, padding 13px 22px).

4) Testimonial banner with green accent
- Full-width card: background #1c1917, 8px radius, 32px padding.
- Quote: Inter 20px/1.5, color #ffffff; attribution in Inter 20px at 70% opacity.
- Decorative accent dots or bars in #008236 placed at the bottom edge.

## Similar Brands

- ngrok: Also developer tunneling; favors straightforward UI and strong contrast, but with less playful accent color than LocalCan's violet/green pair.
- Vercel: Dark hero, mono display type, and precise spacing; more austere overall and leans harder into black/white.
- Tailscale: Network tooling with friendly, minimal components; uses green accents like LocalCan but with more rounded, conversational visuals.
- Supabase: Developer product with dark sections, green highlights, and extensive docs; heavier grid and data-centric components compared with LocalCan.

More like this

Browse Developer Tools →
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 3 hours ago
overmindlab.ai
Overmind AI
Overmind
The AI engineering copilot for agent optimisation and model training.
Homepage · 15 hours ago