Skip to content
DesignMunkDesignMunk Submit a site

Factory

factory.ai
Build Your Software Factory—self-improving AI for your SDLC
AI Developer Tools Next.js Tailwind Homepage Geist
Share Visit site
factory.ai DESKTOP · 1440
Factory

AI Breakdown

Design export

---
version: alpha
name: Factory
description: Build Your Software Factory—self-improving AI for your SDLC
colors:
  primary: "#020202"
  secondary: "#7c7c7c"
  neutral: "#f5f5f5"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Geist
    fontSize: 32.1px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.04em
  headline-md:
    fontFamily: Geist
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: Geist
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  headline-xs:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Geist Mono
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 3px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 52px
  xl: 112px
components:
  button-primary:
    backgroundColor: "#101010"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 0px 12px
    height: 31px
  button-secondary:
    backgroundColor: "#4d4947"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 0px 12px
    height: 31px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Factory: Monochrome Developer Landing Anchored by a CLI Install

## Overview

Factory's UI is industrial, monochrome, and utilitarian. It targets engineering teams and enterprise buyers who expect command-line access and clear, minimal UI. The feeling should be serious and focused, with generous whitespace and terse copy. When no token applies, prefer high-contrast black text, off-white surfaces, and compact controls that feel tool-like rather than decorative.

## Colors

- **primary (#020202):** Near-black for headlines, core text, icons, and strong dividers.
- **secondary (#7c7c7c):** Muted gray for metadata, secondary actions, and subtle rules.
- **neutral (#f5f5f5):** Off-white base used for page background and light cards.
- **surface (#f5f5f5):** Section and card surfaces; maintain consistent field color across the page.
- **on-surface (#020202):** Default on-surface text and icon color for surfaces and cards.

## Typography

- Geist (headlines): Freely available via Google; used for headline-lg 32.1px/1 (-0.04em), headline-md 24px/1.1 (-0.03em), headline-sm 20px/1.2, headline-xs 18px/1.22. Role: marketing headlines, section titles, navigational labels.
  Substitutes if needed: Inter, IBM Plex Sans.
- Geist Mono (body): Freely available via Google; used for body-md 16px/1.5. Role: body copy, CLI snippets, code-adjacent UI, small labels that benefit from monospaced alignment.
  Substitutes if needed: JetBrains Mono, IBM Plex Mono, Fira Code.
Use the tighter tracking on large headlines for impactful, compact lines; relax to md/sm sizes as copy density increases.

## Layout

Spacing follows a short–long rhythm: 8 / 16 / 28 / 52 / 112px. Use xl (112px) for hero top/bottom padding and major section breaks, lg (52px) for intra-section spacing, md (28px) to separate blocks within a section, and sm/xs for item gaps and control padding. A simple multi-column grid can sit over this rhythm; align key elements to consistent left and right edges and let the generous vertical spacing do most of the hierarchy work.

## Elevation & Depth

No shadows are used at any size. Depth is conveyed through tonal layers (off-white surface against white canvas), crisp 1px rules in secondary gray where needed, and whitespace. Hierarchy is further expressed through weight, letter-spacing, and compact controls.

## Shapes

Two radii define the language: sm = 3px for interactive elements (buttons, input fields), md = 8px for containers and cards. Small radius signals precision; the larger 8px rounds soften grouped content without feeling playful.

## Components

Buttons and cards are the primary primitives.
- Button—Primary: background #101010, text #020202, height 31px, padding 0 12px, radius 3px. Use for the dominant action.
- Button—Secondary: background #4d4947, text #020202, height 31px, padding 0 12px, radius 3px. Use for supportive or alternate actions.
- Button—Link: text #020202, radius 0px. Use for quiet, inline navigation.
- Card: background #f5f5f5, text #020202, radius 8px, padding 16px.

### Header Navigation
- Type: headline-xs (18px) for items.
- Colors: text #020202 on #f5f5f5 background.
- Spacing: sm (16px) gaps between links; align CTAs at the right.

### Hero Lockup
- Heading: headline-lg 32.1px, weight 500, letter-spacing -0.04em.
- Subhead: headline-xs 18px.
- Actions: Primary and Secondary buttons, 16px gap; place a quiet link-style action if needed.
- Vertical spacing: md (28px) between headline, subhead, CTAs, and the code block.

### CLI Install Snippet
- Typography: Geist Mono body-md 16px/1.5.
- Container: Card with 16px padding, radius 3–8px (sm or md), on #f5f5f5.
- Use monospace quotes and ensure full-width copy-paste behavior.

### Trust Bar
- Title: headline-sm 20px.
- Layout: logo row on a neutral surface with md (28px) vertical padding and sm (16px) gaps.

### Primary CTA Band
- Copy: headline-md 24px with a single Primary button.
- Spacing: lg (52px) vertical padding; center alignment.

### Footer Columns
- Section titles: headline-xs 18px; links in body-md 16px.
- Columns use sm (16px) gaps and md (28px) column spacing.

### Code Console Preview (optional)
- For dark previews or screenshots, use a container; background #101010, text may use #f5f5f5 for legibility when rendering custom content; radius 8px. Keep surrounding page on #f5f5f5 for contrast.

## Do's and Don'ts

- Do pair Geist headlines with Geist Mono body for a cohesive, developer-first feel.
- Do keep CTAs compact (31px height) with 3px corners to maintain the tool-like tone.
- Do use #7c7c7c for quiet dividers and metadata; avoid thick borders.
- Don't introduce additional accent colors; stay monochrome unless showing product imagery.
- Don't add drop shadows; separation should come from spacing, tone, and simple rules.
- Don't round corners beyond 8px—larger radii read off-brand and playful.

## Agent Prompt Guide

Quick reference — use these every time:
- Text: #020202
- Background: #f5f5f5
- Border: #7c7c7c
- Accent (CTA fill): #101010
- Fonts: Geist (headlines), Geist Mono (body/code)

1) Build the hero
- Canvas #f5f5f5, center a headline set in Geist 500 at 32.1px, line-height 1, letter-spacing -0.04em in #020202.
- Subhead in Geist 18px/1.22 below with md (28px) spacing.
- Two buttons: Primary (31px height, 0 12px, 3px radius, bg #101010, text #020202) and Secondary (bg #4d4947, same sizing). Gap sm (16px).
- Place a Geist Mono 16px code snippet card below with 16px padding and radius 8px on #f5f5f5.

2) Trust bar with logos
- Section padding lg (52px) top/bottom on #f5f5f5.
- Title in Geist 20px/1.2, #020202.
- Logo row with sm (16px) gaps; thin rules in #7c7c7c if separators are needed.

3) CLI install card
- Full-width card on #f5f5f5 with 16px padding, radius 8px.
- Content in Geist Mono 16px/1.5, text #020202.
- Include the exact string: curl -fsSL https://app.factory.ai/cli | sh

4) Final CTA band
- Copy in Geist 24px/1.1, #020202, centered with lg (52px) vertical padding.
- Single Primary button (31px height, 0 12px, 3px radius, bg #101010, text #020202) centered under the text with sm (16px) gap.

5) Footer columns
- Three to five columns on #f5f5f5; headings in Geist 18px, links in Geist Mono 16px.
- Column gaps md (28px); link color #020202 with no shadows or gradients.

## Similar Brands

- Vercel — Shares the Geist family, monochrome palette, and developer-first CTA placement; Factory skews even more utilitarian with compact 31px buttons.
- Linear — Similar restraint and black/white discipline; Linear uses more motion and softer radii, while Factory stays crisper.
- OpenAI — Minimal palette and generous whitespace; OpenAI leans more editorial, Factory feels more tool-driven with CLI prominence.
- Anthropic — Clean and serious tone; Anthropic introduces warmer neutrals and more marketing copy, while Factory prioritizes terse actions.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 5 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago