Skip to content
DesignMunkDesignMunk Submit a site

Codus

trycodus.com
Autonomous engineers, working in parallel—verified before it reaches you.
AI Software Next.js Tailwind Homepage Geist
Share Visit site
trycodus.com DESKTOP · 1440
Codus

AI Breakdown

Design export

---
version: alpha
name: Codus
description: Autonomous engineers, working in parallel—verified before it reaches you.
colors:
  primary: "#5f5f6a"
  secondary: "#5aa0fc"
  tertiary: "#2b5fd9"
  neutral: "#f6f6f8"
  border: "#14141a"
  brand-ending-navy-blue: "#19335b"
  brand-debonaire: "#cbd2dc"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Geist
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.07
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Geist
    fontSize: 43px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: -0.013em
  headline-sm:
    fontFamily: Geist
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.19
    letterSpacing: -0.016em
  headline-xs:
    fontFamily: Geist Mono
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0.067em
  body-md:
    fontFamily: Geist
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.55
rounded:
  sm: 4px
  md: 8px
  lg: 12px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 32px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.border}"
    textColor: "#ffffff"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 40px
  button-link:
    textColor: "#4c4c57"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.border}"
    rounded: "{rounded.lg}"
    padding: 16px
---

# Codus: Four-Quadrant Console Sells Parallel AI Workflow

## Overview

Codus pairs a technical, product-forward tone with restrained color. The UI should feel precise, operational and calm—never flashy. Spacing is generous, copy is dense but scannable, and hierarchy relies on weight, size and spacing more than decoration. When in doubt, pick clarity: name the thing, show the state, and let blue accents lead interaction.

## Colors

- **primary (#5f5f6a):** Primary text for paragraphs and secondary headings; neutral, cool gray.
- **secondary (#5aa0fc):** Accent for links, focus rings, badges and interactive states.
- **tertiary (#2b5fd9):** Stronger action blue for emphasized links or active tabs when more contrast is needed.
- **neutral (#f6f6f8):** Page background and light card surfaces.
- **border (#14141a):** Near-black used for primary buttons, key text on dark UI and 1px rules when needed.
- **brand-ending-navy-blue (#19335b):** Deep brand navy for end-of-page bands or rich accents in illustrations.
- **brand-debonaire (#cbd2dc):** Muted steel tint for subtle dividers, tags or backgrounds of info notes.
- **surface (#f6f6f8):** Default surface color; same as neutral.
- **on-surface (#5f5f6a):** Default text on light surfaces; same as primary.

## Typography

- Geist (google): Sans with wide weight range. Headline levels use 600 for authority; body uses 400 for long-form clarity. Safe substitutes: Inter, Manrope, or IBM Plex Sans.
- Geist Mono (google): Used for inline system labels, hotkeys and technical subheads. Safe substitutes: JetBrains Mono, IBM Plex Mono, or Fira Mono.
- Headline hierarchy: headline-lg 58px/1.07 for top heroes; headline-md 43px/1.21 for section intros; headline-sm 31px/1.19 for feature titles; headline-xs 23px Geist Mono for code-like labels. Body runs at body-md 16.5px/1.55 for readable dense paragraphs.

## Layout

- Spacing scale: 6, 14, 24, 32, 64px. Use 64px for section padding, 32px for blocks within sections, 24px for card gutters and inter-component gaps, 14px for control spacing, 6px for micro-gaps.
- Grid: 12-column desktop with a generous max-width; hero centers copy with two-button row, followed by a wide media card. On tablet, collapse to 6 columns; on mobile, full-width stack with 24px side padding.
- Lists and step flows use a left rail for numbers/labels and a content column; keep 24–32px between items for scanability.

## Elevation & Depth

- Shadows: use md (rgba(122,162,247,0.55) 0 12px 30px -12px) for hero media and marquee product screenshots; sm (rgba(122,162,247,0.61) 0 0 0 2.31957px) as a cool-blue focus ring/badge halo.
- Large depths (lg/xl) are none—favor minimal elevation. Where separation is needed, use the inner inset (rgba(14,14,22,0.1) 0 0 0 1px inset) or a subtle 1px rule.
- Hierarchy is primarily tonal: near-black actions on pale surfaces; blue accents indicate interactivity and state.

## Shapes

- Radii: sm 4px for small controls and input chips; md 8px for buttons and pills; lg 12px for cards, screenshots and major containers.
- The language is rounded-but-crisp. Avoid fully circular buttons unless representing an icon-only control; prefer pills with md rounding for CTAs.

## Components

- Buttons
  - Primary: background #14141a, text #ffffff, 40px height, 12x16 padding, 8px radius. Use for primary actions like Download or Tour.
  - Secondary: text #5f5f6a, 40px height, 12x16 padding, 4px radius. Pair with a light 1px rule on hover to preserve shape on pale backgrounds.
  - Link: text #4c4c57, 0px radius. Reserve for inline or tertiary CTAs.
- Card: background #f6f6f8, text #14141a, 16px padding, 12px radius. Add md shadow for marquee media; use inner inset for low-key panels.

### Quadrant Console
- A 2×2 grid within a lg-radius container. Use 24px gutters, md shadow, and an inner 1px inset to hold the dark interface. Header shows app name and run state; each quadrant has a mono label and a small status pill.

### Verification Gates Timeline
- Vertical stepper with Geist Mono sublabels (headline-xs 23px) and body-md descriptions. Use secondary #5aa0fc for "pending/running" states and border #14141a for "queued/done" badges.

### Disciplines Strip
- A horizontal list of discipline links (Coding, SEO, Video, Research, Support). Use tertiary #2b5fd9 for the active item; 14px spacing between pills; md radius when styled as chips.

### Metrics Row
- Four counters (e.g., 186 tools). Use headline-sm 31px for numbers, body-md for labels, 32px gap between items. Keep contrast by using primary #5f5f6a on neutral #f6f6f8.

### How-It-Works Stepper
- Numbered steps with a left index column and a content card. Headlines use headline-sm; include a code-style block set in Geist Mono for inline artifacts.

### Pricing Cards
- Three cards in a 3-up grid. Use lg radius, 24px internal spacing, primary button in the leftmost card. Price set in headline-md; plan notes in body-md with 14px line spacing between bullets.

### Integrations Grid
- Logo grid in 5 columns on desktop, collapsing to 3/2 on smaller screens. 24px gutters; logos in monochrome where possible to maintain the restrained palette.

## Do's and Don'ts

- Do reserve secondary (#5aa0fc) and tertiary (#2b5fd9) for links, focus and state—overusing blue for body text weakens the signal.
- Do keep buttons at 40px height with md (8px) radius; mixing radii within one row reads inconsistent.
- Do pair Geist Mono only with labels, hotkeys and code artifacts; don't set long paragraphs in mono.
- Don't add heavy drop shadows—use the provided md glow only for hero media and focus.
- Don't place low-contrast gray text on tinted panels; use on-surface (#5f5f6a) against surface (#f6f6f8) and switch to #14141a when you need stronger punch.
- Don't introduce new blues; stick to secondary and tertiary for consistency across states.

## Agent Prompt Guide

Quick reference
- Text: #5f5f6a (primary / on-surface)
- Background: #f6f6f8 (surface / neutral)
- Border/Key action: #14141a
- Accent: #5aa0fc (secondary), alt accent #2b5fd9 (tertiary)
- Radii: 4 / 8 / 12px
- Type: Geist, Geist Mono

1) Build the hero
- Container: background #f6f6f8, max-width 1040px, center with 64px top/bottom padding.
- H1: Geist 58px, weight 600, line-height 1.07, letter-spacing -0.025em, color #5f5f6a.
- Body: Geist 16.5px/1.55, color #5f5f6a, max-width 680px.
- Buttons: primary (#14141a bg, #ffffff text, 40px h, 12x16 padding, 8px radius) + secondary (transparent, #5f5f6a text, 4px radius).

2) Render the four-quadrant console card
- Card: 12px radius, background #f6f6f8, md shadow (rgba(122,162,247,0.55) 0 12px 30px -12px), inner inset 1px.
- Inside: 2×2 grid, 24px gaps; section titles in Geist Mono 23px; status pills use #5aa0fc for active and #14141a for dark labels.

3) Build the verification timeline
- Stack 4 steps vertically with 32px gaps.
- Step label: Geist Mono 23px, color #5f5f6a.
- Detail: Geist 16.5px/1.55.
- State chips: pending = #5aa0fc text on transparent with 1px #5aa0fc border; done = #14141a bg, #ffffff text, 4px radius.

4) Pricing cards
- 3 columns, 24px gutters; each card: #f6f6f8 bg, 12px radius, 16px padding.
- Plan name: Geist 31px/1.19 weight 600; price row beneath in Geist 43px/1.21 weight 600.
- Primary CTA uses #14141a; secondary info links use #2b5fd9.

5) Integrations grid
- 5 columns desktop, 24px gaps.
- Section title: Geist 43px/1.21 weight 600.
- Logos sit in 8px-radius tiles with inner 1px inset; hover ring uses sm shadow (rgba(122,162,247,0.61) 0 0 0 2.31957px).

## Similar Brands

- Vercel: Monochrome base with disciplined blue accents; Vercel is starker and leans heavier on black surfaces.
- Cursor: Technical, editor-first marketing; Cursor uses darker themes overall, while Codus stays light with dark product frames.
- Linear: Clean Geist-driven typography and tight spacing; Linear's purple accent is more expressive, Codus keeps blues restrained and functional.
- Anthropic: Quiet, text-forward pages; Anthropic is sparser with fewer product UI shots—Codus foregrounds a working console.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 1 hour ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 1 hour ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 13 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 13 hours ago