DESIGN.md · Free

Nitip design system

Digital marketing agency website: a light grey page, black type, black pill buttons and square cards, with no colour accent in the design.

The style

Nitip is a website template for digital marketing agencies: services, projects, a team, careers, a blog and a contact form. It should feel confident and editorial: big headings, thin dividers and plenty of space between sections, with photos doing most of the colour work.

The look is built from very few parts. The page is Canvas (#F6F6F6); type, buttons and dark cards are Ink (#101010), with Muted (#818181) for secondary text and 1px Line (#D9D9D9) dividers between rows and under section titles. Buttons, the menu and dots are pills; cards, images, fields and the Switch are square. Light cards are Ink at 5% (surface), dark cards and chart bars are solid Ink with White text. Accent (#FC5000) ships as a token for your own additions; the design itself does not use it.

Everything is set in Inter: headings and labels at weight 500, body text at 400; buttons and the menu are uppercase with a little letter spacing. Motion is lively but short: springs of 0.4 s (spring-button has a small bounce), menu labels that roll up on hover, arrows that turn 45°, images that zoom on card hover, a custom dot cursor that changes into labels such as "VIEW PROJECT", parallax bands and a ticker.

Colours

Ink#101010ink · primary · on-surfaceText, buttons, dark surfaces.
Canvas#F6F6F6canvas · neutralPage background.
Line#D9D9D9line · outlineDividers, menu hover.
Muted#818181muted · on-surface-variantSecondary text (project year).
Brand accent, for your own additions#FC5000accentThe design itself does not use it.
Star#FDCA49starRating stars.
Danger#FF2244danger · errorForm error label; 15% as its fill.
Fieldrgba(16, 16, 16, 0.03)fieldForm field fill.
White#FFFFFFwhite · on-primary
Surfacergba(16, 16, 16, 0.05)surfaceLight cards: recent-projects summary, fact card.
Overlayrgba(16, 16, 16, 0.5)overlayDark cover over the testimonial photo.

Typography · Inter

h01
72px · 500 · 1.1Nitip
h02
64px · 500 · 1.2Nitip
h2
42px · 500 · 1.2Nitip
h3
36px · 500 · 1.2Nitip
h4
28px · 500 · 1.2Nitip
h5
24px · 500 · 1.2Nitip
h6
20px · 500 · 1.2Build a site that feels designed
huge-paragraph
32px · 500 · 1.2Nitip
large-paragraph
18px · 400 · 1.4Build a site that feels designed
paragraph
16px · 400 · 1.4Build a site that feels designed
small-paragraph
14px · 400 · 1.2Build a site that feels designed
button
14px · 500 · 1.4 · 0.02emBuild a site that feels designed
menu
13px · 500 · 14px · 0.03emBuild a site that feels designed
big-footer
76px · 400 · 1.1Nitip

Corners

pill · 9999px

Spacing

gutter · 40px
gutter-phone · 20px
gutter-tablet · 30px
section-padding · 100px
section-padding-phone · 60px
section-padding-tablet · 80px
section-gap · 100px
section-gap-phone · 60px
section-gap-tablet · 80px
page-title-top · 50px
content-max · 1728px
header-height · 90px
header-height-phone · 60px
header-height-tablet · 82px

Parts

Get startedGet startedGet started

Nitip

A card in its own colours and corners.

Drawn from the file’s component tokens.

Do's and don'ts

use Ink for every filled button, active state and dark card, with White text on it.
keep the page Canvas and separate rows and section titles with 1px Line dividers.
make buttons, menu items and dots pills, and keep cards, images and fields square.
set headings and labels at weight 500 and body text at 400; set button and menu in uppercase.
use Muted for secondary text such as a project's year, form placeholders and the hamburger lines.
animate hovers with spring-button and opening and closing with spring-soft; arrows turn 45° on hover.
zoom images inside their frame on card hover (105% for projects, 110% for posts, 400 ms ease-framer).

use Accent in the demo design; it is reserved for your own additions.
add shadows other than button-hover and cursor.
use Danger for anything but a form error.
change a Primary Button's colours on hover; it gains a shadow and its arrow turns instead.
mix fonts: Inter is the only family.

Get Nitip

Nitip

Free

Digital marketing agency template

Framer
Next.js
Astro
HTML
Figma
AI prompt

12 pages

This file describes Nitip’s style. The template is the whole site: every page, its content and its motion, free to remix in Framer, with code editions for selected plans.

Remix free in Framer Live preview Every edition

---
version: "alpha"
name: "Nitip"
description: "Digital marketing agency website: a light grey page, black type, black pill buttons and square cards, with no colour accent in the design."
colors:
  ink: "#101010"
  canvas: "#F6F6F6"
  line: "#D9D9D9"
  muted: "#818181"
  accent: "#FC5000"
  star: "#FDCA49"
  danger: "#FF2244"
  field: "rgba(16, 16, 16, 0.03)"
  white: "#FFFFFF"
  surface: "rgba(16, 16, 16, 0.05)"
  overlay: "rgba(16, 16, 16, 0.5)"
  primary: "{colors.ink}"
  on-primary: "{colors.white}"
  neutral: "{colors.canvas}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.muted}"
  outline: "{colors.line}"
  error: "{colors.danger}"
typography:
  h01:
    fontFamily: "Inter"
    fontSize: "72px"
    fontWeight: 500
    lineHeight: 1.1
  h02:
    fontFamily: "Inter"
    fontSize: "64px"
    fontWeight: 500
    lineHeight: 1.2
  h2:
    fontFamily: "Inter"
    fontSize: "42px"
    fontWeight: 500
    lineHeight: 1.2
  h3:
    fontFamily: "Inter"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: 1.2
  h4:
    fontFamily: "Inter"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.2
  h5:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.2
  h6:
    fontFamily: "Inter"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.2
  huge-paragraph:
    fontFamily: "Inter"
    fontSize: "32px"
    fontWeight: 500
    lineHeight: 1.2
  large-paragraph:
    fontFamily: "Inter"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.4
  paragraph:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
  small-paragraph:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.2
  button:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "0.02em"
  menu:
    fontFamily: "Inter"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "14px"
    letterSpacing: "0.03em"
  big-footer:
    fontFamily: "Inter"
    fontSize: "76px"
    fontWeight: 400
    lineHeight: 1.1
rounded:
  pill: "9999px"
spacing:
  gutter: "40px"
  gutter-phone: "20px"
  gutter-tablet: "30px"
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  section-gap: "100px"
  section-gap-phone: "60px"
  section-gap-tablet: "80px"
  page-title-top: "50px"
  content-max: "1728px"
  header-height: "90px"
  header-height-phone: "60px"
  header-height-tablet: "82px"
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 18px"
  button-secondary:
    textColor: "{colors.ink}"
    typography: "{typography.button}"
  navigation:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.pill}"
    padding: "6px"
  menu-item:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
    rounded: "{rounded.pill}"
    padding: "8px 14px"
  menu-item-hover:
    backgroundColor: "{colors.line}"
  menu-item-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
  switch-button:
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    padding: "8px 14px"
  switch-button-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
  load-more:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    width: "150px"
    height: "40px"
  section-label-dot:
    backgroundColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    size: "16px"
  social-row:
    textColor: "{colors.ink}"
    typography: "{typography.paragraph}"
    padding: "8px 0px"
  social-row-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
  fact-card-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    padding: "20px"
  chart-bar:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.h3}"
    padding: "20px"
  testimonial-box:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    padding: "50px"
  input-field:
    textColor: "{colors.ink}"
    padding: "12px"
    height: "40px"
  input-field-focus:
    backgroundColor: "{colors.white}"
  checkbox-checked:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    size: "16px"
  submit-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    height: "40px"
---

# Nitip Design System

> The design tokens and style rules of **Nitip**, a website template by Marcframe (live Framer site: https://nitip.framer.website). Read it before you build or change a page so new work matches the template. The front matter holds the exact values; the sections below say where and how to use them. Format: [DESIGN.md](https://github.com/google-labs-code/design.md), spec version `alpha`.

## Overview

Nitip is a website template for digital marketing agencies: services, projects, a team, careers, a blog and a contact form. It should feel confident and editorial: big headings, thin dividers and plenty of space between sections, with photos doing most of the colour work.

The look is built from very few parts. The page is Canvas (#F6F6F6); type, buttons and dark cards are Ink (#101010), with Muted (#818181) for secondary text and 1px Line (#D9D9D9) dividers between rows and under section titles. Buttons, the menu and dots are pills; cards, images, fields and the Switch are square. Light cards are Ink at 5% (`surface`), dark cards and chart bars are solid Ink with White text. Accent (#FC5000) ships as a token for your own additions; the design itself does not use it.

Everything is set in Inter: headings and labels at weight 500, body text at 400; buttons and the menu are uppercase with a little letter spacing. Motion is lively but short: springs of 0.4 s (`spring-button` has a small bounce), menu labels that roll up on hover, arrows that turn 45°, images that zoom on card hover, a custom dot cursor that changes into labels such as "VIEW PROJECT", parallax bands and a ticker.

## Colors

- **Ink (#101010)** — `ink`, `primary`, `on-surface`. Text, buttons, dark surfaces.
- **Canvas (#F6F6F6)** — `canvas`, `neutral`. Page background.
- **Line (#D9D9D9)** — `line`, `outline`. Dividers, menu hover.
- **Muted (#818181)** — `muted`, `on-surface-variant`. Secondary text (project year).
- **Brand accent, for your own additions (#FC5000)** — `accent`. The design itself does not use it.
- **Star (#FDCA49)** — `star`. Rating stars.
- **Danger (#FF2244)** — `danger`, `error`. Form error label; 15% as its fill.
- **Field (rgba(16, 16, 16, 0.03))** — `field`. Form field fill.
- **White (#FFFFFF)** — `white`, `on-primary`.
- **Surface (rgba(16, 16, 16, 0.05))** — `surface`. Light cards: recent-projects summary, fact card.
- **Overlay (rgba(16, 16, 16, 0.5))** — `overlay`. Dark cover over the testimonial photo.
- **Gradient `cover`:** `linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(16,16,16,0.05) 49.66%, rgba(16,16,16,0.5) 100%)`. Bottom shade behind text on images (About cover image).

Semantic names in the front matter point at these colours: `primary` → `ink`, `on-primary` → `white`, `neutral` → `canvas`, `on-surface` → `ink`, `on-surface-variant` → `muted`, `outline` → `line`, `error` → `danger`.

## Typography

**Inter, sans-serif.**

Font sizes change at the breakpoints (phone / tablet from 810px / desktop from 1200px); the front matter gives the desktop size. Line height is a multiple of the font size.

| Token | Size (phone / tablet / desktop) | Line height | Weight | Letter spacing | Use |
|---|---|---|---|---|---|
| `h01` | 46px / 58px / 72px | 1.1 | 500 | — |  |
| `h02` | 44px / 52px / 64px | 1.2 | 500 | — |  |
| `h2` | 32px / 36px / 42px | 1.2 | 500 | — |  |
| `h3` | 28px / 32px / 36px | 1.2 | 500 | — |  |
| `h4` | 24px / 26px / 28px | 1.2 | 500 | — |  |
| `h5` | 20px / 22px / 24px | 1.2 | 500 | — |  |
| `h6` | 18px / 19px / 20px | 1.2 | 500 | — |  |
| `huge-paragraph` | 24px / 28px / 32px | 1.2 | 500 | — |  |
| `large-paragraph` | 18px | 1.4 | 400 | — |  |
| `paragraph` | 16px | 1.4 | 400 | — |  |
| `small-paragraph` | 14px | 1.2 | 400 | — |  |
| `button` | 14px | 1.4 | 500 | 0.02em, uppercase |  |
| `menu` | 13px | 14px | 500 | 0.03em, uppercase |  |
| `big-footer` | 37px / 76px / 76px | 1.1 | 400 | — |  |

## Layout

Three layouts: phone below 810px, tablet from 810px, desktop from 1200px. Spacing tokens without a suffix are the desktop values; `-tablet` and `-phone` give the smaller screens where they differ.

| Token | Phone / tablet / desktop | Use |
|---|---|---|
| `gutter` | 20px / 30px / 40px | Page side padding |
| `section-padding` | 60px / 80px / 100px | Section top and bottom padding |
| `section-gap` | 60px / 80px / 100px | Between a section header and its content |
| `page-title-top` | 50px | Top padding of hero / page-title sections |
| `content-max` | 1728px | Maximum content width |
| `header-height` | 60px / 82px / 90px | Height of the header bar, and of the spacer under the fixed header |

Every section is centred, at most `content-max` wide inside the `gutter` on each side, and padded top and bottom by `section-padding`; a section header (title, divider, lead) sits `section-gap` above its content, and page-title sections start only `page-title-top` below the header. Project and post grids are one column on phones, two on tablets and two (projects) or three (posts) on desktops, 30px apart across and 50px apart down. List rows (services, careers, values, project list) are stacked on 1px Line dividers with no gap between them. The recent-projects row is 10px (tablet) or 20px (desktop) between cards.

## Elevation & Depth

Nitip is almost flat. Only two shadows exist: `button-hover` fades in under a Primary Button on hover, and `cursor` sits under the custom dot cursor. Everywhere else depth comes from fills: Ink 5% light cards on the Canvas page, solid Ink cards and chart bars, the White navigation pill and testimonial box, the `cover` gradient behind text on images and the 50% Ink `overlay` on the testimonial photo.

- **`button-hover`:** `box-shadow: 3px 3px 3px 0px rgba(5,5,5,0.05), 0px 0px 20px 0px rgba(5,5,5,0.05), 0px 4px 4px 0px rgba(5,5,5,0.03), 0px 6px 6px 0px rgba(5,5,5,0.05), 0px 10px 10px 0px rgba(5,5,5,0.1)`.
- **`cursor`:** `box-shadow: 2px 2px 20px 5px rgba(16,16,16,0.03), 2px 2px 20px 5px rgba(16,16,16,0.05)`.

## Shapes

Buttons, menu items, the navigation bar and dots are fully round pills; cards, images, fields, the Switch and Load More have square corners.

- **`pill` (9999px):** Buttons, menu, dots.

## Motion

Reduced motion: parallax images, scroll transforms and the ticker stand still.

- **`spring-button`** — spring (duration 0.4 s, bounce 0.2). Buttons, links, icons, chart bars.
- **`spring-soft`** — spring (duration 0.4 s, bounce 0). Accordions, recent projects, header, menu background.
- **`spring-slide`** — spring (stiffness 200, damping 40, mass 1). Slideshow slide change.
- **`spring-cursor`** — spring (stiffness 500, damping 60, mass 1). Cursor shape changes.
- **`ease-framer`** — `cubic-bezier(0.12, 0.23, 0.5, 1)`. Image zoom on card hover, 400ms.
- **`ticker`** — speed 30px/s, direction left.
- **`parallax`** — speed 50, offset 50, imageScale 1.2. Default (About page band): the image moves at 1 − speed/100 of the scroll and is at least imageScale × its frame, tall enough never to show a gap. Project pages use speed 80 (phone 95), offset 0, scale 1. Details under Parallax Image.
- **`scroll-transform`** — trigger in view, easing linear, clamped true. Progress 0 when the frame top reaches the viewport bottom, 1 when its bottom does; transforms interpolate from their start values to rest.

## Components

Component tokens below use the exact values of the template. Variants with a suffix (`-hover`, `-pressed`, `-focus`, `-open`) only list what changes.

- **`button-primary`** (Primary Button (Default / No Icon)). The Ink pill link. The Default look adds a 14px arrow-up-right 5px after the label; No Icon leaves it out. Hover (`spring-button`): the `button-hover` shadow fades in and the arrow rotates 45°; the colours never change.
- **`button-secondary`** (Secondary Button). A text link with a 14px arrow-down-right 5px after the label and 2px bottom padding. Hover (`spring-button`): a 1px Ink underline grows from left to right and the arrow rotates −45°.
- **`navigation`** (Navigation). The White pill bar holding one Menu item per page, 10px apart.
- **`menu-item`** (Menu (Default / Hover / Active)). A page link in the navigation pill. Hover: the label slides up and an identical copy slides in from below.
- **`menu-item-hover`** (Menu (Default / Hover / Active)). Hover on an inactive item: the fill fades to Line (`spring-soft`).
- **`menu-item-active`** (Menu (Default / Hover / Active)). The current page (or its parent for detail pages); no hover.
- **`switch-button`** (Switch Button (Default / Active) and Switch). A square toggle with a 1px outline drawn inside; transparent at rest, 50% opacity on hover. Used for the Grid / List switch of the project gallery.
- **`switch-button-active`** (Switch Button (Default / Active) and Switch). The active option; no hover.
- **`load-more`** (Load More). A square Ink button under the blog grid and the careers list; no hover state, hidden once everything is shown.
- **`section-label-dot`** (Section Label). The eyebrow above a section: a solid and an outlined 16px dot, then the label in `button`, 5px apart; the order of the dots flips on dark backgrounds.
- **`social-row`** (Social Media). A full-width footer row with a bottom divider: label left, 14px arrow right.
- **`social-row-hover`** (Social Media). Hover (`spring-button`): the row fills Ink, text and arrow turn White, side padding grows to 4px and the arrow rotates −45°.
- **`fact-card-dark`** (Fact Number). Statement in `h5` at the top, value in `h02` at the bottom. The light version uses `surface` (Ink 5%) with Ink text. Ring cursor.
- **`chart-bar`** (Chart). One of five Ink bars: value in `h3`, a 50% divider, label in `paragraph` at the bottom; height and opacity show the value and grow into place when half the chart is in view.
- **`testimonial-box`** (Testimonial slideshow). The White box around the testimonial slides (padding 20 / 30 / 50); quotes in `h5`, two Slideshow arrows at the bottom right.
- **`input-field`** (Form Field). Fill `field` (Ink 3%) with a 1px Line border drawn inside, 16px text at line height 1.2, a Muted placeholder; the label (`paragraph`) sits 10px above. The message field is 200px tall.
- **`input-field-focus`** (Form Field). Focus is instant: a White fill and a 50% Ink border, no outline ring.
- **`checkbox-checked`** (Checkbox Group). A checked 16px square with a White tick; unchecked it is Ink 5% with a 1px Line border inside.
- **`submit-button`** (Submit Button (Framer "Form")). A form's full-width Send button. Hover: rgba(51, 51, 51, 0.85); pressed: #333 (0.2 s ease-in-out). While sending, a 20px White spinner turns once a second; after a send it reads "Thank you", after a failed send "Something went wrong" in Danger on a 15% Danger fill.

Other components of the template, described in its spec: Cursor (Figma "Cursor"), Big Button, Text link (Framer link preset), Slideshow arrow, Logo (Black / White), Hamburger (Default / Close), Breadcrumbs, Section, Title Section (section header), Page Title, Divider, Project With Details, Project With Details — list (Desktop / Tablet / Phone List), Project Simple Card (Open / Close), Post Card, Testimonial, Text Point, Highlight list, Pricing, Team, Cover Image, Parallax Image, Scroll Transform, User Rating, Avatar group, Form, Accordion row (Service / Careers), Service list, Careers list, Value list, Recent projects list, Project gallery (Grid / List), Post grid, Rich text, Ticker, Big Footer.

## Do's and Don'ts

- Do use Ink for every filled button, active state and dark card, with White text on it.
- Do keep the page Canvas and separate rows and section titles with 1px Line dividers.
- Do make buttons, menu items and dots pills, and keep cards, images and fields square.
- Do set headings and labels at weight 500 and body text at 400; set `button` and `menu` in uppercase.
- Do use Muted for secondary text such as a project's year, form placeholders and the hamburger lines.
- Do animate hovers with `spring-button` and opening and closing with `spring-soft`; arrows turn 45° on hover.
- Do zoom images inside their frame on card hover (105% for projects, 110% for posts, 400 ms `ease-framer`).
- Don't use Accent in the demo design; it is reserved for your own additions.
- Don't add shadows other than `button-hover` and `cursor`.
- Don't use Danger for anything but a form error.
- Don't change a Primary Button's colours on hover; it gains a shadow and its arrow turns instead.
- Don't mix fonts: Inter is the only family.

## Source

Every value here was measured from the published Nitip template (https://nitip.framer.website); when this file and the live site disagree, the site is right.

Demo photos (Unsplash) are placeholders and not part of the design system.

Use it with your agent

Save it as DESIGN.md at your project’s root.
Ask Claude Code, Cursor, v0 or Lovable to follow it for every page and component it builds.
Or let the agent fetch it: the Framebrick MCP server’s get_design_md tool with { "slug": "nitip" }, or the raw file at framebrick.co/templates/nitip/design.md.

Connect the MCP server

Be the first to know

One short email when we release a template or a free component. No spam — unsubscribe anytime.

We use your email only for Framebrick updates. Privacy policy

The style

Colours

Typography · Inter

Corners

Spacing

Parts

Do's and don'ts

Get Nitip

Nitip

Get new templates and components first