---
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.