# Alexandra Căpitănescu design system

> Alexandra Căpitănescu design system measured from alexandracapitanescu.com: Times New Roman font, 12 color hex codes, type scale and spacing.

Canonical page: https://sitepeel.dev/design-md/alexandracapitanescu.com/en/

Alexandra Căpitănescu’s website (alexandracapitanescu.com) uses the Times New Roman font and #BA1818 as its main color on a #0B090A background. Measured by Sitepeel on November 5, 2026.

## What font does Alexandra Căpitănescu use?

Alexandra Căpitănescu uses Times New Roman (weight 400) and Arial (weight 400) on alexandracapitanescu.com. Page titles are 150px at weight 400 (56px on phones) and body text is 19px. Measured on November 5, 2026.

- Times New Roman (weights 400)
- Arial (weights 400)

## Alexandra Căpitănescu colors: palette and hex codes

Alexandra Căpitănescu’s main colors are #0B090A (near black) for the background, #E2D9D0 (light orange) for text and #BA1818 (red) as the main accent. Measured on November 5, 2026.

- #0B090A: near black
- #E2D9D0: light orange
- #ACA59E: warm gray
- #ABA196: orange
- #8C8681: warm gray
- #181415: charcoal
- #BA1818: red
- #FFFFFF: white

## What is Alexandra Căpitănescu built with?

Alexandra Căpitănescu’s website (alexandracapitanescu.com) is built with Next.js, React, Tailwind CSS and Cloudflare. Measured on November 5, 2026.

- JavaScript framework: Next.js 16.4.1, React 19.3.0-canary-278794d7-2
- Hosting & CDN: Cloudflare
- Analytics: Cloudflare Web Analytics
- UI & CSS: Tailwind CSS 4.x

## Questions and answers

### What font does Alexandra Căpitănescu use?

Alexandra Căpitănescu’s website uses Times New Roman (weight 400) and Arial (weight 400). Page titles are 150px at weight 400 (56px on phones) and body text is 19px. Measured on November 5, 2026.

### What are the Alexandra Căpitănescu colors and hex codes?

On alexandracapitanescu.com: #0B090A (near black) for the background, #E2D9D0 (light orange) for text and #BA1818 (red) as the main accent. The color palette above lists all 12 colors with their hex codes and where each one is used.

### What is the Alexandra Căpitănescu design system?

The design system on this page is alexandracapitanescu.com’s, as measured on November 5, 2026: Times New Roman type, #BA1818 as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Alexandra Căpitănescu’s own documentation.

### What is Alexandra Căpitănescu built with?

Alexandra Căpitănescu’s website (alexandracapitanescu.com) is built with Next.js, React, Tailwind CSS and Cloudflare. The full tech stack Sitepeel found: Next.js, React, Cloudflare, Cloudflare Web Analytics and Tailwind CSS. Measured on November 5, 2026.

### What is the Alexandra Căpitănescu DESIGN.md?

A plain-text file with Alexandra Căpitănescu’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Alexandra Căpitănescu’s official design system?

No. Sitepeel measured it from alexandracapitanescu.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by Alexandra Căpitănescu.

### Can I use Alexandra Căpitănescu’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Alexandra Căpitănescu’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/alexandracapitanescu.com/en/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Alexandra Căpitănescu.

## The DESIGN.md file

```markdown
---
version: alpha
name: Alexandra Căpitănescu
description: "Dark interface measured from alexandracapitanescu.com: Times New Roman type with Arial, red accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#0B090A"
  surface: "#0B090A"
  on-surface: "#E2D9D0"
  on-background: "#E2D9D0"
  on-surface-variant: "#ACA59E"
  on-surface-muted: "#ABA196"
  on-surface-subtle: "#8C8681"
  surface-container-low: "#181415"
  overlay: "#0B090A40"
  overlay-strong: "#E2D9D04D"
  outline: "#E2D9D02E"
  outline-variant: "#E2D9D04D"
  primary: "#BA1818"
  on-primary: "#FFFFFF"
typography:
  headline-display:
    fontFamily: Times New Roman
    fontSize: 150px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Times New Roman
    fontSize: 57.5px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Times New Roman
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.046em
  headline-sm:
    fontFamily: Times New Roman
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
  body-md:
    fontFamily: Times New Roman
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.02em
  body-sm:
    fontFamily: Arial
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.1em
  label-md:
    fontFamily: Arial
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: Arial
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.16em
  headline-display-mobile:
    fontFamily: Times New Roman
    fontSize: 56px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.035em
  headline-lg-mobile:
    fontFamily: Times New Roman
    fontSize: 34px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.02em
rounded:
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 40px
  gutter: 14px
  section: 80px
  container: 1440px
components:
  input-field:
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-sm}"
    rounded: 0px
    padding: 8px 0px 10px 0px
  card:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 16px
  link:
    textColor: "{colors.on-surface}"
---

# Alexandra Căpitănescu Design System

## Overview

Alexandra Căpitănescu describes itself as: “Romanian artist Alexandra Căpitănescu and her band blend alternative rock, raw emotion and explosive live energy.” The interface is dark, built on **Near Black (#0B090A)** with **Light Orange (#E2D9D0)** text, and **Red (#BA1818)** as the main accent.

Type is set in **Times New Roman** and **Arial**. Headlines run large with tight negative tracking; body text is 19px. Depth comes from soft drop shadows. Controls are pill-shaped.

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

## Colors

The palette has 12 roles.

- **Near Black (#0B090A):** Page background, seen 17 times. Token `background`, CSS `--color-ink`.
- **Light Orange (#E2D9D0):** Primary text and headings, seen 47 times. Token `on-surface`, CSS `--color-cream`.
- **Warm Gray (#ACA59E):** Secondary text, seen 3 times. Token `on-surface-variant`.
- **Orange (#ABA196):** Muted text and metadata, seen 14 times. Token `on-surface-muted`.
- **Warm Gray (#8C8681):** Subtle text and placeholders, seen 4 times. Token `on-surface-subtle`.
- **Charcoal (#181415):** Raised areas one step from the page, seen 5 times. Token `surface-container-low`.
- **Near Black 25% (#0B090A40):** Translucent fill for cards and controls, seen 8 times. Token `overlay`.
- **Light Orange 30% (#E2D9D04D):** Stronger translucent fill, seen 2 times. Token `overlay-strong`.
- **Light Orange 18% (#E2D9D02E):** Borders and dividers, seen 16 times. Token `outline`.
- **Light Orange 30% (#E2D9D04D):** Secondary dividers, seen 3 times. Token `outline-variant`.
- **Red (#BA1818):** Most used accent color, seen 28 times. Token `primary`, CSS `--color-red`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.

## Typography

**Times New Roman** and **Arial** share the interface. Fallback stack: `Times New Roman, Times, serif`.

- **headline-display:** Times New Roman 150px at weight 400, line height 0.9, tracking -0.035em (56px on mobile). Page title (h1).
- **headline-lg:** Times New Roman 57.5px at weight 400, line height 0.95, tracking -0.02em, uppercase (34px on mobile). Section headings (h2).
- **headline-md:** Times New Roman 42px at weight 400, line height 1, tracking -0.046em. Sub-section headings.
- **headline-sm:** Times New Roman 22px at weight 400, line height 1.3. Card and feature titles.
- **body-md:** Times New Roman 19px at weight 400, line height 1, tracking 0.02em. Body text.
- **body-sm:** Arial 11px at weight 400, line height 1.5, tracking 0.1em. Secondary and small text.
- **label-md:** Arial 16px at weight 400, line height 1.5. Buttons, navigation and labels.
- **label-sm:** Arial 12px at weight 400, line height 1.2, tracking 0.16em, uppercase. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, sm 8px, md 12px, lg 20px, xl 40px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 14px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1440px.
- **Breakpoints:** 479px, 559px, 560px, 599px, 700px, 767px, 768px, 899px, 900px, 1000px, 1100px, 1440px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.55) 0px 24px 60px 0px`

## Shapes

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

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

## Components

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

- **input-field:** transparent fill, #E2D9D0 text, 22px/400, padding 8px 0px 10px 0px.
- **card:** #E2D9D0 fill, #0B090A text, 16px/400, padding 16px.
- **link:** transparent fill, #E2D9D0 text, padding 0px.

## Do's and Don'ts

- Do use #0B090A for the page and lift surfaces in small steps: #181415.
- Do keep text in 4 levels: #E2D9D0, #ACA59E, #ABA196, #8C8681.
- Do reserve #BA1818 for primary actions and key highlights.
- Do set headlines in Times New Roman with tight tracking (-0.035em).
- Do reuse the measured spacing steps (8px, 12px, 20px).
- Do make buttons and chips fully rounded (9999px).
- Don't introduce new font families beyond Times New Roman and Arial.
- Don't use #BA1818 for large backgrounds or body text.
- Don't make interface transitions slower than 0.6s.

## Motion

Interface transitions are quick: 0.6s, 0.25s, 0.5s, 0.3s. Longer ambient animations run 1s, 0.8s, 1.2s.

- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`, `ease`, `ease-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```