Turn your brand into a DESIGN.md in five minutes.

Your files

---
version: alpha
name: "Theepa Studio"
description: "Brand identity, website and AI automation studio in Dubai for startups in the US, UK and UAE."
colors:
  primary: "#7384FF"
  on-primary: "#231F20"
  primary-hover: "#929FFF"
  primary-strong: "#5E6CD1"
  secondary: "#4655D4"
  on-secondary: "#FFFFFF"
  surface: "#FFFFFF"
  surface-variant: "#F7F8FF"
  on-surface: "#231F20"
  on-surface-variant: "#696767"
  outline: "#DCDBDB"
  error: "#B42318"
  on-error: "#FFFFFF"
typography:
  headline-display:
    fontFamily: "Space Grotesk"
    fontSize: 49px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: 39px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: "Space Grotesk"
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.25
  body-lg:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
  label-sm:
    fontFamily: "JetBrains Mono"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  code:
    fontFamily: "JetBrains Mono"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  headline-ar:
    fontFamily: "IBM Plex Sans Arabic"
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.4
  body-ar:
    fontFamily: "IBM Plex Sans Arabic"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.8
rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 28px
  full: 9999px
spacing:
  base: 8px
  xs: 8px
  sm: 12px
  md: 24px
  lg: 48px
  xl: 96px
  gutter: 32px
  margin: 24px
components:
  page:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "{spacing.sm}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "{spacing.sm}"
  link:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-strong}"
    typography: "{typography.body-md}"
  heading:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-lg}"
  card:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
  caption:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-sm}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.xs}"
  alert-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-error}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
  body-arabic:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-ar}"
---

# Theepa Studio design system

## Overview

Brand identity, website and AI automation studio in Dubai for startups in the US, UK and UAE.

Audience: Founders and marketing leads at early-stage startups.

The brand feels **bold, premium, technical**. In the interface that means big, confident headlines, strong contrast and one dominant colour per screen; restraint: lots of space, refined type and no decoration that isn't needed; precise grids, monospaced details and data shown plainly.

This file is the source of truth for Theepa Studio's look. Tokens in the front matter are the exact values; the notes below explain how to use them.

## Colors

The palette, by role:

- **Periwinkle (`primary`, #7384FF):** Brand colour. Main calls to action, active states and key highlights. Use it sparingly: one primary action per view.
- **`on-primary` (#231F20):** Text and icons placed on primary.
- **`primary-hover` (#929FFF):** Hover and pressed state for primary buttons.
- **`primary-strong` (#5E6CD1):** Primary adjusted to pass 4.5:1 on surface. Use it for links and coloured text.
- **Deep periwinkle (`secondary`, #4655D4):** Supporting colour for secondary actions, navigation accents and illustrations.
- **`on-secondary` (#FFFFFF):** Text and icons placed on secondary.
- **Paper (`surface`, #FFFFFF):** Page background.
- **`surface-variant` (#F7F8FF):** Panels, cards and alternating sections.
- **Ink (`on-surface`, #231F20):** Headlines and body text.
- **`on-surface-variant` (#696767):** Secondary text: captions, helper text, metadata.
- **`outline` (#DCDBDB):** Borders, dividers and input outlines.
- **`error` (#B42318):** Errors and destructive actions only.
- **`on-error` (#FFFFFF):** Text on error.

## Typography

Headings use **Space Grotesk** at weight 600 with slightly tight letter spacing. Body text uses **Inter** at 16px with a 1.6 line height. **JetBrains Mono** is used for labels, numbers and code. Arabic text uses **IBM Plex Sans Arabic** with a taller 1.8 line height.

Sizes follow a 1.25 modular scale from a 16px base: headline-display 49px, headline-lg 39px, headline-md 31px, headline-sm 25px, body-lg 20px, body-md 16px, body-sm 14px.

- Use one headline-display per page at most, usually in the hero.
- Keep body text left-aligned (right-aligned in Arabic) with lines of 60-75 characters.
- Use label-md for buttons and form labels; label-sm for tags and metadata.

## Layout

Layouts are **spacious**. Whitespace is a brand asset: use `lg` and `xl` between sections and never crowd a screen.

Use a 12-column grid on desktop (max content width 1200px, 32px gutters) and a 4-column grid on mobile with 24px side margins. Every margin, gap and padding comes from the spacing scale.

## Elevation & Depth

Depth uses **tonal layers** instead of heavy shadows. The page is `surface`; grouped content sits on `surface-variant` panels; a 1px `outline` border separates layers when tones are close.

## Shapes

The shape language uses **pill-shaped controls**: buttons, tags and chips are fully rounded; cards use 20-28px radii.

Buttons use `rounded.full`, inputs `rounded.md`, cards `rounded.lg` and badges `rounded.full`.

## Components

- **Buttons:** Primary buttons are solid primary with on-primary text and lighten to primary-hover on hover. Secondary buttons are solid secondary. Minimum touch target 44px tall.
- **Cards:** surface-variant background, rounded.lg corners, spacing.lg padding. One clear heading per card.
- **Inputs:** surface background, 1px outline border that turns primary on focus, label above the field in label-md, helper text in on-surface-variant.
- **Links:** primary-strong text with an underline; never rely on colour alone.
- **Badges:** primary background, label-sm text, fully rounded.
- **Focus:** every interactive element shows a visible 2px focus ring in primary-strong.

## Do's and Don'ts

- Do use primary for the single most important action on each screen
- Do keep text at WCAG AA contrast or better (4.5:1 for body text, 3:1 for large text)
- Do use Space Grotesk only for headings and Inter for everything people read
- Do take every colour, size, radius and spacing value from the tokens in this file
- Do put on-primary (dark) text on primary buttons; white text on primary fails contrast
- Do set Arabic text in IBM Plex Sans Arabic and mirror layouts (right to left) on Arabic pages
- Do use periwinkle for one key highlight per section, not for body text
- Don't invent new colours, shadows or font sizes that aren't in this file
- Don't mix rounded and sharp corners in the same view
- Don't use generic AI-template styling: purple-to-blue gradients, glassmorphism cards, sparkle icons or floating 3D blobs
- Don't use emoji in headings, buttons or navigation
- Don't put text on photos without a solid panel behind it

<!-- Made with the free DESIGN.md generator by Theepa Studio: https://theepa.studio/tools/design-md-generator/ -->