Skip to content
DesignMunkDesignMunk Submit a site

Liinks

liinks.co
One link for everything—build, share, and stand out.
Creative Software Homepage Noto Sans Schibsted Grotesk
Share Visit site
liinks.co DESKTOP · 1440
Liinks

AI Breakdown

Design export

# Design brief: the Liinks 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/04174836/liinks-co-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/04174836/liinks-co-featured.webp
- On DesignMunk: https://designmunk.com/liinks/

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

# Liinks: Friendly Pill CTAs on a Pastel Gradient Hero

## Overview

Liinks targets creators and small teams with a friendly, confident UI. The page should feel approachable, quick to set up, and visually customizable. Density is moderate: large headlines with concise body copy, generous hero spacing (xl) to showcase previews, and consistent pill-shaped actions to guide flow from hero to pricing and FAQs.

## Colors

- **primary (#1d1d28):** Core ink for headlines, body text, and icons.
- **secondary (#000000):** Deepest black for logos or high-impact accents.
- **tertiary (#27ae60):** Success and positive accent states (e.g., confirmations, badges).
- **neutral (#ffffff):** Primary surface for the light theme and pill components.
- **brand-karimun-blue (#1b97f5):** Bright brand accent for links or small highlights.
- **brand-wasurenagusa-blue (#86c0ec):** Soft supporting accent for gradients and backgrounds.
- **surface (#ffffff):** Page background; same as neutral.
- **on-surface (#1d1d28):** Default text color on surface white.

## Typography

- Schibsted Grotesk (Google, free): Display family for all headlines. Sizes provided: 76px/800 (lg), 48px/800 (md), 32px/800 (sm) with tightened letter-spacing. Substitutes if unavailable: Inter, Plus Jakarta Sans, IBM Plex Sans.
- Noto Sans (Google, free): Body and small headings. Sizes provided: 18px/600 for headline-xs; 16px/400 for body-md. Substitutes if needed: Source Sans 3, Inter, System UI stack (-apple-system, Segoe UI, Roboto). Use Grotesk for emphasis and scannability; use Noto for long reads and labels.

## Layout

- Spacing scale: xs 2px, sm 12px, md 24px, lg 32px, xl 128px.
- Use xl (128px) for hero top/bottom padding and major section breaks.
- Use lg (32px) gutters around cards and mockups; md (24px) for interior card padding and section content rhythm.
- sm (12px) for control gaps, button paddings, and small list spacing; xs (2px) for icon separators and micro offsets.
- A responsive multi-column grid (e.g., 12-col) with md/lg gutters supports wide visuals; collapse to single-column with preserved xl section spacing on mobile.

## Elevation & Depth

- Shadows emphasize previews and interactive layers. Use sm for subtle lifts (chips, small pills), md for dialogs or sticky toolbars, and lg for expressive marketing elements and tilted mockups.
- xl is none; don't over-stack shadows.
- Where shadows are minimal, rely on the large white surface and strong ink text. Inner shadow can add a soft inset edge on dark cards or inputs.

## Shapes

- Two radii: sm 25.5px and full 9999px.
- Use full for all CTAs, inputs, and badges to maintain the pill language.
- Use sm (25.5px) for cards and large media blocks—rounded but structured.
- Sharp corners are intentionally avoided to keep the system friendly and cohesive.

## Components

Buttons
- Primary Button: background #ffffff, text #1d1d28, height 27px, padding 6px 12px, radius 9999px. Default CTA in hero and nav.
- Secondary Button: stylistically identical to primary; use for adjacent, lower-priority actions.
- Link Button: text #1d1d28, no radius; inline calls within paragraphs.

Card
- Background #16161e, text #1d1d28, radius 25.5px, padding 32px 24px 24px. Pair with md shadow or inner inset for separation.

### Social Proof Capsule
- Horizontal avatar stack with rating stars and short copy. Set on neutral (#ffffff) with full radius and md (24px) horizontal padding; text uses Noto Sans 16px/400.

### URL Builder CTA Bar
- Example domain text on a pill input (full radius, 27px height) followed by a Primary Button. Background #ffffff, text #1d1d28, sm (12px) gap between input and button.

### Tilted Profile Previews
- Three stacked device/profile cards angled slightly with lg shadow for colorful depth. Maintain lg (32px) outer margin and xl (128px) top/bottom hero padding.

### Feature Icon Strip
- Single-line list of short claims with small icons, spaced by sm (12px). Text #1d1d28 on surface; use brand blues for icons.

### Pricing Plan Cards
- Two cards in a responsive grid. Use card radius 25.5px and padding 32/24. Headings in Schibsted Grotesk 32px/800; body in Noto Sans 16px/400. Primary Button pills for CTAs.

### Testimonial Quotes
- Noto Sans 16px body with optional small avatar. Headline "Loved by 10,000+ creators" in Grotesk 48px/800. Grid or carousel; md (24px) vertical spacing.

### FAQ Accordion
- Each item uses on-surface text with a thin divider (use #1d1d28 at low opacity). Questions set in Noto Sans 18px/600; answers in 16px/400.

## Do's and Don'ts

- Do keep primary text #1d1d28 on surface #ffffff for all long reads.
- Do use full (9999px) radius for CTAs and inputs; keep height at 27px per tokens.
- Do reserve lg shadow for marketing mockups or hero elements; prefer sm/md elsewhere.
- Don't mix square and rounded corners—use sm (25.5px) for containers, full for controls.
- Don't introduce un-tokened accent colors; use #1b97f5 and #86c0ec for highlights only.
- Don't stack more than two button styles side by side; primary first, secondary second.

## Agent Prompt Guide

Quick color reference
- Text: #1d1d28
- Background: #ffffff
- Border: #1d1d28
- Accent: #1b97f5

1) Build the hero
- Background #ffffff. H1 set in Schibsted Grotesk, 76px, weight 800, line-height 1.05, letter-spacing -0.02em, color #1d1d28. Subcopy in Noto Sans 16px/400. Add a pill CTA bar: input pill (height 27px, radius 9999px, padding 6px 12px, background #ffffff, border rgba(29,29,40,0.12)), followed by a Primary Button (same height/radius, background #ffffff, text #1d1d28). Use xl (128px) top/bottom padding.

2) Social-proof capsule
- Horizontal group on #ffffff with md (24px) horizontal padding and full radius (9999px). Left-aligned avatar stack, 5–7 images, 12px overlap. Right-aligned Noto Sans 16px/400 text in #1d1d28 with a small star icon in #1b97f5.

3) Pricing section
- Two cards in a responsive grid. Card container: background #16161e, radius 25.5px, padding 32px 24px 24px, md shadow. Plan title in Schibsted Grotesk 32px/800; features in Noto Sans 16px/400, text #1d1d28. CTA uses Primary Button (27px height, 9999px radius).

4) FAQ accordion
- Section background #ffffff. Each item: question in Noto Sans 18px/600, answer in 16px/400. Divider line using #1d1d28 at 12% opacity. Spacing: md (24px) between items, lg (32px) section padding.

## Similar Brands

- Linktree — Similar link-in-bio utility and big display headlines; Liinks leans more into pill CTAs and softer gradient color.
- Beacons — Creator-focused with bold cards; Liinks feels lighter with tighter headline leading and consistent pill controls.
- Koji — Highly customizable link pages; Liinks presents a calmer marketing page with fewer neon choices.
- Carrd — Simple one-page builder; Liinks emphasizes social proof and multi-profile management more prominently.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1d1d28;
  --color-secondary: #000000;
  --color-tertiary: #27ae60;
  --color-neutral: #ffffff;
  --color-brand-karimun-blue: #1b97f5;
  --color-brand-wasurenagusa-blue: #86c0ec;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 76px;
  --text-headline-lg-weight: 800;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 800;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.018em;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 800;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: -0.01em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --font-schibsted-grotesk: "Schibsted Grotesk";
  --font-noto-sans: "Noto Sans";

  /* Rounded */
  --radius-sm: 25.5px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 128px;

  /* Components */
  --button-primary-background-color: var(--color-neutral);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 6px 12px;
  --button-primary-height: 27px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 6px 12px;
  --button-secondary-height: 27px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #16161e;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 32px 24px 24px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #1d1d28;
  --color-secondary: #000000;
  --color-tertiary: #27ae60;
  --color-neutral: #ffffff;
  --color-brand-karimun-blue: #1b97f5;
  --color-brand-wasurenagusa-blue: #86c0ec;
  --color-surface: #ffffff;
  --color-on-surface: #1d1d28;
  --font-headline-lg: "Schibsted Grotesk";
  --font-headline-md: "Schibsted Grotesk";
  --font-headline-sm: "Schibsted Grotesk";
  --font-headline-xs: "Noto Sans";
  --font-body-md: "Noto Sans";
  --text-headline-lg: 76px;
  --text-headline-md: 48px;
  --text-headline-sm: 32px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.02em;
  --tracking-headline-md: -0.018em;
  --tracking-headline-sm: -0.01em;
  --font-weight-headline-lg: 800;
  --font-weight-headline-md: 800;
  --font-weight-headline-sm: 800;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 25.5px;
  --radius-full: 9999px;
  --spacing-xs: 2px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 128px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.114,
                    0.114,
                    0.157
                ],
                "hex": "#1d1d28"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.153,
                    0.682,
                    0.376
                ],
                "hex": "#27ae60"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "brand-karimun-blue": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.106,
                    0.592,
                    0.961
                ],
                "hex": "#1b97f5"
            }
        },
        "brand-wasurenagusa-blue": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.525,
                    0.753,
                    0.925
                ],
                "hex": "#86c0ec"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.114,
                    0.114,
                    0.157
                ],
                "hex": "#1d1d28"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 128,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 25.5,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Schibsted Grotesk",
                "fontSize": {
                    "value": 76,
                    "unit": "px"
                },
                "fontWeight": 800,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Schibsted Grotesk",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 800,
                "letterSpacing": {
                    "value": -0.018,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Schibsted Grotesk",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 800,
                "letterSpacing": {
                    "value": -0.01,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Noto Sans",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Noto Sans",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

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

More like this

Browse Creative →
geardex.app
GearDex Creative
GearDex
wpsubscription.co
WP Subscription Ecommerce
WP Subscription
thedrive.ai
The Drive AI AI
The Drive AI
webflow.com
Webflow Design Tools
Webflow