---
title: "amra design system"
variant: extended
source: https://www.amra.com/
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/amra-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# amra · Design System

> Quiet clarity for global music royalties

**Theme:** light · **Industry:** media · **Source:** https://www.amra.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

amra pairs a restrained, near-white canvas with generous space and concise editorial typography. Vivid music imagery and a softly colored 3D sphere add energy while keeping the interface calm and legible.

## North star

Keep the interface quiet and spacious; let concise dark typography and vivid music imagery provide the contrast.

## Overview

The page is built around a bright, nearly white canvas, with dark near-black headlines and muted gray supporting copy creating a clear reading hierarchy. Lavender is reserved for small, high-visibility actions such as the sign-in pill; pale gray outlines define secondary actions without adding visual weight. Typography is lightweight and unhurried: large centered hero copy gives way to compact uppercase navigation and button labels. The layout uses broad, single-column stretches and substantial vertical pauses, then shifts to side-by-side text and media for selected content. Photography is vivid and cinematic, often framed in rounded rectangles, while a large luminous sphere and a fine wireframe globe provide distinctive visual anchors. Most sections remain flat and shadowless, so imagery, whitespace, and subtle hairlines—not card elevation—create structure.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Mist Canvas | `#f3f4f5` | `--color-mist-canvas` | surface | Soft gray backing for song and activity cards; the broad page canvas reads as white in the screenshots. |
| Midnight Ink | `#141414` | `--color-midnight-ink` | brand | Primary headings, navigation, body text, and text on the lavender sign-in button. |
| Quiet Gray | `#838484` | `--color-quiet-gray` | neutral | Muted supporting copy, including the hero subheading and explanatory text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page background and the clean field surrounding sections and imagery. |
| Fine Silver | `#d0d0d0` | `--color-fine-silver` | semantic | Thin outline on the secondary platform-exploration action. |
| Lavender Signal | `#acafff` | `--color-lavender-signal` | accent | Filled sign-in pill and small accent details on secondary calls to action. |
| Pale Graphite | `#a1a1a1` | `--color-pale-graphite` | neutral | Minor muted text detail; not a defining page-wide color. |

### Semantic aliases

`--color-canvas` → `#f3f4f5` (Mist Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#141414` (Midnight Ink) · `--color-text-muted` → `#838484` (Quiet Gray) · `--color-border` → `#d0d0d0` (Fine Silver) · `--color-accent` → `#acafff` (Lavender Signal) · `--color-on-accent` → `#141414` (Midnight Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141414` | `#f3f4f5` | 16.73:1 | AAA |
| `#141414` | `#ffffff` | 18.42:1 | AAA |
| `#838484` | `#f3f4f5` | 3.41:1 | AA-large |
| `#838484` | `#ffffff` | 3.75:1 | AA-large |
| `#acafff` | `#f3f4f5` | 1.85:1 | fail |
| `#acafff` | `#ffffff` | 2.03:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __primaryFont_fb23f9 | `--font-body` | webfont | 400 | Headings, body copy, and the larger contact-style navigation text. | Inter |
| __secondaryFont_85f780 | `--font-secondaryfont-85f780` | webfont | 400 | Uppercase navigation, buttons, and compact song or activity labels. | DM Sans |

- **__primaryFont_fb23f9:** Regular weight; keep letter spacing subtly tight on headings, body, and navigation. Avoid heavy bolding.
- **__secondaryFont_85f780:** Regular weight; uppercase controls use visibly tracked lettering. Use sparingly for small interface labels.

### Type scale — Golden Ratio (ratio ≈ 1.581, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 50px | 400 | 1.2 | 0 | — | __primaryFont_fb23f9 | Centered hero headline introducing global royalty administration. |
| h2 | 30px | 400 | 1.2 | -0.01em | — | __primaryFont_fb23f9 | Section headings for benefits and platform coverage. |
| body | 20px | 400 | 1.2 | -0.01em | — | __primaryFont_fb23f9 | Explanatory copy beside feature imagery and audience sections. |
| caption | 10px | 400 | 1 | -0.01em | — | __primaryFont_fb23f9 | Compact metadata and fine-print labels. |
| button | 14px | 400 | 1 | 0.029em | uppercase | __secondaryFont_85f780 | Uppercase labels on sign-in and platform exploration actions. |
| nav | 20px | 400 | 1.2 | -0.01em | — | __primaryFont_fb23f9 | Primary navigation and larger contact text. |
| eyebrow | 5px | 400 | 1 | 0.03em | uppercase | __secondaryFont_85f780 | Small uppercase labels above press and editorial items. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 8, 12 px.
- Section rhythm 160px · element gap 8px · card padding 6px · max content width 1152px.

A spacious, centered composition with a measured maximum content width of 1152px. The header places the wordmark, uppercase navigation, and sign-in action across one line. The hero is centered, while later sections alternate broad full-bleed media with two-column text-and-image layouts. Sections have pronounced vertical separation; content density stays low, and alignment shifts between centered hero or statistics and left-aligned editorial content. Use measured spacing relationships rather than compressing the large pauses.

## Shape & elevation

- Radius: button `9999px` · card `20px` · nav `8px` · xs `8px` · sm `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease` on interactive elements.

The interface is predominantly flat, with no measured shadows. Use white space and occasional fine gray outlines to separate content, not stacked panels. Rounded cards and pill-shaped actions provide the main depth cues; imagery and the sphere create visual layering without UI drop shadows.

## Imagery

Imagery is central to the page: cinematic musician and artist photography, platform-related media, and a large softly luminous 3D sphere. A fine wireframe globe supports the worldwide-coverage message. Images are typically rectangular with rounded corners, while song artwork and moving content appear as small chips. Keep photography colorful and high contrast; treat these colors as image content, not the brand palette.

## Components

### Header navigation

Single-line wordmark, uppercase links, and a right-aligned lavender SIGN IN pill; preserve the quiet white header.

### Hero statement

Centered large headline with a lighter gray supporting statement beneath it, followed by generous space for the hero media.

### Platform exploration action

Uppercase secondary action with a thin #d0d0d0 outline, dark text, and a rounded pill silhouette.

### Song activity card

Compact music or territory metadata card on a #f3f4f5 backing, with small media details and rounded treatment.

### Audience feature split

Left-aligned heading and muted explanatory copy paired with a large rounded image; separate adjacent rows with a fine hairline.

### Editorial cards

Press and interview entries combine concise uppercase category labels, short headlines, and image-led card surfaces.

### Measured component styles

- **Primary button** (“SIGN IN”): background #acafff · text #141414 · radius 16px · padding 0px 12px · 400 14px __secondaryFont_85f780 · uppercase
- **Secondary button** (“EXPLORE THE PLATFORM”): transparent background · text #141414 · border 1px solid #d0d0d0 · radius 24px · padding 0px 16px · 400 14px __secondaryFont_85f780 · uppercase
- **Card** (“Rewrite The Stars ZAC EFFRON”): background #f3f4f5 · text #141414 · radius 20px · padding 4px 12px 4px 4px · 400 16px __secondaryFont_85f780
- **Navigation item** (“PLATFORM COMPANY INSIGHTS CONTACT”): transparent background · text #141414 · radius 0px · padding 0px · 400 14px __secondaryFont_85f780 · uppercase

## Do

- Use a white-dominant canvas and reserve #acafff for small actions.
- Keep headline and body typography regular-weight and easy to scan.
- Preserve generous vertical pauses between major sections.
- Pair concise copy with cinematic music-related imagery.
- Use muted gray for supporting text, not primary headings.
- Favor flat surfaces, fine borders, and rounded action shapes.

## Don't

- Do not turn every section into a boxed card.
- Do not use saturated accent colors for large UI backgrounds.
- Do not compress the page into a dense dashboard.
- Do not use heavy bold typography or decorative display lettering.
- Do not add shadows that are absent from the measured design.
- Do not mistake colors inside photography or 3D artwork for UI palette colors.

## Agent prompt

Build a new amra page as a calm, editorial music-rights experience. Use Gallery White (#ffffff) as the dominant canvas, Midnight Ink (#141414) for headings and controls, Quiet Gray (#838484) for supporting copy, and Lavender Signal (#acafff) only for a restrained primary action. Set regular-weight typography with a clean sans-serif feel, compact tracked uppercase labels, and centered hero messaging. Maintain broad content areas and generous vertical pauses; alternate centered statements with left-aligned two-column text and image sections. Use cinematic music photography, rounded image framing, and, where appropriate, a luminous 3D or wireframe visual. Keep UI surfaces flat, use Fine Silver (#d0d0d0) for subtle outlines, and avoid heavy shadows, dense card grids, or excessive color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero statement beneath a single-line header. | Brand introduction, Primary navigation | Large centered headline, Muted subheading, Lavender sign-in pill |
| 2 | video | Full-bleed media area with a prominent central visual. | Play video, Explore brand story | Luminous sphere, Floating video control, Open white surroundings |
| 3 | feature-split | Single-column section with imagery and a vertically arranged benefits list. | Scan benefits, Read supporting details | Rounded music photograph, Short feature headings, Muted copy |
| 4 | product-showcase | Two-column composition with left-aligned copy and a large globe visual. | Explore platform, Inspect territory examples | Wireframe globe, Floating song labels, Outlined pill action |
| 5 | stats | Centered statement above horizontally moving song examples. | Review proof points, Browse song examples | Centered headline, Song chips, Artwork thumbnails |
| 6 | content-feed | Two-column editorial grid with image-led press and interview entries. | Open press coverage, Read interviews | Category eyebrow, Short headlines, Editorial imagery |
| 7 | feature-split | Text and rounded image arranged side by side. | Understand songwriter benefits | Left-aligned heading, Muted paragraph, Music portrait |
| 8 | feature-split | Text and product-oriented image arranged side by side. | Explore publisher offering | Left-aligned heading, Outlined action, Rounded platform image, Fine divider |
| 9 | cta | Brief centered invitation with a partial sphere emerging into view. | Invite platform exploration | Minimal text, Luminous sphere edge, Large white space |
| 10 | footer | Full-width closing band with compact inline links and media. | Open legal information, Navigate company links | Small uppercase links, Compact footer row, Low-profile media |

## Source CSS custom properties (selected)

```css
--color-white: #fff;
--color-white-rgb: 255,255,255;
--color-black: #141414;
--color-black-rgb: 20,20,20;
--color-purple: #acafff;
--color-purple-rgb: 172,175,255;
--color-green: #25564d;
--color-green-rgb: 37,86,77;
--color-grey: #f3f4f5;
--color-grey-rgb: 243,244,245;
--color-purple-light: #ebecff;
--color-black-on-white: #a1a1a1;
--color-white-on-black: #727272;
--color-black-on-purple: #676999;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/amra-com