DESIGN.md · Free

Titen design system

Construction and architecture firm website: a warm cream page, square black type and buttons, and a single burnt-orange Accent.

The style

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.

Colours

Black#121212ink · secondary · on-surfaceText, dark buttons, the footer, chips on cards.
Background#F5F1E5background · neutralThe page, the header once scrolled.
Soft Brown#E0DCD7sandThe Home projects band.
Accent#C36036accent · primaryAccent buttons, hover backgrounds, award names, the text-link hover line.
Orange#E8481CorangeThe current page in the menu, rating stars.
White#FFFFFFwhite · on-primary · on-secondary · surfaceText on dark covers, white buttons.
Black 80%rgba(18, 18, 18, 0.8)ink-80Section labels, muted paragraphs.
Black 60%rgba(0, 0, 0, 0.6)ink-60The meta line on project cards.
Black 30%rgba(18, 18, 18, 0.3)ink-30 · outlineDivider lines, the text-link line.
Black 5%rgba(18, 18, 18, 0.05)ink-5Form field and card borders.
Black 3%rgba(18, 18, 18, 0.03)ink-3Form fields, testimonial cards.
White 80%rgba(255, 255, 255, 0.8)white-80Footer text and links.
White 50%rgba(255, 255, 255, 0.5)white-50The footer field's placeholder.
White 10%rgba(255, 255, 255, 0.1)white-10Footer lines, borders on the hero cards.
White 5%rgba(255, 255, 255, 0.05)white-5The hero testimonial cards.
Black 75%rgba(0, 0, 0, 0.75)overlayThe cover over the Home hero video.

Typography · Plus Jakarta Sans

display
64px · 500 · 1.2Titen
h1
56px · 500 · 1.2Titen
h2
42px · 500 · 1.2Titen
h3
36px · 500 · 1.2Titen
h4
28px · 500 · 1.2Titen
h5
24px · 500 · 1.2Titen
h6
20px · 500 · 1.2Build a site that feels designed
paragraph
16px · 400 · 1.4Build a site that feels designed
small
14px · 400 · 1.4Build a site that feels designed
tiny
12px · 400 · 1.2Build a site that feels designed
menu
12px · 600 · 1.2 · 0.02emBuild a site that feels designed
button
11px · 500 · 1.2 · 0.02emBuild a site that feels designed

Corners

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

Parts

Get startedGet startedGet startedGet started

post tag

Titen

A card in its own colours and corners.

Drawn from the file’s component tokens.

Do's and don'ts

use Accent for accent buttons, every button hover, award names and the text-link hover line, with White labels on it.
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.
set button labels, menu links, section labels and card meta in the small uppercase button and menu styles.
set headings at weight 500 and line height 1.2, and paragraphs at 400 and line height 1.4.
use Black 80% for section labels and muted paragraphs, and Black 30% for divider lines.
change button colours on hover with spring-button (0.5 s, no bounce) and turn arrows 45° with spring.
let heading words appear one by one from a blur on load, and let blocks rise 18px into view once.

round buttons, fields or cards, or add shadows; the search panel is the only floating layer.
use Orange for anything but the current menu link and the rating stars.
put Black text on an Accent fill.
add an ellipsis where card summaries and excerpts are cut; they end cleanly after their lines.
mix fonts: Plus Jakarta Sans is the family everywhere except the search panel.

Get Titen

Titen

Free

Construction and architecture template

Framer
Next.js
Astro
HTML
Figma
AI prompt

12 pages

This file describes Titen’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: "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.

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": "titen" }, or the raw file at framebrick.co/templates/titen/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 · Plus Jakarta Sans

Corners

Spacing

Parts

Do's and don'ts

Get Titen

Titen

Get new templates and components first