Brand Identity School design system

---
version: alpha
name: Brand Identity School
description: "Light interface measured from brandidentityschool.com: Instrument Sans type, deep red accents, flat surfaces and pill-shaped controls."
colors:
  background: "#F1E8D6"
  surface: "#F1E8D6"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#2F1913"
  primary: "#570406"
  on-primary: "#FFFFFF"
  secondary: "#C9AD8C"
  tertiary: "#6C1A26"
typography:
  body-md:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
  body-lg:
    fontFamily: Instrument Sans
    fontSize: 19px
    fontWeight: 700
  label-md:
    fontFamily: Instrument Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.005em
rounded:
  full: 9999px
spacing:
  sm: 6.49px
  md: 12px
  lg: 18.72px
  gutter: 12px
components:
  button-outline:
    backgroundColor: "#F6E7CF"
    textColor: "#F6E7CF"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 8px 0px
    height: 32px
  button-ghost:
    textColor: "#F6E7CF"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 8px 0px
---

# Brand Identity School Design System

## Overview

Brand Identity School describes itself as: “Every identity begins with a single idea. A school for brand identity by Shefali × Designare, now registering its founding cohort.” The interface is light, built on **Pale Amber (#F1E8D6)** with **Near Black (#000000)** text, and **Deep Red (#570406)** as the main accent.

Type is set in **Instrument Sans**. Headlines run large; body text is 16px. The surface language is flat. Controls are pill-shaped.

Measured from [brandidentityschool.com](https://www.brandidentityschool.com/) on November 4, 2026 at 1440×900 and 390×844 from 112 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles.

- **Pale Amber (#F1E8D6):** Page background, seen 1 time. Token `background`, CSS `--bg`.
- **Near Black (#000000):** Primary text and headings, seen 43 times. Token `on-surface`.
- **Deep Red (#2F1913):** Secondary text, seen 3 times. Token `on-surface-variant`, CSS `--fg`.
- **Deep Red (#570406):** Brand color in logos and imagery. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Orange (#C9AD8C):** Accent on large areas. Token `secondary`.
- **Dark Red (#6C1A26):** Accent on large areas. Token `tertiary`.

## Typography

**Instrument Sans** carries the whole interface. Fallback stack: `Instrument Sans, Helvetica Neue, Arial, sans-serif`. Other loaded fonts: DM Serif Display, Imperial Script.

- **body-md:** Instrument Sans 16px at weight 400. Body text.
- **body-lg:** Instrument Sans 19px at weight 700. Lead paragraphs.
- **label-md:** Instrument Sans 14px at weight 500, line height 1, tracking 0.005em. Buttons, navigation and labels.

## Layout

Spacing does not follow a strict grid: 9% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** sm 6.49px, md 12px, lg 18.72px.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Breakpoints:** 719px, 720px, 1079px, 1080px, 1279px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-outline (“Register Now”):** #F6E7CF fill, #F6E7CF text, 16px/500, padding 8px 0px.
- **button-ghost (“Register Now”):** transparent fill, #F6E7CF text, 16px/500, padding 8px 0px.

## Do's and Don'ts

- Do use #F1E8D6 for the page.
- Do keep text in 2 levels: #000000, #2F1913.
- Do use #570406 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (6.49px, 12px, 18.72px).
- Do make buttons and chips fully rounded (9999px).
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Instrument Sans.
- Don't use #570406 for large backgrounds or body text.
- Don't make interface transitions slower than 0.45s.

## Motion

Interface transitions are quick: 0.45s, 0.35s.

- **Easing:** `cubic-bezier(0.55, 0, 0.8, 0.2)`, `cubic-bezier(0.3, 1.4, 0.5, 1)`, `cubic-bezier(0.3, 0.7, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/brandidentityschool.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).