---
version: "alpha"
name: "Titen"
description: "Construction and architecture firm website: a warm cream page, square black type and buttons, and a single burnt-orange Accent."
colors:
  ink: "#121212"
  background: "#F5F1E5"
  sand: "#E0DCD7"
  accent: "#C36036"
  orange: "#E8481C"
  white: "#FFFFFF"
  ink-80: "rgba(18, 18, 18, 0.8)"
  ink-60: "rgba(0, 0, 0, 0.6)"
  ink-30: "rgba(18, 18, 18, 0.3)"
  ink-5: "rgba(18, 18, 18, 0.05)"
  ink-3: "rgba(18, 18, 18, 0.03)"
  white-80: "rgba(255, 255, 255, 0.8)"
  white-50: "rgba(255, 255, 255, 0.5)"
  white-10: "rgba(255, 255, 255, 0.1)"
  white-5: "rgba(255, 255, 255, 0.05)"
  overlay: "rgba(0, 0, 0, 0.75)"
  primary: "{colors.accent}"
  on-primary: "{colors.white}"
  secondary: "{colors.ink}"
  on-secondary: "{colors.white}"
  neutral: "{colors.background}"
  surface: "{colors.white}"
  on-surface: "{colors.ink}"
  outline: "{colors.ink-30}"
typography:
  display:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "64px"
    fontWeight: 500
    lineHeight: 1.2
  h1:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "56px"
    fontWeight: 500
    lineHeight: 1.2
  h2:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "42px"
    fontWeight: 500
    lineHeight: 1.2
  h3:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: 1.2
  h4:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.2
  h5:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.2
  h6:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.2
  paragraph:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
  small:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.4
  tiny:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.2
  menu:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: "0.02em"
  button:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "0.02em"
rounded:
  card: "10px"
  panel: "16px"
spacing:
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  gutter: "50px"
  gutter-phone: "16px"
  gutter-tablet: "30px"
  content-max: "1440px"
components:
  button-black:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    padding: "10px 20px"
    height: "33px"
  button-black-hover:
    backgroundColor: "{colors.accent}"
  button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    padding: "10px 20px"
    height: "33px"
  button-white-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.white}"
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    padding: "10px 20px"
    height: "33px"
  button-accent-hover:
    backgroundColor: "{colors.ink}"
  arrow-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    padding: "10px 20px"
  menu-link-active:
    textColor: "{colors.orange}"
    typography: "{typography.menu}"
  text-line-link:
    textColor: "{colors.ink}"
    typography: "{typography.menu}"
  post-tag:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.small}"
    padding: "12px"
  testimonial-card:
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.card}"
    padding: "18px"
  team-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    padding: "12px"
  check-mark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    size: "24px"
  input-field:
    textColor: "{colors.ink}"
    padding: "12px"
    height: "44px"
  submit-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    padding: "10px 20px"
  submit-button-pressed:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.white}"
  submit-button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    padding: "10px 20px"
    height: "42px"
  search-panel:
    backgroundColor: "{colors.white}"
    rounded: "{rounded.panel}"
    width: "500px"
---

# Titen Design System

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

Titen is a website template for construction and architecture firms: projects by sector, services, a team, testimonials, a blog, and about and contact pages. It should feel bold and solid: large photos and videos, big headings, and plain square shapes with no decoration.

The look is built from very few parts. The page is a warm cream Background (#F5F1E5), with a Soft Brown band (#E0DCD7) for the Home projects and a Black footer. Type, buttons, tags and icon circles are Black (#121212); Black 80% carries section labels and muted text, and Black 30% the divider lines. One accent, Accent (#C36036), fills the accent buttons and every button hover, and draws the text-link hover line. Orange (#E8481C) only marks the current menu link and the rating stars. Almost everything is square.

Everything is set in Plus Jakarta Sans: headings at weight 500 and line height 1.2, paragraphs at 400, and small uppercase labels for menus and buttons (600 and 500, 0.02em spacing). Motion is calm: button backgrounds change with a 0.5 s spring, arrows turn 45° on hover, heading words appear one by one out of a soft blur, and blocks rise into view once.

## Colors

- **Black (#121212)** — `ink`, `secondary`, `on-surface`. Text, dark buttons, the footer, chips on cards.
- **Background (#F5F1E5)** — `background`, `neutral`. The page, the header once scrolled.
- **Soft Brown (#E0DCD7)** — `sand`. The Home projects band.
- **Accent (#C36036)** — `accent`, `primary`. Accent buttons, hover backgrounds, award names, the text-link hover line.
- **Orange (#E8481C)** — `orange`. The current page in the menu, rating stars.
- **White (#FFFFFF)** — `white`, `on-primary`, `on-secondary`, `surface`. Text on dark covers, white buttons.
- **Black 80% (rgba(18, 18, 18, 0.8))** — `ink-80`. Section labels, muted paragraphs.
- **Black 60% (rgba(0, 0, 0, 0.6))** — `ink-60`. The meta line on project cards.
- **Black 30% (rgba(18, 18, 18, 0.3))** — `ink-30`, `outline`. Divider lines, the text-link line.
- **Black 5% (rgba(18, 18, 18, 0.05))** — `ink-5`. Form field and card borders.
- **Black 3% (rgba(18, 18, 18, 0.03))** — `ink-3`. Form fields, testimonial cards.
- **White 80% (rgba(255, 255, 255, 0.8))** — `white-80`. Footer text and links.
- **White 50% (rgba(255, 255, 255, 0.5))** — `white-50`. The footer field's placeholder.
- **White 10% (rgba(255, 255, 255, 0.1))** — `white-10`. Footer lines, borders on the hero cards.
- **White 5% (rgba(255, 255, 255, 0.05))** — `white-5`. The hero testimonial cards.
- **Black 75% (rgba(0, 0, 0, 0.75))** — `overlay`. The cover over the Home hero video.

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

## Typography

**Plus Jakarta Sans, sans-serif.** Google Fonts; weights 400, 500, 600 (and 700 for bold runs in rich text). The search panel uses Inter 500.

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 / 56px / 64px | 1.2 | 500 | — | Display 01 — "Let’s Talk!" |
| `h1` | 40px / 48px / 56px | 1.2 | 500 | — | Heading 1 — page titles, the Home hero, fact numbers |
| `h2` | 30px / 36px / 42px | 1.2 | 500 | — | Heading 2 — section titles |
| `h3` | 28px / 32px / 36px | 1.2 | 500 | — | Heading 3 — headings in posts |
| `h4` | 24px / 26px / 28px | 1.2 | 500 | — | Heading 4 — service titles in lists |
| `h5` | 20px / 22px / 24px | 1.2 | 500 | — | Heading 5 — the fact suffix (+) |
| `h6` | 18px / 19px / 20px | 1.2 | 500 | — | Heading 6 — card titles, value titles, accordion rows |
| `paragraph` | 16px | 1.4 | 400 | — | Paragraph/Medium Paragraph |
| `small` | 14px | 1.4 | 400 | — | Paragraph/Small Paragraph — quotes, footer text, dates |
| `tiny` | 12px | 1.2 | 400 | — | Paragraph/Tiny Paragraph — ratings |
| `menu` | 12px | 1.2 | 600 | 0.02em, uppercase | Span/Menu — menu links, section labels, text links, card meta |
| `button` | 11px | 1.2 | 500 | 0.02em, uppercase | Span/Button — button labels |

## 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 |
|---|---|---|
| `section-padding` | 60px / 80px / 100px | Vertical padding of a section |
| `gutter` | 16px / 30px / 50px | Side padding of a section |
| `content-max` | 1440px | Maximum content width (inside the gutters) |

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 title is its label and heading 8 apart, at most 750 wide. Card grids are three columns on desktops, two on tablets and one on phones, with columns 30 apart (24 for testimonial cards); a section title and what follows it sit 48, 56 and 64 apart on phones, tablets and desktops. Lists of services and accordion rows are split by a 1px Black 30% line instead of gaps.

## Elevation & Depth

Titen is flat: the only shadow is the search panel's (0 20 40, Black 20%), which floats over a Black 80% overlay. Depth comes from fills: the Soft Brown band and the Black footer, the Black 75% cover (`overlay`) over the Home hero video, and the Black 80% band at the bottom of a featured project photo. Testimonial cards are a Black 3% fill with a Black 5% border; on the hero video they are White 5% with an 8px backdrop blur and a White 10% border.

## Shapes

Boxes are square: buttons, fields, tags, cards and photos have no corners. Only testimonial cards (10px) and the search panel (16px) are rounded; dots, icon circles and client photos are fully round.

- **`card` (10px):** Testimonial cards; everything else is square.
- **`panel` (16px):** The search panel.

## Motion

Reduced motion: only the fades remain (heading words, lines and blocks no longer rise or unblur), the slideshow changes slides without moving, and the background videos show their poster without playing.

- **`spring`** — spring (duration 0.4 s, bounce 0.2). Arrows, menu and text-link lines, card hovers, accordions, the phone menu.
- **`spring-button`** — spring (duration 0.5 s, bounce 0). Button background and label colours.
- **`spring-slide`** — spring (stiffness 200, damping 40, mass 1). One step of the testimonial slideshow (every 4 s).
- **`appear-word`** — spring (stiffness 320, damping 58, mass 1). Headings appear word by word from a 7px blur and 10px lower, 0.05 s apart.
- **`appear-line`** — spring (stiffness 320, damping 64, mass 1). Lead paragraphs and labels appear from 7px lower.
- **`appear-block`** — spring (stiffness 320, damping 55, mass 1, delay 0.05 s). Blocks rise 18px and fade in when half of them is in view, once.
- **`appear-late`** — spring (stiffness 400, damping 58, mass 1, delay 0.65 s). Hero buttons and facts rise 7px into place 0.65 s after load.

## Components

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

- **`button-black`** (Button (Black / White / Accent - Black / Accent - White)). The square Black button with an uppercase label. Its background changes on hover with `spring-button`.
- **`button-black-hover`** (Button (Black / White / Accent - Black / Accent - White)). Hover: an Accent fill, the label stays White.
- **`button-white`** (Button (Black / White / Accent - Black / Accent - White)). The White button with a Black label.
- **`button-white-hover`** (Button (Black / White / Accent - Black / Accent - White)). Hover: an Accent fill with a White label.
- **`button-accent`** (Button (Black / White / Accent - Black / Accent - White)). The Accent button (Framer: Accent - Black), always with a White label. Its twin Accent - White turns White with a Black label on hover instead.
- **`button-accent-hover`** (Button (Black / White / Accent - Black / Accent - White)). Hover: a Black fill, the label stays White.
- **`arrow-button`** (Arrow button (Black / Accent - Black / Accent - White)). A Button with a 14px `arrow-up-right` icon 10 after the label, in the same Black, Accent - Black and Accent - White colours. On hover the fill changes like the Button's and the arrow turns 45° to point right (`spring`).
- **`menu-link-active`** (Menu link (Default / Active / With Icon)). The current page's link in the menu: Orange, no hover line. Other menu links take the current text colour and grow a 1px line from the left on hover.
- **`text-line-link`** (Text line link). An uppercase link with a 1px Black 30% line under the whole label, 4 below it; on hover an Accent line grows over it from the left (`spring`).
- **`post-tag`** (Post card (Card/Post)). The square Black tags on a post photo: the date (`small`) at its top left and the category (`paragraph`) at its bottom right.
- **`testimonial-card`** (Testimonial card (Default / Small White)). The only rounded card: a Black 3% fill and a 1px Black 5% border inside. The quote, then 24 below the client (a 24px round photo and the name) and the rating after a 14px Orange star. On the hero video it is White 5% with an 8px backdrop blur, a White 10% border and white text.
- **`team-card`** (Team card (Card/Team)). The White box at the bottom of a portrait: the name (`h6`) and the role (`small`, Black 80%), then the bio. Above it sits a 42px Black round LinkedIn link. Desktops show the bio only on hover or focus.
- **`check-mark`** (Check list). A Black circle with a 14px White `check`, 12 before each point of a check list.
- **`input-field`** (Form field). Square, a Black 3% fill and a 1px Black 5% border inside that turns Black 30% while focused; 16px text, a Black 30% placeholder, the label (`small`) 10 above. The message field is 200 tall.
- **`submit-button`** (Submit button). A contact form's send button. Hover: Accent at 80% with a White label. While sending, a 20px White spinner turns on Accent; after a send it reads "Thank you" on Accent, after a failed send "Something went wrong" in red on a 15% fill of the same red.
- **`submit-button-pressed`** (Submit button). Pressed: an Accent fill (0.2 s, ease-in-out).
- **`submit-button-white`** (Submit button). The footer's newsletter button, at least 80 wide; hover, pressed and results as above.
- **`search-panel`** (Search panel). A White panel at most 500 wide, 195 from the top, over a Black 80% overlay, with the template's only shadow; the first result row is highlighted Black 5%.

Other components of the template, described in its spec: Hamburger (Default / Close), Search button, Logo (Black / White), Icon, Section, Section title, Page title, Appear effects, Project card (Card/Project 01), Featured project card (Card/Project 02), Loop video, Fact, Value, Accordion (Misc/Accordions), Service list (Section/Service List), Slideshow, Rich text, Newsletter form.

## Do's and Don'ts

- Do use Accent for accent buttons, every button hover, award names and the text-link hover line, with White labels on it.
- Do keep buttons, fields, tags, cards and photos square; round only the testimonial cards (10px), the search panel (16px) and the round photos, dots and icon circles.
- Do set button labels, menu links, section labels and card meta in the small uppercase `button` and `menu` styles.
- Do set headings at weight 500 and line height 1.2, and paragraphs at 400 and line height 1.4.
- Do use Black 80% for section labels and muted paragraphs, and Black 30% for divider lines.
- Do change button colours on hover with `spring-button` (0.5 s, no bounce) and turn arrows 45° with `spring`.
- Do let heading words appear one by one from a blur on load, and let blocks rise 18px into view once.
- Don't round buttons, fields or cards, or add shadows; the search panel is the only floating layer.
- Don't use Orange for anything but the current menu link and the rating stars.
- Don't put Black text on an Accent fill.
- Don't add an ellipsis where card summaries and excerpts are cut; they end cleanly after their lines.
- Don't mix fonts: Plus Jakarta Sans is the family everywhere except the search panel.

## Source

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

Demo photos (Unsplash, Pexels) and videos (Pexels, Magnific) are placeholders and not part of the design system.