# Macroplant Design System

> High-contrast utility software showcase utilizing light-weight sans-serif typography against deep saturated canvases and stark white grounds.

**Source:** https://macroplant.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Macroplant employs a high-contrast, dual-state layout system that oscillates between deep indigo-purple hero sections and clinical white utility areas. The system is anchored by **ui-sans-serif**, specifically leveraging a signature weight of 300 for large-scale display copy (48px) to maintain a modern, lightweight feel despite the heavy background saturation. Navigation and primary actions are strictly achromatic (white or transparent outlines), while product identity is carried entirely through high-fidelity 3D skeuomorphic iconography. Layouts follow a rigid vertical rhythm with 30px spacing increments and sharp-edged containers.

## Signature DNA
1. **Light-Weight Display** (Display headers use `ui-sans-serif` at weight 300 and 48px, creating an airy, technical contrast against saturated backgrounds on the homepage hero.)
2. **Skeuomorphic Product Anchors** (Brand identity is not carried by color tokens but by detailed 3D icons for iExplorer, Sharepod, and Adapter, which serve as the primary visual focus of every product section.)
3. **Dual-Canvas Rhythm** (The system strictly separates "Marketing/Hero" zones using deep backgrounds from "Utility/Content" zones using pure `#ffffff` backgrounds.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--color-white` | `#ffffff` | Page background, primary text on dark, button borders | 24 | 1.0 | css_variable |
| `--color-black` | `#000000` | Footer background, primary text on light | 12 | 1.0 | css_variable |
| `--tw-ring-offset-color` | `#ffffff` | Focus ring offset, background foundation | 24 | 1.0 | css_variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| Blue-400 | `#60a5fa` | Secondary badge background (decorative_only) | 2 | 0.8 | computed_style |
| Gray-200 | `#e5e7eb` | Hover states for list items | 2 | 0.7 | computed_style |
| Gray-500 | `#6b7280` | Muted metadata and timestamps | 5 | 0.9 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| ui-sans-serif | 200, 300, 400, 500, 600, 700 | All roles (Display, Body, UI) | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 48px | 48px | normal | 300 | Hero H1 | `h1.text-5xl.font-light` |
| `{type.heading-lg}` | 30px | 36px | normal | 200 | Section intro | `p.text-3xl.py-6` |
| `{type.heading-md}` | 30px | 36px | normal | 700 | Subsection title | `h3.text-3xl.font-bold` |
| `{type.body-lg}` | 18px | 28px | normal | 400 | List items | `li.text-lg` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body | `div.home-hero.tabs` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Tab labels | `button.tab.group` |
| `{type.label}` | 14px | 22.4px | normal | 600 | Metadata | `small.text-gray-500` |
| `{type.caption}` | 12px | 16px | normal | 600 | Badges/Tags | `span.inline-block.px-2` |

### Principles
1. **Light for Large:** Use weight 300 for any text above 36px to maintain technical elegance.
2. **Bold for Structure:** Use weight 700 strictly for functional sub-headers (H3) to anchor content blocks.
3. **Achromatic Text:** Text color is binary; `#ffffff` on dark backgrounds, `#000000` or `#6b7280` on white.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 9 |
| `{space.sm}` | 12px | 5 |
| `{space.md}` | 16px | 16 |
| `{space.lg}` | 24px | 5 |
| `{space.xl}` | 30px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, layout blocks | 76 occurrences |
| `{radius.sm}` | 4px | Buttons, badges, cards | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Primary sections | Default state |
| Raised | `rgba(0, 0, 0, 0.1) 0px 1px 3px` | Small UI elements/badges | `shadow-sm` on badges |

## Components

### Tier 1: Foundational

#### Outline Button
**Role:** Primary action on saturated backgrounds.
**Pages observed:** macroplant.com
**Spec:** Background: transparent / Text: `#ffffff` / Border: 1px `#ffffff` / Radius: 4px / Padding: 0px 16px / Typography: 14px 300.
**States observed:** Default | Hover: captured (bg-gray-200) | Focus: not captured.

#### Status Badge
**Role:** Inline versioning or update status.
**Pages observed:** macroplant.com
**Spec:** Background: `#ffffff` / Text: `#60a5fa` / Border: 0px / Radius: 4px / Padding: 2px 8px / Typography: 12px 600.
**States observed:** Default: captured.

### Tier 2: Patterns

#### Update Row
**Role:** Chronological log of software changes.
**Pages observed:** macroplant.com
**Spec:** Background: `#ffffff` / Border-bottom: 1px `#e5e7eb` / Padding: 16px 0px. Contains Status Badge and metadata.
**States observed:** Default: captured.

#### Tutorial Link
**Role:** Navigation to help documentation.
**Pages observed:** macroplant.com
**Spec:** Text: `#3b82f6` (blue) / Typography: 18px 400 / Icon: chevron-right.
**States observed:** Default: captured.

### Tier 3: Surface-specific

#### Hero Section
**Role:** Main product value proposition.
**Pages observed:** macroplant.com
**Spec:** Background: Saturated Indigo / Text: `#ffffff` / Padding: 48px vertical.
**States observed:** Default: captured.

#### Footer
**Role:** Global site navigation and legal.
**Pages observed:** macroplant.com, macroplant.com/about
**Spec:** Background: `#1f2937` (Dark Gray/Black) / Text: `#ffffff` / Typography: 14px 400.
**States observed:** Default: captured.

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1280px |
| Section Gap | 30px |
| Content Alignment | Centered |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 768px | Navigation collapses to hamburger; Hero text reduces to 32px. |
| Desktop | 1440px | 2-column grid for Popular Tutorials/Recent Updates. |

## Imagery & decoration
Macroplant relies on **High-Fidelity 3D Renders** of product mascots (trucks, axolotls, hard drives). These are never flat or minimalist. Backgrounds use subtle linear gradients to add depth to saturated zones.

## Do's
- Use weight 300 for all H1 display text.
- Maintain a strict 30px (`{space.xl}`) gap between major vertical content blocks.
- Use 1px white borders for buttons on dark backgrounds.
- Keep all container corners sharp (`0px`) unless they are interactive elements.
- Use `#6b7280` for secondary metadata like dates and version numbers.

## Don'ts
- **Wrong:** Using saturated colors for text on white backgrounds. **Right:** Use `#000000`. **Reason:** Maintain high utility contrast.
- **Wrong:** Applying large border radii to section containers. **Right:** Use `0px`. **Reason:** Preserves the technical, "utility" software aesthetic.
- **Wrong:** Using bold weights (700) for body copy. **Right:** Use weight 400. **Reason:** Signature DNA requires a light typographic touch.

## Similar brands
- Panic Inc.
- Rogue Amoeba
- Bare Bones Software

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --font-main: ui-sans-serif, system-ui, sans-serif;
  --weight-display: 300;
  --radius-ui: 4px;
  --space-xl: 30px;
}
```

## Agent prompt examples
- "Create a product feature section with a 48px light-weight heading, a 3D icon placeholder, and a transparent white outline button."
- "Generate a list of software updates using 14px text, gray-500 metadata, and a small 4px rounded status badge."
- "Design a footer with a dark gray background, white text links, and sharp 0px corners."

## Known gaps
- Hover states for primary navigation were not fully captured in the computed style evidence.
- Error and Success semantic color tokens were not present on the analyzed marketing pages.
- The specific hex code for the indigo hero background was not declared as a token, though observed in screenshots.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://macroplant.com | 1440x900 | 2026-06-06 |
| About | https://macroplant.com/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://macroplant.com | 390x844 | 2026-06-06 |