Landkit Design System

Get DESIGN.md Download View template Works with

Landkit website template preview detail 2

Landkit website template preview detail 3

Landkit is a bright, approachable startup template. White pages carry one strong block of colour, a deep pine-green hero band (#083232) with softly rounded bottom corners, and two button colours that sit side by side: sea green (#2E856E) and coral red (#F64D52). Type is DM Sans in bold weights at every size, which keeps it friendly and solid rather than corporate. Sage-grey hand-drawn doodles (a looped circle, scattered crosses, a swash under a key word) add a sketchbook touch.

The live preview's home page is a showcase: the hero, a four-column feature row, then a pale blue-grey panel of page previews, each under a pill tag (coral, or sage for the account pages).

Four signatures make it recognisable:

The scribble underline. One word in a headline gets a sage hand-drawn swash beneath it: Create stunning websites now., Build designs that scale, About Landkit, Latest News.
Two-colour button pairs. A green Buy Now → next to a coral View on Webflow →, both 60px tall with 5px corners and a trailing arrow.
Coral pill tags. 11px bold uppercase labels with 2px tracking in a #F64D52 pill (HOME 1, ABOUT, PRICING, BLOG 2); sage #99AEA2 pills for account pages (SIGN UP, SIGN IN).
The inset hero band. The pine-green hero is 98% of the viewport wide with 10px bottom corners, so a thin white margin frames it.

Landkit is a light design with pine-green hero and footer bands.

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#F7F9FA

Preview cards inside the showcase panel

surface-2#E4EDEF

The showcase panel (.presantation-grid, --alice-blue) and light page sections in the thumbnails

field#FFFFFF

inverse-canvas#083232

Hero band, scrolled nav, footer, dark page headers (--dark-slate-grey)

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

Text on secondary

on-accent#FFFFFF

ink#111111

Headings and base text

ink-muted#000000

Paragraphs

ink-subtle#111111 · 61%

Dropdown links at rest

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-hover#FFFFFF · 82%

Footer links on hover

Action

primary#2E856E

The main button (.button), the nav New badge, highlighted words, blockquotes (--sea-green)

primary-hover#439E86

.button:hover

secondary#F64D52

The second button, Sign In →, the cart button, page tags (--indian-red)

accent#99AEA2

Sage doodles and the muted pill tags (--dark-grey)

Lines & effects

nav-hover#888888

Typography

DM Sans · display-hero

The quick brown fox jumps

Create stunning websites now. 70px · 700 · 1.0

DM Sans · headline-md

The quick brown fox jumps

Base h2. 32px · 700 · 1.13

DM Sans · title-price

The quick brown fox jumps

Prices (.price-tag). 30px · 700 · 1.5

DM Sans · body-lg

The quick brown fox jumps

Hero lead (.sub-heading). 20px · 500 · 1.4

DM Sans · label-nav

The quick brown fox jumps

Nav links, footer links (17px/700, line height 20px). 17px · 700 · 1.0

DM Sans · caption

The quick brown fox jumps

Base text, inputs. 14px · 700 · 1.43

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	.section pads 120px top and bottom (60px at ≤767px)
Breakpoints	991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules

Spacing scale

Token	Value	Preview
`xs`	6px
`sm`	10px
`md`	16px
`lg`	20px
`xl`	40px
`2xl`	50px

Layout spacing

Token	Value	Preview
`grid-gap`	40px
`panel`	75px
`footer-top`	80px
`hero-bottom`	90px
`section`	120px
`hero-top`	154px

Border radius

xs3px

sm5px

md10px

pill30px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3surface-2

Motion

Fade-up on scroll	opacity 0 → 1 and move to x 0, y 0, 1000ms outQuart (scroll-into-view)
Scale-in on scroll	scale to 1, 1000ms outQuart
Dropdown open / close	Opacity 300ms ease
Nav link hover	Opacity / colour, 200ms
Button hover	Background #2E856E → #439E86

Do’s and don’ts

Use DM Sans bold for headings (700) and 500 for paragraphs, with paragraphs in pure #000000.
Pair a #2E856E primary button with a #F64D52 secondary, both 60px tall, 5px radius, label plus →.
Put one strong #083232 band at the top of a page and one in the footer, with white text.
Label sections and cards with coral pill tags: 11px, 700, uppercase, 2px tracking, 30px radius.
Underline one word per headline with a sage hand-drawn swash.
Use #E4EDEF panels with #F7F9FA cards (10px radius) for grouped content.
Add shadows or gradients; Landkit is flat.
Use the sage #99AEA2 for text: white on it is about 2.3:1, so keep it for doodles and 11px bold tags only.
Set long or thin text in white on #F64D52 (3.4:1), on #439E86 (3.2:1) or on #2E856E (4.47:1), or in green on white (4.47:1). These are the template's real colours: keep button and tag labels 16px bold (11px bold caps for tags) and green text to 17px weight 800 highlights.
Mix more than two button colours in one view.
Use #888888 as resting text; it is only the nav hover.
Round buttons into pills; pills are for tags only.

Example prompt

Any page in the Landkit style

Prompt

Build your page in the Landkit style. Use a white page with a deep #083232 hero band (98% wide, 10px bottom corners, 154px top padding) and a #083232 footer. Type is DM Sans: hero 70px weight 700 line height 1.0, feature titles 24px/700, paragraphs 17px weight 500 line height 24px in #000000. Underline one word in each headline with a sage (#99AEA2) hand-drawn swash. Buttons are 60px tall, 5px radius, 20px 28px padding, 16px/700 with "→": primary #2E856E (hover #439E86), secondary #F64D52, both white text. Tags are #F64D52 pills, 30px radius, 10px 22px padding, 11px/700 uppercase with 2px tracking. Group content in #E4EDEF panels with #F7F9FA cards (10px radius). 1200px container, 120px section padding, no shadows.

# Landkit Design System

> Measured from the Landkit template. Drop it into
> Claude, ChatGPT, Gemini, Cursor or v0.

## Overview

Landkit is a bright, approachable startup template.
White pages carry one strong block of colour, a deep
pine-green hero band (#083232) with softly rounded
bottom corners, and two button colours that sit side by
side: sea green (#2E856E) and coral red (#F64D52). Type

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #F7F9FA     | Preview cards inside th… |
| surface-2    | #E4EDEF     | The showcase panel (.pr… |
| field        | #FFFFFF     |                          |
| inverse-can… | #083232     | Hero band, scrolled nav… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| on-accent    | #FFFFFF     |                          |
| ink          | #111111     | Headings and base text   |
| ink-muted    | #000000     | Paragraphs               |
| ink-subtle   | #111111 61% | Dropdown links at rest   |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| inverse-ink… | #FFFFFF 82% | Footer links on hover    |
| primary      | #2E856E     | The main button (.butto… |

## Typography

- display-hero: DM Sans 70px / 700
- headline-md: DM Sans 32px / 700
- title-price: DM Sans 30px / 700
- title-md: DM Sans 24px / 700

{
  "$description": "Landkit design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#2E856E",
      "$description": "The main button (.button), the nav New badge, highlighted words, blockquotes (--sea-green)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#439E86",
      "$description": ".button:hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#F64D52",
      "$description": "The second button, Sign In →, the cart button, page tags (--indian-red)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#99AEA2",
      "$description": "Sage doodles and the muted pill tags (--dark-grey)"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F7F9FA",
      "$description": "Preview cards inside the showcase panel"

/* Landkit theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-body, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #2E856E;
  --color-primary-hover: #439E86;
  --color-on-primary: #FFFFFF;
  --color-secondary: #F64D52;
  --color-on-secondary: #FFFFFF;
  --color-accent: #99AEA2;
  --color-on-accent: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F7F9FA;
  --color-surface-2: #E4EDEF;
  --color-ink: #111111;
  --color-ink-muted: #000000;
  --color-ink-subtle: #1111119C;
  --color-nav-hover: #888888;
  --color-line: #E4EDEF0F;
  --color-line-strong: #FFFFFF;
  --color-field: #FFFFFF;
  --color-inverse-canvas: #083232;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-hover: #FFFFFFD1;

  /* Fonts */
  --font-sans: "DM Sans", sans-serif;
  --font-dm-sans: "DM Sans", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 70px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-headline-md: 32px;
  --text-headline-md--line-height: 1.13;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 700;
  --text-title-price: 30px;
  --text-title-price--line-height: 1.5;
  --text-title-price--letter-spacing: 0px;
  --text-title-price--font-weight: 700;
  --text-title-md: 24px;
  --text-title-md--line-height: 1.25;

/* Landkit design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #2E856E; /* The main button (.button), the nav New badge, highlighted words, blockquotes (--sea-green) */
  --color-primary-hover: #439E86; /* .button:hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #F64D52; /* The second button, Sign In →, the cart button, page tags (--indian-red) */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-accent: #99AEA2; /* Sage doodles and the muted pill tags (--dark-grey) */
  --color-on-accent: #FFFFFF;
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #F7F9FA; /* Preview cards inside the showcase panel */
  --color-surface-2: #E4EDEF; /* The showcase panel (.presantation-grid, --alice-blue) and light page sections in the thumbnails */
  --color-ink: #111111; /* Headings and base text */
  --color-ink-muted: #000000; /* Paragraphs */
  --color-ink-subtle: #1111119C; /* Dropdown links at rest */
  --color-nav-hover: #888888; /* Top nav links on hover */
  --color-line: #E4EDEF0F; /* The 1px footer divider on the dark band */
  --color-line-strong: #FFFFFF; /* The 2px white ring around the cart count */
  --color-field: #FFFFFF;
  --color-inverse-canvas: #083232; /* Hero band, scrolled nav, footer, dark page headers (--dark-slate-grey) */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-hover: #FFFFFFD1; /* Footer links on hover */

  /* Fonts */
  --font-dm-sans: "DM Sans", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 70px;
  --text-display-hero-font: var(--font-dm-sans);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-headline-md: 32px;
  --text-headline-md-font: var(--font-dm-sans);
  --text-headline-md-weight: 700;
  --text-headline-md-line-height: 1.13;
  --text-headline-md-tracking: 0px;
  --text-title-price: 30px;
  --text-title-price-font: var(--font-dm-sans);
  --text-title-price-weight: 700;
  --text-title-price-line-height: 1.5;
  --text-title-price-tracking: 0px;
  --text-title-md: 24px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

SaaS design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

DM Sans · display-hero

DM Sans · headline-md

DM Sans · title-price

DM Sans · body-lg

DM Sans · label-nav

DM Sans · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Landkit style

More design systems like this

Card

Digi

Dolce

Kliko

Bring any of them to your AI tool