DESIGN.md · Free

Semono design system

Corporate and business consulting website: a light grey page, white cards, black type and a single Lime accent.

The style

Semono is a website template for corporate and business consulting firms: services, a team, careers, client stories, a blog and a contact form. It should feel calm, precise and confident: professional rather than playful, with generous space between sections and dense, tidy cards inside them.

The look is built from very few parts. The page is a light grey Background (#F7F7F7); content sits on White cards with 5px corners; type is Black, with Soft Black for anything secondary. One accent, Lime (#E4FE00), carries every call to action and every small marker (label dots, chips, arrow circles, icon squares), always with Green (#0F3D3A) text or icons on it. Black cards, the footer and photos under a dark cover give the contrast.

Everything is set in Inter at weight 500 with tight letter spacing (-0.03em); headings use Inter's display optical size. Motion is soft and quick: springs of about 0.4 s, button labels that roll up on hover, and blocks and title words that rise into view once.

Colours

Black#000000ink · secondary · on-surfaceHeadings, text on cards, the Black buttons, the Black cards and the footer, the plus buttons.
Soft Black#616161soft · on-surface-variantLeads, descriptions, card meta, labels, list dots.
Grey#EBEBEBgrey · outlineHairlines, field borders, the page-title chip, the open accordion row's minus, the footer's links and note.
Lime#E4FE00lime · primaryThe accent: buttons, label dots, chips, tags, arrow circles, icon squares.
Green#0F3D3Agreen · on-primaryText and icons on Lime; the arrow circle's hover fill and the Submit button's.
Background#F7F7F7background · neutralThe page, the header bar once it turns light, form fields, the hero's lead and the texts over photos.
White#FFFFFFwhite · on-secondary · surfaceCards, white buttons, text over photos and on Black, a focused form field.
Red#FF0000red · errorThe asterisk of a required field and the error label of the Submit button.
Error fillrgba(255, 34, 68, 0.15)error-fillThe Submit button's fill after a failed send.
Black 50rgba(0, 0, 0, 0.5)ink-50The cover over the hero, photo band and 404 photos; the placeholder of form fields.
Black 25rgba(0, 0, 0, 0.25)ink-25The veil over a video poster; the border of a focused form field.
Transparentrgba(255, 255, 255, 0)white-0White at 0%: the header bar over the Home and 404 photos, a tab that is not chosen.

Typography · Inter

display
74px · 500 · 1.1 · -0.03emSemono
h1
54px · 500 · 1.1 · -0.03emSemono
h2
42px · 500 · 1.1 · -0.03emSemono
h3
36px · 500 · 1.1 · -0.03emSemono
h4
28px · 500 · 1.1 · -0.03emSemono
h5
24px · 500 · 1.1 · -0.03emSemono
h6
20px · 500 · 1.1 · -0.03emBuild a site that feels designed
big
18px · 500 · 1.2 · -0.03emBuild a site that feels designed
paragraph
16px · 500 · 1.2 · -0.03emBuild a site that feels designed
small
14px · 500 · 1.2 · -0.03emBuild a site that feels designed
menu
16px · 500 · 1.2 · -0.04emBuild a site that feels designed
button
15px · 500 · 1.2 · -0.04emBuild a site that feels designed
tiny
12px · 500 · 1.2 · -0.03emBuild a site that feels designed

Corners

base · 5px
chip · 3px
round · 9999px

Spacing

gutter · 30px
gutter-phone · 15px
gutter-tablet · 20px
section-padding · 100px
section-padding-phone · 60px
section-padding-tablet · 80px
section-gap · 80px
section-gap-phone · 50px
section-gap-tablet · 60px
content-max · 1400px
header · 82px
header-phone · 58px

Parts

Get startedGet startedGet startedContact us

chippage title chip

Semono

A card in its own colours and corners.

Semono

A card in its own colours and corners.

Drawn from the file’s component tokens.

Do's and don'ts

use Lime only as the accent (buttons, label dots, chips, tags, arrow circles, icon squares) and put Green text or icons on it.
set every text style at weight 500; only the text typed into a form field is 400.
set headings (display, h1–h6) at line height 1.1 with Inter's optical size 32, and every other style at optical size 14.
use Soft Black for leads, descriptions, meta and labels on light surfaces, and Black for titles.
give boxes (buttons, cards, photos, chips, fields) 5px corners; keep round shapes for dots, arrow circles, the plus-minus mark, portraits and the play button.
separate the parts of a card with a 3px gap, not a border or a shadow.
animate hovers and state changes with spring-a (0.4 s, no bounce), and let blocks and title words rise into view once.

add shadows, gradients or new colours; the palette above is the whole palette.
put White text on Lime.
use Red for anything but a required field's asterisk and a failed form send.
let a button label wrap, or change a button's colours on hover (the label rolls instead).
mix fonts: Inter is the only family.

Get Semono

Partner

Semono

Free

Corporate and business consulting template

Framer
Next.js
Astro
HTML
AI prompt

13 pages

This file describes Semono’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: "Semono"
description: "Corporate and business consulting website: a light grey page, white cards, black type and a single Lime accent."
colors:
  ink: "#000000"
  soft: "#616161"
  grey: "#EBEBEB"
  lime: "#E4FE00"
  green: "#0F3D3A"
  background: "#F7F7F7"
  white: "#FFFFFF"
  red: "#FF0000"
  error-fill: "rgba(255, 34, 68, 0.15)"
  ink-50: "rgba(0, 0, 0, 0.5)"
  ink-25: "rgba(0, 0, 0, 0.25)"
  white-0: "rgba(255, 255, 255, 0)"
  primary: "{colors.lime}"
  on-primary: "{colors.green}"
  secondary: "{colors.ink}"
  on-secondary: "{colors.white}"
  neutral: "{colors.background}"
  surface: "{colors.white}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.soft}"
  outline: "{colors.grey}"
  error: "{colors.red}"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "74px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 32"
  h1:
    fontFamily: "Inter"
    fontSize: "54px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 32"
  h2:
    fontFamily: "Inter"
    fontSize: "42px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 32"
  h3:
    fontFamily: "Inter"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 32"
  h4:
    fontFamily: "Inter"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 32"
  h5:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 32"
  h6:
    fontFamily: "Inter"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 32"
  big:
    fontFamily: "Inter"
    fontSize: "18px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  paragraph:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  small:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
  menu:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.04em"
    fontVariation: "'opsz' 14"
  button:
    fontFamily: "Inter"
    fontSize: "15px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.04em"
    fontVariation: "'opsz' 14"
  tiny:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.03em"
    fontVariation: "'opsz' 14"
rounded:
  base: "5px"
  chip: "3px"
  round: "9999px"
spacing:
  gutter: "30px"
  gutter-phone: "15px"
  gutter-tablet: "20px"
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  section-gap: "80px"
  section-gap-phone: "50px"
  section-gap-tablet: "60px"
  content-max: "1400px"
  header: "82px"
  header-phone: "58px"
components:
  button-primary:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.green}"
    typography: "{typography.button}"
    rounded: "{rounded.base}"
    padding: "16px 24px"
    height: "50px"
  button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.base}"
    padding: "16px 24px"
    height: "50px"
  button-black:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.base}"
    padding: "16px 24px"
    height: "50px"
  button-small:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.green}"
    typography: "{typography.button}"
    rounded: "{rounded.base}"
    padding: "12px 18px"
    height: "42px"
  chip:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.green}"
    typography: "{typography.small}"
    rounded: "{rounded.base}"
    padding: "4px 8px"
  page-title-chip:
    backgroundColor: "{colors.grey}"
    textColor: "{colors.soft}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.chip}"
    padding: "4px 6px"
  label-dot:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.green}"
    rounded: "{rounded.round}"
    size: "20px"
  card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.base}"
    padding: "20px"
  card-black:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    rounded: "{rounded.base}"
    padding: "20px"
  icon-square:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.green}"
    rounded: "{rounded.base}"
    size: "36px"
  toggle-mark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    rounded: "{rounded.round}"
    size: "24px"
  toggle-mark-open:
    backgroundColor: "{colors.grey}"
    textColor: "{colors.soft}"
  input-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.base}"
    padding: "12px"
    height: "43px"
  input-field-focus:
    backgroundColor: "{colors.white}"
  submit-button:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.green}"
    typography: "{typography.button}"
    rounded: "{rounded.base}"
    padding: "0px 14px"
    height: "40px"
  submit-button-hover:
    backgroundColor: "{colors.green}"
    textColor: "{colors.white}"
  submit-button-pressed:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
---

# Semono Design System

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

Semono is a website template for corporate and business consulting firms: services, a team, careers, client stories, a blog and a contact form. It should feel calm, precise and confident: professional rather than playful, with generous space between sections and dense, tidy cards inside them.

The look is built from very few parts. The page is a light grey Background (#F7F7F7); content sits on White cards with 5px corners; type is Black, with Soft Black for anything secondary. One accent, Lime (#E4FE00), carries every call to action and every small marker (label dots, chips, arrow circles, icon squares), always with Green (#0F3D3A) text or icons on it. Black cards, the footer and photos under a dark cover give the contrast.

Everything is set in Inter at weight 500 with tight letter spacing (-0.03em); headings use Inter's display optical size. Motion is soft and quick: springs of about 0.4 s, button labels that roll up on hover, and blocks and title words that rise into view once.

## Colors

- **Black (#000000)** — `ink`, `secondary`, `on-surface`. Headings, text on cards, the Black buttons, the Black cards and the footer, the plus buttons.
- **Soft Black (#616161)** — `soft`, `on-surface-variant`. Leads, descriptions, card meta, labels, list dots.
- **Grey (#EBEBEB)** — `grey`, `outline`. Hairlines, field borders, the page-title chip, the open accordion row's minus, the footer's links and note.
- **Lime (#E4FE00)** — `lime`, `primary`. The accent: buttons, label dots, chips, tags, arrow circles, icon squares.
- **Green (#0F3D3A)** — `green`, `on-primary`. Text and icons on Lime; the arrow circle's hover fill and the Submit button's.
- **Background (#F7F7F7)** — `background`, `neutral`. The page, the header bar once it turns light, form fields, the hero's lead and the texts over photos.
- **White (#FFFFFF)** — `white`, `on-secondary`, `surface`. Cards, white buttons, text over photos and on Black, a focused form field.
- **Red (#FF0000)** — `red`, `error`. The asterisk of a required field and the error label of the Submit button.
- **Error fill (rgba(255, 34, 68, 0.15))** — `error-fill`. The Submit button's fill after a failed send.
- **Black 50 (rgba(0, 0, 0, 0.5))** — `ink-50`. The cover over the hero, photo band and 404 photos; the placeholder of form fields.
- **Black 25 (rgba(0, 0, 0, 0.25))** — `ink-25`. The veil over a video poster; the border of a focused form field.
- **Transparent (rgba(255, 255, 255, 0))** — `white-0`. White at 0%: the header bar over the Home and 404 photos, a tab that is not chosen.

Semantic names in the front matter point at these colours: `primary` → `lime`, `on-primary` → `green`, `secondary` → `ink`, `on-secondary` → `white`, `neutral` → `background`, `surface` → `white`, `on-surface` → `ink`, `on-surface-variant` → `soft`, `outline` → `grey`, `error` → `red`.

## Typography

**Inter, sans-serif.** Inter from Google Fonts as one variable font with its optical-size axis (opsz), weights 400 and 500. The optical size is pinned per style so the browser never picks one from the font size: headings (Display 1, Heading 1–6) use 32 — the design file's "Inter Display" — and every other style 14 ("Inter"). Everything is weight 500 except the text typed into a form field (400).

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` | 48px / 59px / 74px | 1.1 | 500 | -0.03em, opsz 32 | Display 1 — the Home hero title |
| `h1` | 42px / 48px / 54px | 1.1 | 500 | -0.03em, opsz 32 | Heading 1 — page titles (the page's h1) and the big numbers |
| `h2` | 34px / 38px / 42px | 1.1 | 500 | -0.03em, opsz 32 | Heading 2 — section titles, the Action card's heading, the headings of a post |
| `h3` | 28px / 32px / 36px | 1.1 | 500 | -0.03em, opsz 32 | Heading 3 — a service's Overview headline, the Contact titles, the headings of a legal page, the More card's heading, the Careers list title, the Why Choose figures |
| `h4` | 24px / 26px / 28px | 1.1 | 500 | -0.03em, opsz 32 | Heading 4 — the quote beside the services' closing line, the results of a client story |
| `h5` | 20px / 22px / 24px | 1.1 | 500 | -0.03em, opsz 32 | Heading 5 — the About statement, the career page's section titles, the results on the quote cards, the video caption |
| `h6` | 18px / 19px / 20px | 1.1 | 500 | -0.03em, opsz 32 | Heading 6 — card and row titles, tab titles, accordion titles, the clients' title, a team member's name |
| `big` | 18px | 1.2 | 500 | -0.03em, opsz 14 | Big Paragraph — the Home hero lead, the 404 lead, the quotes on cards, the project text of a client story |
| `paragraph` | 16px | 1.2 | 500 | -0.03em, opsz 14 | Medium Paragraph — leads, descriptions, rich text, the titles of lists |
| `small` | 14px | 1.2 | 500 | -0.03em, opsz 14 | Small Paragraph — labels, chips, card text, meta, form labels, the footer's links |
| `menu` | 16px | 1.2 | 500 | -0.04em, opsz 14 | Menu — the header's links, in the phone menu too |
| `button` | 15px | 1.2 | 500 | -0.04em, opsz 14 | Button — button labels, the links with an arrow, the address and the hours in Contact, the Submit button |
| `tiny` | 12px | 1.2 | 500 | -0.03em, opsz 14 | Tiny — roles under names, the footer's taglines and legal links, the small line of a Fact Number |

## 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` | 15px / 20px / 30px | Side padding of every section, the header and the footer |
| `section-padding` | 60px / 80px / 100px | Vertical padding of a section (the Home hero, the photo band and the Action card set their own) |
| `section-gap` | 50px / 60px / 80px | Gap between the blocks of a section (a section may say otherwise) |
| `content-max` | 1400px | Widest content, centred inside the gutters (1140 at the 1200 breakpoint); a post's cover grows beyond it, up to 1728 |
| `header` | 58px / 82px / 82px | Height of the header bar (padding 20, content 18 tall on phones and 42 above); the spacer under it on inner pages |

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. Cards in a grid or in columns are 10px apart: three columns on desktops, two on tablets, one on phones for lists, four, two and one for the step cards. The parts of one card (a photo, a text card, a list card) are only 3px apart, so the page shows through as a thin line between them.

## Elevation & Depth

Semono is flat: there are no shadows anywhere. Depth comes from fills: White cards on the grey Background, Black cards and the Black footer for emphasis, and photos under a Black 50 cover (`ink-50`) wherever White text sits on them. A form field is Background at rest and turns White with a Black 25 border (`ink-25`) when focused.

## Shapes

Boxes have small, even corners; nothing is pill-shaped except the round marks.

- **`base` (5px):** Buttons, cards, photos, chips, fields, the video.
- **`chip` (3px):** The page-title chip.
- **`round` (9999px):** Label dots, arrow circles, the plus-minus mark, portraits, the play button.

## Motion

Measured on the live site (2026-10-06). 'A' is used by every component state change.

Reduced motion: nothing moves or changes size (rises, slides and accordion heights happen at once, tickers and spinners stand still), while fades and colour changes still animate.

- **`spring-a`** — spring (duration 0.4 s, bounce 0). Every hover and look change: buttons, links, the header's looks, the phone menu, the heights of accordion rows, cards (it never overshoots).
- **`spring-b`** — spring (duration 0.4 s, bounce 0.2). The hamburger lines, the plus-minus mark's fill, the tab buttons' fill, the video card, the team's LinkedIn button (a slight overshoot).
- **`spring-c`** — spring (stiffness 200, damping 30, mass 1). A block coming into view: opacity 0 → 1, from 40px lower, once.
- **`spring-d`** — spring (stiffness 200, damping 40, mass 1). A word coming into view (titles), once, from 40px lower; each word 0.05 s after the one before.
- **`spring-e`** — spring (stiffness 250, damping 55, mass 2.9). The page-load intro: the header (0.5 s late) and the Home hero's parts (0.1 / 0.2 / 0.4 / 0.5 s late), from 60px lower.
- **`ease-row-hover`** — `cubic-bezier(0.5, 0, 0.88, 0.77)`. An ease-in: the Service List row's hover (0.4 s).
- **`ease-form`** — `cubic-bezier(0.44, 0, 0.56, 1)`. The Submit button's colours (0.2 s) and the loading spinner's fade (0.3 s).
- **`ease-page-change`** — `cubic-bezier(0.73, 0, 0.33, 1)`. The page change: the page that leaves and the one that comes (0.6 s each).
- **`row-hover`** — type tween, duration 0.4s, ease `ease-row-hover`. A Service List row on desktops: the fill turns White and the photo grows to 105%, both ways.
- **`page-change`** — type tween, duration 0.6s, ease `ease-page-change`, leave fades out while rising 30%, enter fades in from 30% lower, starting 0.5 s later. Going to another page: the screen is one picture; skipped with reduced motion.
- **`ticker`** — speed 20px/s, direction left, pointerOver slows to a stop in 0.3 s. The client logos, endlessly; they stand still with reduced motion.
- **`spin`** — type tween, duration 1s, ease linear, repeat infinite. The 20px loading rings (the list spinner, the Submit button) turn once a second; they stand still with reduced motion.

## 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 / Secondary / Small)). The Lime button. The Primary look adds a 17px arrow 10px right of the label (padding 16 / 19 / 16 / 24). The label never wraps. Hover: the label rolls up (two copies in a one-line window) and the arrow moves right; the colours never change.
- **`button-white`** (Button/Primary (Primary / Secondary / Small)). The White button, on photos and dark cards.
- **`button-black`** (Button/Primary (Primary / Secondary / Small)). The Black button, for secondary actions such as "Explore all services".
- **`button-small`** (Button/Primary (Primary / Secondary / Small)). The small Lime button: "Contact us" in the header, "More details" on job openings.
- **`chip`** (Chip). A post's category, the "Step 01" of a step card.
- **`page-title-chip`** (Page Title). The chip above every inner page's h1; the title follows 20px below and the lead 30px below the title.
- **`label-dot`** (Label). The eyebrow above a section title: a Lime circle with a Green asterisk, then the label in `small`, Soft Black, 10px to its right.
- **`card`** (Card/Step). The White card used by steps, icon cards, post texts, testimonials and service rows; titles in `h6`, text in `small` or `paragraph` in Soft Black.
- **`card-black`** (More). The Black card that ends a team grid, with a Lime button at the bottom.
- **`icon-square`** (Card/Icon Text). A Lime square holding a 20px light icon in Green.
- **`toggle-mark`** (Button/Plus Min). The round plus at the right of a closed accordion row.
- **`toggle-mark-open`** (Button/Plus Min). The open row's minus.
- **`input-field`** (Form field (Text / Select / Text area)). A 1px Grey border inside, 16px text at weight 400, a Black 50 placeholder; the label (`small`, Black) sits 10px above. A text area is at least 200px tall.
- **`input-field-focus`** (Form field (Text / Select / Text area)). Focus is instant: a White fill and a Black 25 border, no outline ring.
- **`submit-button`** (Submit button). A form's Send button; it fills its column. While sending, a 20px Green ring turns in place of the label; after a send it reads "Thank you", after a failed send "Something went wrong" in Red on the Error fill.
- **`submit-button-hover`** (Submit button). Hover: a Green fill and a White label (0.2 s, ease-form).
- **`submit-button-pressed`** (Submit button). Pressed: a Black fill and a White label.

Other components of the template, described in its spec: Button/Menu (Desktop / Mobile), Button/Secondary (Default / Small/White), Logo, Icon, Hamburger (Default / Close), Section, Block reveal, Page-load intro, Word reveal, Collapse, Page change, Service List, Card/Post, Testimonial (Simple / No Logo / Number On Bottom / Number On Top), Card/Testimonial/Primary, Card/Team, Action card, Action quote, Card/Video, Fact Number, Current year, Ticker, Client Logo, Part/Value (the accordion), Card/FAQ (the FAQ list), Load on scroll, Columns of cards, Testimonial masonry, Rich text, Dot text, Form.

## Do's and Don'ts

- Do use Lime only as the accent (buttons, label dots, chips, tags, arrow circles, icon squares) and put Green text or icons on it.
- Do set every text style at weight 500; only the text typed into a form field is 400.
- Do set headings (`display`, `h1`–`h6`) at line height 1.1 with Inter's optical size 32, and every other style at optical size 14.
- Do use Soft Black for leads, descriptions, meta and labels on light surfaces, and Black for titles.
- Do give boxes (buttons, cards, photos, chips, fields) 5px corners; keep round shapes for dots, arrow circles, the plus-minus mark, portraits and the play button.
- Do separate the parts of a card with a 3px gap, not a border or a shadow.
- Do animate hovers and state changes with `spring-a` (0.4 s, no bounce), and let blocks and title words rise into view once.
- Don't add shadows, gradients or new colours; the palette above is the whole palette.
- Don't put White text on Lime.
- Don't use Red for anything but a required field's asterisk and a failed form send.
- Don't let a button label wrap, or change a button's colours on hover (the label rolls instead).
- Don't mix fonts: Inter is the only family.

## Source

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

Fonts: Inter and Inter Display (SIL Open Font License).

Demo photos (Unsplash) and videos (Pexels) 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": "semono" }, or the raw file at framebrick.co/templates/semono/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 Semono

Semono

Get new templates and components first