# Tekt — Design System
> Tekt is an Australian modular building company dedicated to thoughtful design, quality construction, and streamlined delivery at scale.
- **Canonical:** https://uiuxskills.com/library/tekt
- **Source:** https://tekt.com.au/
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-09-30T05:00:21.875Z

---

---
version: alpha
name: Tekt
tagline: Modular, reimagined
description: >-
  Tekt is an Australian modular building company dedicated to thoughtful design, quality
  construction, and streamlined delivery at scale.
tone: modern, precise, architectural, sophisticated
color-scheme: light
colors:
  primary: "#D0DBE4"
  secondary: "#2D2012"
  background: "#ECF1F4"
  surface: "#FFFFFF"
  surface-dim: "#DBE4EA"
  on-primary: "#2D2012"
  on-secondary: "#FFFFFF"
  on-surface: "#2D2012"
  outline: "#D0DBE4"
  error: "#A82012"
  success: "#2D4A3E"
typography:
  display-lg:
    fontFamily: Herbik
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Herbik
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Herbik
    fontSize: 1.875rem
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: 0em
  headline-md:
    fontFamily: Herbik
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.35"
    letterSpacing: 0em
  headline-sm:
    fontFamily: Herbik
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0em
  body-md:
    fontFamily: af Another Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: "1.6"
    letterSpacing: 0.01em
  body-sm:
    fontFamily: af Another Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0.01em
  label-md:
    fontFamily: af Another Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: "1.2"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: af Another Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: "1.2"
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-secondary}"
    rounded: "{rounded.sm}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-secondary}"
    rounded: "{rounded.sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  nav-item:
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
  swatch-background:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px rgba(0,0,0,0.05)
  lg: 0 10px 15px rgba(0,0,0,0.05)
---

## Overview

Tekt's visual identity is deeply rooted in architectural minimalism, precision, and natural integration. The design system evokes a sense of structured elegance and high-end craftsmanship, mirroring the modular and structural nature of their home-building system. By balancing industrial steel tones with warm, earthy charcoals, the interface feels both highly technical and welcoming.

## Colors

The color strategy relies on a sophisticated, muted palette inspired by raw construction materials and natural landscapes. It pairs cool steel blues with deep, warm charcoals to establish high contrast without relying on harsh, pure blacks.

*   **Primary (#D0DBE4)**: A muted steel blue that serves as the primary brand accent and CTA background, reflecting modern industrial design.
*   **Secondary (#2D2012)**: A deep, warm charcoal/brown used for primary typography and high-contrast structural elements.
*   **Background (#ECF1F4)**: A very light grey-blue canvas background that provides a clean, airy backdrop for architectural imagery.
*   **Surface (inferred) (#FFFFFF)**: Pure white used for clean card containers and content sections.
*   **Surface-dim (#DBE4EA)**: A slightly darker, muted steel blue-grey used for secondary buttons and subtle container backgrounds.
*   **On-primary (#2D2012)**: Deep charcoal text applied over the primary steel blue background to ensure optimal contrast.
*   **On-secondary (inferred) (#FFFFFF)**: White text used over dark charcoal elements and hero image overlays.
*   **On-surface (#2D2012)**: Deep charcoal text applied over white and light grey surfaces.
*   **Outline (#D0DBE4)**: Thin steel blue borders that define structural grids and component boundaries.
*   **Error (inferred) (#A82012)**: A muted, warm red used for error states, aligning with the brand's earthy architectural palette.
*   **Success (inferred) (#2D4A3E)**: A deep forest green used for success states, inspired by natural landscape photography.

## Typography

The typography system uses two distinct typefaces to balance structural authority with clean readability. Herbik is used for display and headline levels to deliver a strong, architectural presence, while af Another Sans provides a clean, highly legible sans-serif face for body copy and labels.

*   **display-lg (inferred)**: Set in Herbik (700 weight, 3rem, 1.2 line height). Used for high-impact hero statements and major section introductions.
*   **display-md (inferred)**: Set in Herbik (700 weight, 2.25rem, 1.25 line height). Used for secondary display headings and prominent feature titles.
*   **headline-lg (inferred)**: Set in Herbik (600 weight, 1.875rem, 1.3 line height). Used for standard section headers throughout the page.
*   **headline-md (inferred)**: Set in Herbik (600 weight, 1.5rem, 1.35 line height). Used for mid-sized headings and card titles.
*   **headline-sm (inferred)**: Set in Herbik (600 weight, 1.25rem, 1.4 line height). Used for small headings and sub-section titles.
*   **body-md**: Set in af Another Sans (400 weight, 15px, 1.6 line height). The primary body text size, optimized for readability in paragraphs.
*   **body-sm (inferred)**: Set in af Another Sans (400 weight, 13px, 1.5 line height). Used for secondary body copy, captions, and fine print.
*   **label-md**: Set in af Another Sans (500 weight, 14px, 1.2 line height). Used for navigation links, buttons, and small uppercase labels.
*   **label-sm (inferred)**: Set in af Another Sans (500 weight, 12px, 1.2 line height). Used for tiny metadata, tags, and micro-labels.

## Layout

The layout is governed by a strict, clean grid system with generous spacing that mirrors architectural blueprints. Sections are clearly demarcated with thin, precise dividers, maintaining a balanced rhythm of content and high-impact imagery. The observed section order top-to-bottom is `nav` -> `hero` -> `intro` -> `value-props` -> `use-cases` -> `process` -> `design-series` -> `fixtures-finishes` -> `footer`. The hero composition pattern utilizes a full-screen architectural photograph with a clean, minimalist overlay header and a simple left-aligned headline. The grid system is highly responsive, collapsing from multi-column architectural layouts to single-column vertical stacks on mobile viewports while maintaining a minimum spacing of `{spacing.md}` (16px) to preserve the open, airy layout.

## Elevation & Depth

In alignment with its minimalist and flat architectural aesthetic, Tekt avoids heavy drop shadows. Depth is primarily conveyed through clean color blocking, structural borders, and high-contrast layering of elements rather than physical elevation. The elevation values are inferred and should be used sparingly.

*   `elevation.sm` — Used for subtle card lift and interactive elements.
*   `elevation.md` — Used for dropdowns, popovers, and floating navigation bars.
*   `elevation.lg` — Used for modal overlays and drawers (avoid on standard content cards).

## Shapes

The brand embraces a completely sharp, right-angled design language with a border-radius of 0px across almost all components. This choice reinforces the modular, structural, and precision-engineered nature of their home-building system.

*   `rounded.sm` (0px) — Applied to buttons, cards, input fields, and badges to maintain a rigid, architectural profile.
*   `rounded.md` (0px) — Applied to larger structural containers.
*   `rounded.lg` (0px) — Applied to section blocks and modal panels.
*   `rounded.xl` (0px) — Applied to full-screen or major layout wrappers.
*   `rounded.full` (9999px) — Reserved exclusively for circular elements such as color swatches or icon backdrops.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary
The primary call-to-action button. It features a solid `{colors.primary}` background with `{colors.secondary}` text, styled with `{typography.label-md}` and a sharp `{rounded.sm}` border radius. Use this for the main conversion action in any section.

### button-primary-hover
The hover state for the primary button. The background transitions to `{colors.surface-dim}` while keeping the text color as `{colors.secondary}`. This transition should use `{motion.duration-short}` with `{motion.easing-standard}`.

### button-secondary
A secondary action button used for alternative paths. It features a `{colors.surface-dim}` background, `{colors.primary}` text, and a thin border colored with `{colors.primary}`. Use this when multiple actions are presented side-by-side.

### card
A structural container used to group related content. It utilizes a `{colors.surface}` background with a thin `{colors.outline}` border and sharp `{rounded.sm}` corners. Use this to display features, services, or process steps.

### card-elevated
An interactive variation of the standard card. It shares the same background and border styling but applies a subtle `{elevation.sm}` to indicate hoverability or active selection.

### input-field
A text input container with a transparent background, `{colors.secondary}` text, and a `{colors.outline}` border. It maintains a sharp `{rounded.sm}` profile to align with the modular aesthetic.

### input-field-focus
The active state of the input field. The border color transitions to `{colors.primary}` to provide clear visual feedback during user interaction.

### link
An inline text link styled with `{typography.body-md}` and colored in `{colors.secondary}`. Use this for standard text navigation within paragraphs or lists.

### link-hover
The hover state of the inline link, transitioning the text color to `{colors.primary}` to indicate interactivity.

### badge
A small status or category label. It features a `{colors.primary}` background with `{colors.on-primary}` text and a sharp `{rounded.sm}` border radius. Use this for tags, categories, or metadata.

### badge-error
An error status indicator utilizing a `{colors.error}` background and `{colors.on-secondary}` text. Use this for validation errors or system alerts.

### badge-success
A success status indicator utilizing a `{colors.success}` background and `{colors.on-secondary}` text. Use this for completed steps or successful actions.

### divider
A thin, precise structural line with a `{colors.outline}` background and a height of 1px. Use this to separate content blocks and maintain the architectural grid.

### nav-item
A navigation link styled with `{typography.label-md}` and colored in `{colors.secondary}`. Use this in headers and footers for primary site navigation.

### swatch-background
A small, square color or material preview container. It is sized at 32px by 32px, uses `{colors.background}`, and is styled with a sharp `{rounded.sm}` border radius.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` as the background for primary call-to-action buttons like `{components.button-primary}`. | Never apply rounded corners larger than `{rounded.sm}` to standard components like `{components.button-primary}`. |
| Apply `{colors.secondary}` for high-contrast typography on light backgrounds to maintain readability. | Avoid using heavy drop shadows from `{elevation.lg}` on flat structural cards to prevent disrupting the minimalist aesthetic. |
| Ensure all structural containers and cards use a sharp `{rounded.sm}` corner radius to match the architectural theme. | Do not pair `{colors.primary}` text directly on `{colors.surface-dim}` without sufficient contrast or a divider. |
| Utilize `{colors.outline}` for thin, precise borders on `{components.card}` and `{components.input-field}` elements. | Never use generic sans-serif fonts where `{typography.display-lg}` or `{typography.body-md}` are specified. |
| Set body copy to `{typography.body-md}` using the 'af Another Sans' typeface for clean, modern legibility. | Do not crowd elements; always maintain a minimum of `{spacing.md}` to preserve the open, airy layout. |
| Use `{colors.surface-dim}` as a subtle background variation for secondary interactive elements. | Avoid using bright, saturated primary colors that clash with the muted, natural tones of `{colors.primary}` and `{colors.secondary}`. |
| Separate major layout sections using a 1px `{components.divider}` colored with `{colors.outline}`. | Do not use `{rounded.full}` on structural elements; reserve it strictly for circular swatches like `{components.swatch-background}`. |
| Use `{typography.label-sm}` for technical metadata, process step numbers, and small tags. | Avoid using `{colors.error}` or `{colors.success}` for decorative elements; restrict them to functional status badges. |

## Content Style

The copy style is highly structured, technical, and professional, reflecting the precision of modular engineering. It avoids marketing jargon in favor of clear, process-driven communication.

*   **CTA Style**: Direct, informative, and low-pressure. Button labels use simple, action-oriented phrases like "Learn more" or "Get in Touch", often accompanied by clean, minimalist arrow indicators.
*   **Heading Tone**: Sophisticated, structured, and highly professional. Headlines focus on architectural integrity, precision, and systemized quality, establishing Tekt as a premium alternative to standard kit homes.
*   **Copy Density**: Highly structured and scannable. The layout utilizes numbered lists (e.g., "01 Groundwork") and short, precise paragraphs detailing technical and design processes, surrounded by generous whitespace.

## Imagery & Icons

The imagery relies heavily on high-end, professional architectural photography of modular homes integrated into natural landscapes (coastal, rural, and urban settings). Photos feature muted, warm, and earthy tones with soft, natural lighting to emphasize the relationship between the structure and its environment. Icons and graphics are kept to an absolute minimum, utilizing ultra-thin, precise lines that mimic architectural blueprints and technical drawings. Avoid abstract illustrations or heavy, filled icon sets.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Tekt, a minimal, architecturally precise brand. Match its sophisticated, structural tone — restrained, exact, and never decorative for decoration's sake. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference all values by token name — `{colors.primary}`, `{typography.display-lg}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or font names.
2. Apply `{rounded.sm}` (0px) to every standard component. Reserve `{rounded.full}` only for elements the spec explicitly designates pill-shaped.
3. Respect the `components:` list exactly. Do not invent variants such as ghost buttons, outlined cards, or chip inputs unless the spec lists them.
4. Follow the layout notes: use a strict grid, separate sections with `{colors.outline}` dividers, and maintain a minimum `{spacing.md}` gap between elements at all times.
5. When the Do's and Don'ts conflict with a user request, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use `{colors.primary}` as the background for `{components.button-primary}`; pair with `{colors.on-primary}` text.
- Set all body copy to `{typography.body-md}`, headings to the appropriate Herbik scale (`{typography.display-lg}` through `{typography.headline-sm}`).
- Cover hover, focus, and disabled states for every interactive component the spec defines.
- Use `{colors.outline}` for all borders on cards and input fields.
- Apply `{colors.error}` and `{colors.success}` exclusively for their designated semantic states.

**Must NOT:**
- Apply any border-radius other than `{rounded.sm}` or `{rounded.full}` to any component.
- Introduce colors, typefaces, or spacing values absent from the spec.
- Use heavy drop shadows or decorative elevation that disrupts the flat, minimalist aesthetic.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or restructure page copy, navigation items, or headings — the spec governs visual tokens only.

## When in doubt
- If a token is undefined for a context, ask before inventing a value.
- For background roles, default to `{colors.surface}`; for secondary containers, use `{colors.surface-dim}`.
- For text on light surfaces, default to `{colors.on-surface}`.
- Follow a mobile-first layout with one breakpoint at 768px if the spec gives no explicit responsive guidance.
- Tokens described in prose rather than a formal token file are visual approximations; defer to any authoritative token source if available.