Skip to content
DesignMunkDesignMunk Submit a site

Landify

landify.design
Your next website starts here—build faster with Landify UI.
Design Tools Framer Homepage Britti Sans Geist Mono
Share Visit site
landify.design DESKTOP · 1440
Landify

AI Breakdown

Design export

# Design brief: the Landify 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/04085733/landify-design-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/04085733/landify-design-featured.webp
- On DesignMunk: https://designmunk.com/landify/

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

# Landify: Big Purple Headlines and No-Code Kit Proof

## Overview

Landify targets designers and founders shipping SaaS marketing sites quickly. The interface should feel confident, modern, and efficient—spacious layouts, strong headings, minimal chrome. Purple acts as the expressive accent; white surfaces and crisp black text keep content legible. When a token is missing, bias toward clarity: generous white space, a single strong accent, and obvious CTAs.

## Colors

- Primary (#000000): Core text, icons, and high-contrast elements.
- Secondary (#f7636c): Coral accent for badges, highlights, and alerts.
- Tertiary (#7c3aed): Primary brand accent for CTAs, key headings, and interactive states.
- Neutral (#ffffff): Base surface for pages, cards, and sections.
- Brand-aquarius (#30b5c7): Supporting cyan for gradients, charts, and decorative UI.
- Brand-twinkly-pinkily (#ce5199): Supporting pink for gradients and occasional emphasis.
- Surface ({colors.neutral}): Default page and card background.
- On-surface ({colors.primary}): Default text color on light surfaces.

## Typography

- Headline-lg — Britti Sans Medium, 64px/1.13, 500, -0.02em. Use for the hero headline and primary section titles.
- Headline-md — Inter Display, 44px/1.2, 500. Secondary section headers and large feature intros.
- Headline-sm — Britti Sans Medium, 30px/1.33, 500, -0.011em. Card titles and pricing plan names.
- Headline-xs — sans-serif, 20px/1.2, 500. Small section labels and overlines.
- Body-md — Geist Mono, 14px/1.43, 500, -0.02em. Short descriptions, metadata, and UI annotations.
Availability and substitutes:
- Britti Sans Medium is custom/self-hosted. Suggested substitutes: Satoshi, Manrope, Plus Jakarta Sans.
- Inter Display is custom/self-hosted. Suggested substitutes: Inter, DM Sans, Urbanist.
- Geist Mono is Google-hosted and can be loaded directly.

## Layout

Spacing is built on a 4px base with practical steps: 4, 12, 20, 24, 100. Use xl (100px) for hero top/bottom padding, lg (24px) for section gaps and card padding, md (20px) for grid gutters, sm (12px) for compact stacks, and xs (4px) for micro-adjustments. Structure content on a responsive 12-column grid; within sections, prefer 2–4 column layouts and consistent vertical rhythm using multiples of 12/24.

## Elevation & Depth

Depth is subtle. Use the sm shadow for interactive or floating UI (cards, mockup frames): rgba(19,19,24,0.04) ring plus soft blur layers. Larger shadows are none; hierarchy instead relies on contrast (white vs. black), the brand purple on CTAs, thin borders, and generous whitespace.

## Shapes

Corners are rounded consistently: sm 4px for chips and tags, md 8px for buttons and inputs, lg 16px for cards, mockups, and pricing panels. Radii communicate importance—the larger the surface, the softer the corner.

## Components

Buttons and card tokens define the core look-and-feel:
- Button Primary: background {colors.tertiary} (#7c3aed), text #0000ee, 8px radius, 40px height, padding 8px 14px. Use for main CTAs.
- Button Secondary: text {colors.primary} (#000000), 4px radius, 40px height, padding 8px 14px. Use for less prominent actions; pair with a neutral or outlined style.
- Button Link: text {colors.primary}, square corners for inline actions.
- Card: background {colors.neutral} (#ffffff), text {colors.primary}, 16px radius, 24px padding; apply sm shadow for lift.

Distinctive components on this page:
### Hero with Dual CTAs
- Layout: center stack with headline-lg at 64px, body-md underneath, then two buttons (primary then secondary) with sm gap (12px). Vertical padding: xl (100px).
### Product Mockup Stage
- A wide card using lg radius (16px) and sm shadow; place browser frames inside a dark canvas. Horizontal padding: lg (24px); top/bottom: md (20px).
### Metrics Strip (20+ Pages / 350+ Sections / 80+ Icons / Figma + Framer)
- Four items in a 4-column grid, md (20px) gutter. Numbers in headline-sm (30px), labels in body-md.
### Figma vs. Framer Split
- Two equal cards in a 2-column grid with lg (24px) gap. Each card: lg radius, 24px padding, list of 4 bullets in body-md, and a single CTA.
### Sections Catalog Grid
- A 4-column responsive grid listing section types and counts. Each tile is a card (16px radius, 24px padding) with title in headline-xs (20px) and count in headline-sm (30px).
### Pricing Table
- Three pricing cards: two basics and one "Pass". Card padding 24px, lg radius 16px, primary CTA 40px height. Plan name in headline-sm, price in headline-md.
### FAQ Accordion
- Questions in headline-xs; answers in body-md. Expand/collapse uses 12px vertical padding and 1px border or the sm shadow ring.
### Footer Utility Bar
- Multi-column link list with body-md text and sm gaps; social links grouped to the right.

## Do's and Don'ts

- Do reserve {colors.tertiary} (#7c3aed) for primary actions and key headings; keep other accents minimal.
- Do space sections with lg (24px) internal gaps and xl (100px) hero padding to maintain the airy rhythm.
- Do use lg (16px) radius for cards and md (8px) for buttons; mixing radii inside a component muddies hierarchy.
- Don't apply heavy shadows; stick to the sm token for lift and rely on whitespace for separation.
- Don't stack more than two CTAs together; pair the primary with at most one secondary.
- Don't mix all three accent hues in one component; choose purple plus at most one supporting accent.

## Agent Prompt Guide

Quick color reference:
- Text: #000000
- Background: #ffffff
- Border: #000000
- Accent: #7c3aed

1) Build the hero
- Container: center, vertical padding 100px (#ffffff background).
- H1: "The Complete Website UI Kit for Figma & Framer" in Britti Sans Medium, 64px, 500, line-height 1.13, color #7c3aed.
- Body: Geist Mono, 14px, 500, line-height 1.43, color #000000.
- Buttons: primary (bg #7c3aed, text #0000ee, radius 8px, height 40px, padding 8px 14px) then secondary (text #000000, radius 4px, height 40px, padding 8px 14px), gap 12px.

2) Two-column Figma/Framer section
- Grid: 2 columns, gap 24px, container padding 24px.
- Card: #ffffff background, radius 16px, padding 24px, sm shadow.
- Headings: Inter Display 44px, 500. Bullets: Geist Mono 14px.
- CTA: primary button spec above.

3) Metrics strip of four items
- Grid: 4 columns, gutter 20px.
- Number: Britti Sans Medium 30px, 500.
- Label: Geist Mono 14px. Card padding 24px; use #ffffff background.

4) Pricing table (three cards)
- Grid: 3 columns, gap 24px.
- Card: radius 16px, padding 24px, sm shadow.
- Plan name: Britti Sans Medium 30px, 500.
- Price: Inter Display 44px, 500.
- CTA: primary button, full width, 40px height.

5) FAQ accordion
- Question: 20px, 500 (headline-xs), padding 12px vertical.
- Answer: Geist Mono 14px. Divider: 1px #000000. Use sm shadow when expanded.

## Similar Brands

- Relume Library — Similar modular section catalog and clear counts; Landify leans heavier on a single brand purple.
- Untitled UI — Comprehensive Figma kit landing with large cards; Landify's dual Figma/Framer split is more explicit.
- Framer Templates — Dark mockups and strong CTAs; Landify uses a lighter page surface and bigger headline scale.
- Flowbase — Grid of sections and components; Landify's typography is tighter and radii larger on cards.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #f7636c;
  --color-tertiary: #7c3aed;
  --color-neutral: #ffffff;
  --color-brand-aquarius: #30b5c7;
  --color-brand-twinkly-pinkily: #ce5199;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.13;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 44px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.2;
  --text-headline-sm-size: 30px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.33;
  --text-headline-sm-tracking: -0.011em;
  --text-headline-xs-size: 20px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 14px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.43;
  --text-body-md-tracking: -0.02em;
  --font-britti-sans-medium: "Britti Sans Medium";
  --font-inter-display: "Inter Display";
  --font-sans-serif: "sans-serif";
  --font-geist-mono: "Geist Mono";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 100px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #0000ee;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 8px 14px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 14px;
  --button-secondary-height: 40px;
  --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-lg);
  --card-padding: 24px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #f7636c;
  --color-tertiary: #7c3aed;
  --color-neutral: #ffffff;
  --color-brand-aquarius: #30b5c7;
  --color-brand-twinkly-pinkily: #ce5199;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Britti Sans Medium";
  --font-headline-md: "Inter Display";
  --font-headline-sm: "Britti Sans Medium";
  --font-headline-xs: "sans-serif";
  --font-body-md: "Geist Mono";
  --text-headline-lg: 64px;
  --text-headline-md: 44px;
  --text-headline-sm: 30px;
  --text-headline-xs: 20px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.02em;
  --tracking-headline-sm: -0.011em;
  --tracking-body-md: -0.02em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 500;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 100px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.969,
                    0.388,
                    0.424
                ],
                "hex": "#f7636c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.227,
                    0.929
                ],
                "hex": "#7c3aed"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "brand-aquarius": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.188,
                    0.71,
                    0.78
                ],
                "hex": "#30b5c7"
            }
        },
        "brand-twinkly-pinkily": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.808,
                    0.318,
                    0.6
                ],
                "hex": "#ce5199"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 100,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Britti Sans Medium",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Display",
                "fontSize": {
                    "value": 44,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Britti Sans Medium",
                "fontSize": {
                    "value": 30,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.011,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "sans-serif",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Mono",
                "fontSize": {
                    "value": 14,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        }
    }
}
```

## 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 Landify**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Design Tools →
astrobuildkit.com
Astrobuildkit Design Tools
Astrobuildkit
imagetoascii.art
Image to ASCII Creative
Image to ASCII
sprig.com
Sprig Careers Analytics
Sprig Careers
lunagraph.com
Lunagraph Design Tools
Lunagraph