Skip to content
DesignMunkDesignMunk Submit a site

Codemod

codemod.com
Put your code migrations on autopilot with agent guardrails.
AI Developer Tools Next.js Tailwind Homepage codemod Sans Font
Share Visit site
codemod.com DESKTOP · 1440
Codemod

AI Breakdown

Design export

# Design brief: the Codemod design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/30102857/codemod-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/30102857/codemod-com-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/codemod/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Codemod: Monochrome UI With Lime Ambient Glow

## Overview

Enterprise-leaning, utilitarian, and trustworthy. The palette is almost entirely monochrome with a single bright lime used sparingly. Typography is assertive at display sizes but economical in body copy. Spacing is generous, with large buffers around dense content to keep scanning fast. Use this system for clear, control-oriented UI with minimal ornament.

## Page Structure

- Global nav: left-aligned wordmark, center/left primary links, right utility actions; slim height with ample negative space.
- Announcement pill: centered above the hero; compact capsule with subdued background and a short label + chevron/icon.
- Hero: oversized display headline over one-paragraph subcopy; two side-by-side CTAs beneath; all center-aligned on a quiet paper surface with faint lime glow at page edges.
- Product demo: a wide, rounded container showing a left chat/console transcript and a right analytics card; light shadow and soft radii.
- Single-line proof statement: bold centered heading directly under the demo; acts as a scannable value reinforcement.
- Feature callouts: sequential blocks with a short label (tool/agent name), a medium headline, and one-to-two lines of copy; stacked vertically with comfortable spacing.
- Social proof strip: adoption statement followed by a row (or two) of grayscale logos; minimalist styling.
- Capabilities section: headline and a horizontal list of compact chips (package upgrades, cross-language, etc.); followed by a focused sub-feature with a learn-more link and a case-study card.
- Editorial feed: section header, a row of article teasers with titles, tags, authors, and dates; concludes with a View all link.
- Testimonial: large pull-quote with attribution; centered and roomy.
- Final CTA band: succinct headline and a primary action; high-contrast and uncluttered.
- Footer: multi-column lists for Product, Company, and Legal plus social links; small utility (theme toggle).

## Colors

- Primary (#090909): Jet black for headlines, body text, and icons.
- Secondary (#d4ff5e): Signal lime used sparingly for emphasis or ambient background treatments.
- Neutral (#fcfcfc): Paper-white base for the page background and cards.
- Surface ({colors.neutral}): Alias of neutral; default surfaces for sections and cards.
- on-surface ({colors.primary}): Alias of primary for text and key UI glyphs over light backgrounds.

## Typography

- Codemod Sans Font (custom, self-hosted): the sole family across headings and body. Use for brand-accurate builds when assets are available. Not provided via Google; agents should not auto-load it.
- Substitutes (obtainable): Inter (Google), Manrope (Google), Plus Jakarta Sans (Google). Choose a geometric-humanist sans with clean figures and good UI legibility.
- Display hierarchy: headline-lg 64px/1, 700 for hero; headline-md 47px/1.19, 600 for major section intros; headline-sm 34px/1.13 and headline-xs 25px/1.2 for subheads and callouts.
- Body: body-md 18px/1.63, 500 for paragraphs, list items, and UI descriptions. Keep strong contrast (primary on neutral).

## Layout

Spacing uses a five-step scale: 8, 16, 32, 64, 106. Build sections with generous outer padding (lg or xl) and intra-component gaps at sm–md. Content typically centers within wide containers; dense components (logo rail, chips, article list) use tighter sm–md gaps, while hero and testimonial use lg–xl to breathe. Default to a single responsive column that can split into two for demo/feature pairs.

## Elevation & Depth

Depth is minimal. Only a soft sm shadow (lab 0 0 0 / 0.04 at 0 1px 2px) appears on floating cards and the demo container. Most hierarchy is achieved with strong type contrast, generous whitespace, and occasional subtle borders/tonal shifts rather than heavy elevation.

## Shapes

Two radii communicate hierarchy: md (10px) for interactive controls and larger feature containers; sm (8px) for standard cards. Avoid mixing sharp and fully rounded shapes; consistency of 8–10px corners is part of the brand voice.

## Components

Buttons
- Primary: background #dedede, text #161616, 44px tall with 0 12px padding, md (10px) radius. Use for core actions.
- Secondary: text-only style using primary for text, 44px tall, 0 12px padding, md radius.
- Link button: text in primary with 0 radius; pair with chevrons when appropriate.

Card
- Background neutral (#fcfcfc), text primary, sm (8px) radius, 16px padding. Apply the sm shadow only when the card needs separation from the page.

Distinctive components

### Announcement Pill
- Centered capsule above the hero using the card surface, sm shadow, and md radius; set label in body-md. Keep width to content and add sm (16px) horizontal padding.

### Hero CTA Group
- Two actions aligned center beneath the headline: primary button followed by secondary link/button with sm gap. Maintain 44px height and md radius.

### Demo Split Card
- Wide container with sm radius and sm shadow. Inside: left conversational log in a scrollable column; right summary panel styled as a nested card. Use md (32px) gap between columns on desktop and stack on mobile.

### Capability Chips
- Compact, single-line pills for categories (e.g., security, internationalization). Use sm radius, body-md text, and sm horizontal padding; arrange in a wrapping row with sm gaps.

### Logo Rail
- One or two rows of grayscale logos on the neutral surface; equal height images with sm gaps. Keep ample lg spacing above and below.

### Blog Teasers
- A row of article cards: title (headline-xs), meta line, and link. Use sm radius cards with 16px padding; include a trailing View all link.

### Testimonial Quote
- Centered blockquote set in headline-sm or xs with body-sized attribution. Surround with lg–xl spacing to create a pause before the final CTA.

### Final CTA Band
- Brief headline and a single primary action centered in a neutral strip; md top/bottom padding and md radius if placed in a contained card.

## Do's and Don'ts

- Do reserve secondary (#d4ff5e) for subtle emphasis or ambient backgrounds; keep text and core UI in monochrome.
- Do use the spacing scale (8/16/32/64/106) — avoid ad-hoc values between steps.
- Do keep corners at 8–10px; mixing sharper or fully rounded styles breaks consistency.
- Don't introduce heavy drop shadows; prefer the provided sm shadow or none.
- Don't cram dense elements; give the demo, testimonial, and CTA lg–xl breathing room.
- Don't mix additional display fonts; stick to the single Sans family or its approved substitutes.

## Agent Prompt Guide

Color reference
- Text: #090909
- Background: #fcfcfc
- Border: #090909 (use low opacity for hairlines)
- Accent: #d4ff5e

1) Hero with twin CTAs
- Container: center a 960–1200px max-width section on #fcfcfc with lg (64px) top/bottom padding.
- Headline: use codemodSansFont (fallback Inter, Manrope), 64px, weight 700, line-height 1, letter-spacing -0.025em, color #090909.
- Subcopy: 18px/1.63, weight 500, color #090909 at reduced opacity if available.
- CTAs: place a 16px gap between. Primary button 44px tall, 0 12px padding, 10px radius, background #dedede, text #161616. Secondary button 44px tall, text #090909, 10px radius.

2) Demo split card
- Outer card: background #fcfcfc, 8px radius, sm shadow (0 1px 2px at 4% black), md (32px) padding.
- Layout: two columns with md (32px) gap; stack on mobile.
- Right nested card: background #fcfcfc, 8px radius, 16px padding; small metric tiles inside using 18px labels and bold numerals.

3) Capability chips row
- Heading set in 34px, weight 600.
- Chips: text #090909, 8px radius, 8–16px horizontal padding; arrange inline with sm (16px) gaps; use #fcfcfc backgrounds and a 1px hairline border in #090909 at low opacity.

4) Blog teasers
- Section padding: lg (64px).
- Cards: background #fcfcfc, 8px radius, 16px padding; title in 25px/1.2, 600; meta in 18px.
- Arrange in a wrapping row with md (32px) gaps; include a trailing text link styled with #090909.

## Similar Brands

- Sourcegraph: similarly monochrome developer aesthetic with a single bright accent; Codemod is softer on elevation and uses lime as atmosphere rather than button color.
- Vercel: black/white rigor and strong display sizes; Codemod is less theatrical, with gentler radii and fewer gradients.
- Snyk: developer-first structure and proof via logos; Codemod runs lighter on brand color and leans on typography for hierarchy.
- Linear: disciplined type scale and generous spacing; Codemod adds subtle product demos and an ambient accent instead of heavy gradients.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #090909;
  --color-secondary: #d4ff5e;
  --color-neutral: #fcfcfc;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 47px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.19;
  --text-headline-sm-size: 34px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.13;
  --text-headline-sm-tracking: -0.009em;
  --text-headline-xs-size: 25px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 18px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.63;
  --font-codemodsansfont: "codemodSansFont";

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

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 106px;

  /* Components */
  --button-primary-background-color: #dedede;
  --button-primary-text-color: #161616;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 0px 12px;
  --button-primary-height: 44px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 0px 12px;
  --button-secondary-height: 44px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #090909;
  --color-secondary: #d4ff5e;
  --color-neutral: #fcfcfc;
  --color-surface: #fcfcfc;
  --color-on-surface: #090909;
  --font-headline-lg: "codemodSansFont";
  --font-headline-md: "codemodSansFont";
  --font-headline-sm: "codemodSansFont";
  --font-headline-xs: "codemodSansFont";
  --font-body-md: "codemodSansFont";
  --text-headline-lg: 64px;
  --text-headline-md: 47px;
  --text-headline-sm: 34px;
  --text-headline-xs: 25px;
  --text-body-md: 18px;
  --tracking-headline-lg: -0.025em;
  --tracking-headline-sm: -0.009em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 500;
  --radius-sm: 8px;
  --radius-md: 10px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 106px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.035,
                    0.035,
                    0.035
                ],
                "hex": "#090909"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.831,
                    1,
                    0.369
                ],
                "hex": "#d4ff5e"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.988,
                    0.988
                ],
                "hex": "#fcfcfc"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.988,
                    0.988
                ],
                "hex": "#fcfcfc"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.035,
                    0.035,
                    0.035
                ],
                "hex": "#090909"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 64,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 106,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "codemodSansFont",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "codemodSansFont",
                "fontSize": {
                    "value": 47,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "codemodSansFont",
                "fontSize": {
                    "value": 34,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.009,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "codemodSansFont",
                "fontSize": {
                    "value": 25,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "codemodSansFont",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Codemod**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears