# amra — Design System
> A global music royalty licensing and administration platform.
- **Canonical:** https://uiuxskills.com/library/amra
- **Source:** https://www.amra.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 76%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:20.939Z

---

---
version: alpha
name: amra
description: A global music licensing and royalty administration platform.
tone: Professional, transparent, and direct.
color-scheme: light
colors:
  primary: "#ACAFFF"
  on-surface: "#141414"
  surface: "#FFFFFF"
  surface-container: "#FAFBFB"
  outline: "#D0D0D0"
  error: "#900C3F"
  success: "#28A745"
  warning: "#FFC107"
  info: "#17A2B8"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Arial
    fontSize: 50px
    fontWeight: 700
  display-md:
    fontFamily: Arial
    fontSize: 37.5px
  headline-lg:
    fontFamily: Arial
    fontSize: 30px
    fontWeight: 700
  headline-md:
    fontFamily: Arial
    fontSize: 24px
  headline-sm:
    fontFamily: Arial
    fontSize: 20px
    fontWeight: 700
  body-md:
    fontFamily: Arial
    fontSize: 16px
    fontWeight: 400
  label-sm:
    fontFamily: Arial
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 128px
components:
  button-primary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    width: auto
    borderColor: "{colors.outline}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    width: auto
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field:
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  link:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  duration-long: 500ms
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.1)
  md: 0 4px 6px rgba(0, 0, 0, 0.1)
  lg: 0 10px 15px rgba(0, 0, 0, 0.1)
---

## Overview

Amra provides a modern, transparent interface for music industry professionals to manage global royalties. The visual identity is clean, professional, and minimalist, focusing on clarity and trust through a restrained color palette and ample whitespace.

## Colors

The color strategy focuses on high contrast and accessibility, utilizing a neutral palette for structure and a specific accent color for interaction.

*   **Primary (#ACAFFF):** The core brand accent used for primary interactive elements and links.
*   **On-surface (#141414):** The primary text color, providing high contrast against white backgrounds.
*   **Surface (#FFFFFF):** The primary background color for the application.
*   **Surface-container (#FAFBFB):** A subtle secondary background used for cards and secondary buttons.
*   **Outline (#D0D0D0):** The standard border color for input fields, dividers, and buttons.
*   **Error (inferred) (#900C3F):** Semantic color for error states.
*   **Success (inferred) (#28A745):** Semantic color for success states.
*   **Warning (inferred) (#FFC107):** Semantic color for warning states.
*   **Info (inferred) (#17A2B8):** Semantic color for informational elements.
*   **On-primary (inferred) (#FFFFFF):** Text color for elements placed on primary-colored backgrounds.

## Typography

The typography system relies exclusively on the Arial font family to maintain a clean, readable, and neutral professional aesthetic.

*   **Display-lg:** Used exclusively for main hero headlines.
*   **Display-md (inferred):** Secondary display level for large-scale text.
*   **Headline-lg:** Standard section headers.
*   **Headline-md (inferred):** Mid-level section headers.
*   **Headline-sm:** Sub-headers for grouping content.
*   **Body-md:** Standard paragraph text.
*   **Label-sm (inferred):** Small labels, metadata, and button text.

## Layout

The site utilizes a centered container layout with generous whitespace to ensure content remains scannable. The grid is responsive, collapsing sections vertically on smaller screens. The section order follows a logical flow: nav, hero, features, stats, blog-feed, and footer. The hero pattern centers the headline and subhead to establish a minimalist, focused entry point. Spacing follows a scale where `{spacing.md}` (16px) is the standard gutter, and larger increments like `{spacing.lg}` and `{spacing.xl}` are used to separate major content blocks.

## Elevation & Depth

Elevation is used sparingly to define hierarchy, relying on subtle single-layer shadows.

*   **elevation.sm:** Used for slight separation of elements.
*   **elevation.md:** The standard lift for interactive cards and floating elements.
*   **elevation.lg:** Reserved for modal, drawer, or high-priority overlays.

## Shapes

The shape language is defined by a clear distinction between interactive controls and content containers. Buttons utilize a pill-shaped radius (`{rounded.xl}`) to signify action, while content cards use a softer, standard radius (`{rounded.md}`) to maintain a clean, structured appearance.

## 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
These buttons feature a transparent background with an `{colors.outline}` border and `{colors.on-surface}` text. Use these for the main action on a page; they rely on `{typography.label-sm}` for the label.

### Button Secondary
These buttons use a `{colors.surface-container}` background to differentiate them from the primary action. They are best used for secondary tasks where the primary button would be too visually dominant.

### Card
The card component uses a `{colors.surface}` background with a `{colors.outline}` border and `{rounded.md}` corners. Use these to group related content or features; they should not carry heavy shadows.

### Badge
Badges are used for status or categorization. The base badge uses `{colors.primary}` with `{colors.on-primary}` text. Semantic variants (error, success, warning, info) follow the same anatomy but use specific background colors.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action links. | Do not use `{colors.primary}` for body text. |
| Apply `{typography.display-lg}` for hero headlines only. | Avoid using `{typography.display-lg}` for secondary headers. |
| Use `{rounded.xl}` for all primary buttons. | Do not use `{rounded.full}` on standard content cards. |
| Maintain consistent `{spacing.md}` between content blocks. | Do not mix different font families; stick to Arial. |
| Use `{colors.on-surface}` for all body text. | Avoid using `{colors.error}` for non-destructive actions. |
| Use `{colors.outline}` for subtle dividers between sections. | Do not apply heavy shadows to flat content cards. |
| Use `{card}` for grouping related information. | Do not use `{badge-error}` for informational labels. |
| Apply `{input-field}` for all form data entry. | Do not use `{colors.primary}` as a background for text. |

## Content Style

CTA labels are action-oriented and use imperative verbs (e.g., "Explore the platform"). Keep labels concise and focused on the outcome.

Headings should be direct and benefit-driven. Avoid abstract marketing language; focus on what the user gains or achieves by interacting with the section.

Paragraphs should be kept short and scannable. Use bulleted lists to break up dense information and maintain a rhythm that allows the user to digest the content quickly.

## Imagery & Icons

The brand utilizes a minimal-icon style. Imagery should be high-quality and clean, often paired with soft gradients to maintain a modern, professional feel. Avoid overly complex illustrations; prioritize clarity and direct visual communication.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Amra, a global music licensing and royalty administration platform with a minimal, professional tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name (`{colors.primary}`, `{typography.body-md}`, `{spacing.md}`) — never hardcode hex values, pixel sizes, or raw font weights.
2. Use only components defined under `components:`. Buttons, cards, badges, inputs, and dividers have exact token assignments; do not invent variants or new component types.
3. Apply `{rounded.xl}` to all buttons. Apply `{rounded.md}` to cards and input fields. Do not deviate from these assignments.
4. Consult the Do's and Don'ts table before generating any element. If a user's request conflicts with a rule in that table, surface the conflict before proceeding.
5. Follow the Layout narrative: centered container, `{spacing.md}` as the standard gutter, `{spacing.lg}` and `{spacing.xl}` to separate major content blocks.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for interactive elements where the spec defines them.
- Apply `{elevation.md}` to interactive cards; reserve `{elevation.lg}` for modals and overlays.
- Write CTAs using action-oriented imperative verbs, concise and outcome-focused, per the Content Style section.
- Use `{typography.display-lg}` only for hero headlines.

**Must NOT:**
- Invent colors, radii, font sizes, or spacing values outside the spec.
- Use generic utility defaults when a brand token exists.
- Apply `{colors.primary}` as a background for text or as a body text color.
- Apply heavy shadows to flat content cards.
- Mix in any font family other than Arial.
- Rewrite, replace, or invent page copy, headings, navigation items, or content hierarchy.

## When in doubt
- If the spec doesn't define a value for a situation, ask the user before inventing one.
- Prefer composing existing spec components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- Tokens marked "(inferred)" in the spec are visual approximations. If an authoritative source exists, those values take precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.