---
version: "alpha"
name: "Marai Neesu"
description: "Personal portfolio website: a light grey page, faint grey cards, near-black type and pill buttons, with an orange Accent for hovers."
colors:
  black: "#050505"
  grey: "#9FA0A3"
  accent: "#FC5000"
  background: "#F6F6F6"
  white: "#FFFFFF"
  available: "#1FB514"
  error: "#FF2244"
  primary: "{colors.black}"
  on-primary: "{colors.background}"
  secondary: "{colors.accent}"
  on-secondary: "{colors.background}"
  neutral: "{colors.background}"
  on-surface: "{colors.black}"
  outline: "{colors.grey}"
typography:
  display-1:
    fontFamily: "Manrope"
    fontSize: "64px"
    fontWeight: 400
    lineHeight: 1.2
  display-2:
    fontFamily: "Manrope"
    fontSize: "42px"
    fontWeight: 400
    lineHeight: 1.2
  h1:
    fontFamily: "Manrope"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.2
  h2:
    fontFamily: "Manrope"
    fontSize: "26px"
    fontWeight: 500
    lineHeight: 1.2
  h3:
    fontFamily: "Manrope"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.2
  h4:
    fontFamily: "Manrope"
    fontSize: "22px"
    fontWeight: 500
    lineHeight: 1.2
  h5:
    fontFamily: "Manrope"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.2
  h6:
    fontFamily: "Manrope"
    fontSize: "18px"
    fontWeight: 500
    lineHeight: 1.2
  h6-small:
    fontFamily: "Manrope"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.2
  big:
    fontFamily: "Manrope"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.4
  paragraph:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
  small:
    fontFamily: "Manrope"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.2
  tiny:
    fontFamily: "Manrope"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.2
  menu:
    fontFamily: "Manrope"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "0.03em"
  button:
    fontFamily: "Manrope"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: 1.1
  field:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.1
rounded:
  card: "10px"
  soft: "8px"
  control: "4px"
  tile: "2px"
  round: "9999px"
spacing:
  gutter: "40px"
  gutter-phone: "20px"
  gutter-tablet: "30px"
  section-padding: "50px"
  section-padding-phone: "40px"
  section-gap: "50px"
  content-max: "1200px"
  header: "92px"
  header-phone: "74px"
  header-tablet: "84px"
  footer-top: "100px"
  footer-top-phone: "60px"
  footer-top-tablet: "80px"
  divider: "21px"
components:
  button-primary:
    backgroundColor: "{colors.black}"
    textColor: "{colors.background}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    padding: "8px 16px"
    height: "36px"
  button-outline:
    textColor: "{colors.black}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    padding: "8px 16px"
    height: "36px"
  button-outline-hover:
    backgroundColor: "{colors.black}"
    textColor: "{colors.background}"
  button-accent:
    textColor: "{colors.accent}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    padding: "8px 16px"
    height: "36px"
  text-link:
    textColor: "{colors.black}"
    typography: "{typography.button}"
  menu-link:
    textColor: "{colors.black}"
    typography: "{typography.menu}"
    padding: "10px 16px"
  menu-link-current:
    backgroundColor: "{colors.black}"
    textColor: "{colors.background}"
    rounded: "{rounded.round}"
  product-button:
    backgroundColor: "{colors.black}"
    textColor: "{colors.background}"
    typography: "{typography.button}"
    rounded: "{rounded.control}"
    padding: "8px 16px"
    height: "32px"
  product-button-hover:
    backgroundColor: "{colors.accent}"
  product-button-secondary:
    textColor: "{colors.black}"
    typography: "{typography.button}"
    rounded: "{rounded.control}"
    padding: "8px 16px"
    height: "32px"
  go-back:
    backgroundColor: "{colors.black}"
    textColor: "{colors.background}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    padding: "8px 16px"
    height: "36px"
  card:
    textColor: "{colors.black}"
    rounded: "{rounded.card}"
    padding: "20px"
  status-chip:
    textColor: "{colors.black}"
    typography: "{typography.small}"
    rounded: "{rounded.round}"
    padding: "2px 8px"
  accordion-mark:
    textColor: "{colors.black}"
    rounded: "{rounded.tile}"
    size: "24px"
  accordion-mark-open:
    backgroundColor: "{colors.black}"
    textColor: "{colors.background}"
  input-field:
    textColor: "{colors.black}"
    typography: "{typography.field}"
    rounded: "{rounded.control}"
    padding: "12px"
    height: "40px"
  submit-button:
    backgroundColor: "{colors.black}"
    textColor: "{colors.background}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    padding: "10px 16px"
    height: "33px"
  submit-button-hover:
    backgroundColor: "{colors.accent}"
---

# Marai Neesu Design System

> The design tokens and style rules of **Marai Neesu**, a website template by Marcframe (live Framer site: https://neesu.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

Marai Neesu is a website template for a personal portfolio: a designer or creator with projects, services, a course, a CV, digital products, a blog and a contact form. It should feel quiet, personal and tidy: small type, plenty of light grey space, and one warm colour that only wakes up under the pointer.

The look is built from very few parts. The page is a light grey Background (#F6F6F6); text, filled buttons and pills are Black (#050505), and every lighter shade is that same Black at an opacity: cards are Black 03 with a Black 05 hairline and 10px corners, descriptions are Black 80, meta lines Black 60, dividers Black 10. Labels on Black are Background, not White. One accent, Accent (#FC5000), is the hover colour of links, card titles and buttons; at rest it appears only as the Accent button (a 3% tint), the testimonial stars and the e-mail's second copy.

Everything is set in Manrope: weight 400 for the displays, paragraphs and field text, 500 for headings, labels, the menu and buttons; button labels are small upper case. Motion is small and springy: hovers use a 0.4 s spring with a slight overshoot, arrows turn 45°, and underlines grow from the left. Nothing animates on load, on scroll or between pages.

## Colors

- **Black (#050505)** — `black`, `primary`, `on-surface`. Text, the filled buttons and pills, the current menu link. Translucent: Black 80 (descriptions, leads), Black 60 (meta, placeholders, a focused field's hairline, the 404 eyebrow), Black 30 (the post cover's veil, the lesson rule), Black 10 (dividers, field hairlines), Black 05 (card hairlines, field fills), Black 03 (card surfaces, tiles).
- **Grey (#9FA0A3)** — `grey`, `outline`. The logo's place, the hamburger lines, the hairline of a Secondary product button, the hero's roles.
- **Accent (#FC5000)** — `accent`, `secondary`. Every hover colour (links, card titles, buttons), the e-mail's second copy, the testimonial stars, the Accent button (at 3% fill and 5% hairline).
- **Background (#F6F6F6)** — `background`, `on-primary`, `on-secondary`, `neutral`. The page, the header bar and the footer; the labels on Black buttons.
- **White (#FFFFFF)** — `white`. Text over the post cover, the tick of a checkbox, the sending ring. White 50 is the frosted pills of the header (with a 10px background blur).
- **Available (#1FB514)** — `available`. The CV's "Available for work" dot (a value of its own, not a named style).
- **Error (#FF2244)** — `error`. Used at 15% as the Submit button's fill after a failed send (a value of its own, not a named style).

Semantic names in the front matter point at these colours: `primary` → `black`, `on-primary` → `background`, `secondary` → `accent`, `on-secondary` → `background`, `neutral` → `background`, `on-surface` → `black`, `outline` → `grey`.

## Typography

**Manrope, sans-serif.** Manrope from Google Fonts, one variable font: weight 400 for the displays, paragraphs and field text, 500 for headings, labels, the menu and buttons, 700 for bold runs in rich text.

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 |
|---|---|---|---|---|---|
| `display-1` | 38px / 52px / 64px | 1.2 | 400 | — | Display 01 — the Home hero's title |
| `display-2` | 24px / 36px / 42px | 1.2 | 400 | — | Display 02 — a post's title, the 404 title |
| `h1` | 24px / 26px / 28px | 1.2 | 500 | — | Heading 1 — inner page titles (the page's h1), a product's name, the footer's call to action |
| `h2` | 22px / 24px / 26px | 1.2 | 500 | — | Heading 2 — section titles, a product's Overview |
| `h3` | 20px / 22px / 24px | 1.2 | 500 | — | Heading 3 — the newsletter's title, a post's headings, the course's block titles |
| `h4` | 20px / 21px / 22px | 1.2 | 500 | — | Heading 4 — the footer's links, the course banner's title, the CV's block titles |
| `h5` | 18px / 19px / 20px | 1.2 | 500 | — | Heading 5 — product and service card titles, accordion titles, an overview's headings, experience titles |
| `h6` | 16px / 17px / 18px | 1.2 | 500 | — | Heading 6 — post and project card titles, a product's tagline, prices, the footer's column titles |
| `h6-small` | 14px | 1.2 | 500 | — | Heading 6 Small — the logo's name, the post cover's labels, the CV's subtitles |
| `big` | 18px | 1.4 | 400 | — | Big Paragraph — a post's body, the post cover's values, testimonial names, the 404 eyebrow |
| `paragraph` | 16px | 1.4 | 400 | — | Medium Paragraph — leads, descriptions, rich text, form labels, breadcrumbs |
| `small` | 14px | 1.2 | 400 | — | Small Paragraph — card meta, chips, roles |
| `tiny` | 12px | 1.2 | 400 | — | Tiny Paragraph — the logo's place |
| `menu` | 13px | 1.2 | 500 | 0.03em | Menu — the header's links |
| `button` | 12px | 1.1 | 500 | —, uppercase | Button — button labels and the arrow links (upper case through the style; the copy stays in mixed case) |
| `field` | 16px | 1.1 | 400 | — | The text typed into a form field (the newsletter's input: 15px, line height 1.4) |

## 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 | Side padding of every section, the header and the footer |
| `section-padding` | 40px / 50px / 50px | Vertical padding of a section (the 404 has 60 / 80 / 100) |
| `section-gap` | 50px | Gap between the blocks of a section, unless the section says otherwise |
| `content-max` | 1200px | Widest content, centred inside the gutters (1120 at the 1200 breakpoint) |
| `header` | 74px / 84px / 92px | Height of the fixed header bar and of the spacer that starts every page under it |
| `footer-top` | 60px / 80px / 100px | Space above the footer (outside it); the footer's own padding repeats it on top, 30 below |
| `divider` | 21px | A divider: a 1px Black 10 line with 10 above and below |

Every section is centred, at most `content-max` wide inside the `gutter` on each side, and padded top and bottom by `section-padding`; the blocks inside a section are `section-gap` apart unless the section sets its own. A section title block puts the title and, 10 below, the lead (at most 550 wide); its button sits 20 under it on phones and at the right of the same row from tablets up. Cards in a grid are 20px apart both ways: one column on phones, two on tablets, two or three on desktops. Sections are separated by a `divider`, a 1px Black 10 line with 10 above and below.

## Elevation & Depth

Marai Neesu is almost flat. Cards are a fill, not a shadow: Black 03 with a Black 05 hairline on the Background page. Most shadows come only on hover: `lift` under a Primary button, `card` under a post card, `service` under a service card. Two are always on: Go Back, the pill floating over the project, product and post pages, wears `lift`, and the Accent button carries the inner `glow` (`glow-lift` on hover). The header pills are White 50 with a 10px background blur.

- **`lift`:** `box-shadow: 3px 3px 3px rgba(5,5,5,0.05), 0 0 20px rgba(5,5,5,0.05), 0 4px 4px rgba(5,5,5,0.03), 0 6px 6px rgba(5,5,5,0.05), 0 10px 10px rgba(5,5,5,0.1)`. A Primary button on hover; Go Back always.
- **`glow`:** `box-shadow: inset 3px 3px 3px rgba(252,80,0,0.05), inset 0 2px 20px rgba(252,80,0,0.05)`. The Accent button at rest.
- **`glow-lift`:** `box-shadow: inset 3px 3px 3px rgba(252,80,0,0.05), inset 0 2px 20px rgba(252,80,0,0.05), 0 4px 4px rgba(252,80,0,0.03), 0 6px 6px rgba(252,80,0,0.05)`. The Accent button on hover.
- **`card`:** `box-shadow: 4px 4px 10px 0 rgba(5,5,5,0.05)`. A post card on hover.
- **`service`:** `box-shadow: 4px 4px 10px 4px rgba(5,5,5,0.05)`. A service card on hover.

## Shapes

Buttons, pills, the Submit button, avatars and dots are fully round; cards have 10px corners, smaller inner cards 8px, product buttons and form fields 4px, and the small icon boxes 2px.

- **`card` (10px):** The card surface, card images, product pictures, the post cover, the newsletter box and photo.
- **`soft` (8px):** Testimonial, experience, stack and accordion cards, the course banner's image.
- **`control` (4px):** Product buttons, form fields, checkboxes, the stack logos.
- **`tile` (2px):** Social tiles, the accordion and module icon boxes.
- **`round` (9999px):** Buttons and pills, the Submit button, avatars, dots, the slideshow arrows.

## Motion

Measured on the live site (2026-10-12) with real input. There are no load, scroll or page change animations.

Reduced motion: moves, rotations, growth and scaling happen at once while fades and colour changes still animate; the tickers and the spinners stand still, and the two slideshows keep going with each step happening at once.

- **`s1`** — spring (duration 0.4 s, bounce 0.2). S1 — nearly every hover and state change: buttons, links and their underlines, the menu links, the logo, the social tiles, the product buttons, the post card, Go Back, the hamburger lines, the course modules (half way at about 55 ms, overshoots about 1.5% at 250 ms, settled by 0.5 s).
- **`s2`** — spring (duration 0.4 s, bounce 0). S2 — the header's scroll look and the phone menu's height, the project, product and service cards, the accordion rows (no overshoot).
- **`s3`** — spring (duration 0.5 s, bounce 0). S3 — the e-mail roll.
- **`slide`** — spring (stiffness 200, damping 40, mass 1). SL — the slideshows (the hero's roles, the testimonials on phones): over-damped, settled in about 0.8 s; a step every 4 s.
- **`ease-form`** — `cubic-bezier(0.44, 0, 0.56, 1)`. The Submit button's colour changes (0.2 s) and the spinners' fade (0.3 s).
- **`spin`** — duration 1s, easing linear, iterations infinite. The sending ring: one turn a second.
- **`ticker`** — testimonials 10 (To the left, gap 15); clients 20 (To the left, gap 20); servicePhotos 5 (Up and down under the pointer (tablets and desktops), to the left always (phones), gap 10). Ticker speeds in px per second, linear and endless; they stand still with reduced motion.
- **`underline-out`** — duration 0. A link's underline disappears at once when the pointer leaves.

## 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`** (Button/Primary (Primary / Outline / Accent)). The Black pill with a 14px arrow-up-right 5 after the label, which stays on one line. Hover (S1): the `lift` shadow and the arrow turns 45°; the colours stay.
- **`button-outline`** (Button/Primary (Primary / Outline / Accent)). The Outline pill: a Black 03 fill, a Black 05 hairline, a Black label and no icon ("Email Me", "All my works").
- **`button-outline-hover`** (Button/Primary (Primary / Outline / Accent)). Hover (S1): fill and hairline turn Black and the label Background, all animated.
- **`button-accent`** (Button/Primary (Primary / Outline / Accent)). The Accent pill ("Contact me"): Accent at 3% fill with an Accent 05 hairline, an Accent label and the inner `glow`, no icon. Hover (S1): `glow-lift` adds two soft Accent shadows.
- **`text-link`** (Button/Secondary (Default / Small)). A label and a 12px arrow-up-right with 2 of padding below (the Small look uses `small`, as written). Hover (S1): label and arrow turn Accent, the arrow turns 45° and a 1px line grows from the left under the whole link; the line is gone at once when the pointer leaves.
- **`menu-link`** (Button/Menu). A header link. Hover: the label turns Accent at once and a 1px Accent line grows from the left under the label.
- **`menu-link-current`** (Button/Menu). The current page's link: a Black pill with a Background label, no line and no hover.
- **`product-button`** (Button/Product (Primary / Secondary)). The square-cornered button of a product card: a Black hairline, a 16px arrow-up-right that turns 45° on hover, or only a 16px cart icon.
- **`product-button-hover`** (Button/Product (Primary / Secondary)). Hover (S1): fill and hairline turn Accent.
- **`product-button-secondary`** (Button/Product (Primary / Secondary)). A clear fill with a Grey hairline ("View Details"). Hover (S1): fill and hairline turn Black, the label and icon Background.
- **`go-back`** (Go Back). Fixed and centred 20 above the bottom of the window on project, product and post pages, with a 14px arrow-left and always the `lift` shadow. Hover (S1): the fill turns Accent.
- **`card`** (Card/Project). The card surface: Black 03 with a Black 05 hairline, clipping its 4 : 3 image; title in `h6`, summary in `paragraph` Black 80, then the meta line in `small` Black 60. Hover (S2): the image grows to 105%, its bottom corners go square and the title turns Accent at once.
- **`status-chip`** (Subtitle (the status chip)). "Available for work" on a Black 03 pill, after an 8px dot in Available.
- **`accordion-mark`** (Card/Accordions (the FAQ)). The box at the right of a closed FAQ row: Black 03 with a Black 05 hairline and a Black plus. The row itself is Black 03 with 8px corners and padding 20.
- **`accordion-mark-open`** (Card/Accordions (the FAQ)). Open: a Black box with a Background minus (the colours animate with S2).
- **`input-field`** (Form field (Text / Text area)). A Black 05 fill with a 1px Black 10 hairline inside and a Black 60 placeholder; the label (`paragraph`, Black) sits 10 above. A text area is 200 tall. Focus is instant: the hairline turns Black 60, the fill stays.
- **`submit-button`** (Submit button). A form's Send button; it fills its column. Pressed: Black 80 (0.2 s, `ease-form`). While sending, a 20px White ring turns in place of the label; after a send it reads "Thank you", after a failed send "Something went wrong" in Black on Error at 15%.
- **`submit-button-hover`** (Submit button). Hover: an Accent fill with the Background label (0.2 s, `ease-form`).

Other components of the template, described in its spec: Button/Text (the e-mail roll), Footer link, Misc/Logo (Default / Simple), Icon, Hamburger (the phone menu button), Breadcrumbs, Misc/Social List, Section, Divider, Section title, Meta line, Card/Product, Card/Post, Card/Service, Card/Testimonial, Card/Course, Card/Module, Card/Experience, Card/Stack, Card/CV, Ticker, Slideshow, Collapse, Rich text, Checkbox group, Form, Time & Date, Current year.

## Do's and Don'ts

- Do use Black for the filled buttons, pills and the current menu link, with a Background label on them.
- Do make every lighter shade from Black at an opacity: Black 03 card surfaces, Black 05 hairlines, Black 80 descriptions and leads, Black 60 meta and placeholders, Black 10 dividers.
- Do use Accent as the hover colour of links, card titles and buttons; at rest only for the Accent button, the testimonial stars and the e-mail's second copy.
- Do set displays, paragraphs and field text at weight 400, and headings, labels, the menu and buttons at 500.
- Do make buttons, pills and the Submit button fully round; give cards 10px corners, smaller cards 8px, product buttons and fields 4px.
- Do keep cards flat at rest and add a shadow only on hover (`lift`, `card`, `service`), except Go Back, which always wears `lift`.
- Do animate hovers with `s1` (0.4 s, bounce 0.2) and the cards and accordion rows with `s2`; turn arrows 45° and grow underlines from the left.
- Don't add entrance, scroll or page change animations: nothing rises or fades into view.
- Don't put White labels on Black buttons; the label colour is Background.
- Don't use Accent as a section or card fill.
- Don't use Available for anything but the status dot, or Error for anything but a failed form send.
- Don't let a button label wrap.
- Don't mix fonts: Manrope is the only family.

## Source

Every value here was measured from the published Marai Neesu template (https://neesu.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; the Stack logos are trademarks of the tools they name.