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

# Audacy — Creator Lab Login · Design System

> A calm, illustrated gateway for creators

**Theme:** light · **Industry:** media · **Source:** https://app.creators.audacy.com/login · **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._

Audacy Creator Lab pairs a quiet login form with playful hand-drawn creator illustrations. A restrained palette and generous white space keep the account task clear and approachable.

## North star

Keep the login form calm and central, using navy for action, coral for links, and illustrations as supporting accents.

## Overview

The page uses a white canvas as its dominant visual field, allowing the compact login experience to feel open rather than app-heavy. Deep navy anchors the title and full-width primary button, while coral is reserved for small account links; muted gray supports secondary text and pale gray outlines the inputs. The heading is a bold Georgia serif, giving the otherwise rounded, contemporary Gilroy sans-serif interface a modest editorial accent. The form sits in a centered, single-column composition, with the Audacy and Creator Lab marks tucked near the upper-left edge. Hand-drawn illustrations flank the form and add color and personality without competing with its controls. The overall treatment stays flat: rectangular fields, crisp borders, no visible shadows, and generous separation between the major elements.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and open space surrounding the login form and illustrations. |
| Signal Coral | `#fe7268` | `--color-signal-coral` | accent | Small account links, including password recovery and sign-up actions. |
| Soft Graphite | `#858796` | `--color-soft-graphite` | neutral | Muted supporting copy, including the prompt beneath the primary button. |
| Quiet Silver | `#dcdde1` | `--color-quiet-silver` | semantic | Thin input outlines that define fields without adding visual weight. |
| Midnight Ink | `#0a042d` | `--color-midnight-ink` | brand | Login heading and other primary interface text. |
| Deep Indigo | `#090335` | `--color-deep-indigo` | surface | Solid primary login button surface with white button text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#090335` (Deep Indigo) · `--color-text` → `#0a042d` (Midnight Ink) · `--color-text-muted` → `#858796` (Soft Graphite) · `--color-border` → `#dcdde1` (Quiet Silver) · `--color-accent` → `#fe7268` (Signal Coral)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a042d` | `#ffffff` | 19.66:1 | AAA |
| `#0a042d` | `#090335` | 1.01:1 | fail |
| `#858796` | `#ffffff` | 3.56:1 | AA-large |
| `#858796` | `#090335` | 5.49:1 | AA |
| `#fe7268` | `#ffffff` | 2.69:1 | fail |
| `#fe7268` | `#090335` | 7.27:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| gilroy | `--font-body` | webfont | 400, 600, 700 | Body copy, form controls, links, and navigation text. | Nunito Sans |
| Georgia | `--font-display` | webfont | 700 | Login page heading. | Lora |

- **gilroy:** Use a clean rounded sans feel; measured weights include 400, 600, and 700. Small links are semibold.
- **Georgia:** Bold serif headline provides a distinct editorial contrast against the sans-serif interface.

### Type scale — Custom (ratio ≈ 2.563, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 41px | 700 | 1.44 | 0 | — | Georgia | Centered “Log In” page heading. |
| body | 16px | 400 | 1.75 | 0 | — | gilroy | Form text and supporting account prompt. |
| caption | 12px | 600 | 1.75 | 0.05em | — | gilroy | Compact secondary labels and supporting text. |
| link | 12px | 600 | 1.75 | 0.05em | — | gilroy | Password recovery link. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 8, 10, 16, 18, 20, 24, 27, 34, 40, 47, 73, 125, 131 px.
- Section rhythm 47px · element gap — · card padding — · max content width 1105px.

A single-page, single-column login section sits within a broad white canvas. The form and heading are centered, with the form occupying a modest portion of the viewport; the measured page max width is 1105px. A small brand lockup sits near the upper-left, while illustrations flank the central form rather than forming a rigid grid. Spacing feels comfortable and open, with clear separation between heading, fields, button, and sign-up prompt. Keep the page visually light and avoid adding dense sections.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadows. Inputs use thin, light-gray borders, and the primary button is a solid dark rectangle. Avoid floating cards or layered panels; the illustration and form sit directly against the white canvas.

## Imagery

Use flat, hand-drawn editorial illustrations rather than photography or 3D. Place character scenes on both sides of the login form, with navy outlines and small coral, yellow, and blue accents. Keep the artwork secondary in scale and visual weight; these colors belong to the illustrations, not the measured interface palette.

## Components

### Brand lockup

Place the Audacy mark above a thin outlined Creator Lab label near the upper-left of the page.

### Page heading

Center “Log In” above the form in a bold Georgia serif, using deep navy.

### Credential fields

Use two full-width rectangular inputs with white fills, 1px #dcdde1 borders, and Gilroy text.

### Password recovery link

Set “Forgot Password?” beneath the password field in compact semibold coral text.

### Primary login button

Use a full-width #090335 button with white “Log Into Account” text and square corners.

### Sign-up prompt

Center muted supporting text below the button and emphasize “Sign Up” in coral.

### Flanking illustrations

Balance the form with playful hand-drawn scenes on either side, leaving clear space around controls.

### Measured component styles

- **Primary button** (“Log Into Account”): background #090335 · text #ffffff · border 2px solid · radius 0px · padding 18px 20px · 500 15px gilroy
- **Link** (“Forgot Password?”): transparent background · text #fe7268 · radius 0px · padding 0px · 600 12px gilroy
- **Input**: transparent background · text #0a042d · border 1px solid #dcdde1 · radius 0px · padding 16px 24px · 400 16px gilroy
- **Navigation item**: transparent background · text #0a042d · radius 0px · padding 0px · 400 16px gilroy

## Do

- Keep the canvas predominantly white.
- Center the login heading and form.
- Use #090335 for the primary action.
- Reserve #fe7268 for account links.
- Pair a Georgia heading with Gilroy-style sans text.
- Treat illustrations as supporting decoration.

## Don't

- Do not add gradients or shadows.
- Do not wrap the form in a raised card.
- Do not use coral as a large background.
- Do not let illustrations overlap form controls.
- Do not replace the simple layout with dense navigation.
- Do not introduce rounded, pill-shaped controls.

## Agent prompt

Build a new page in the Audacy Creator Lab login style: use a dominant white canvas (#ffffff), a compact upper-left brand lockup, and a centered single-column content area. Pair a bold Georgia-style serif heading in Midnight Ink (#0a042d) with Gilroy-like sans-serif copy and controls. Use white rectangular fields with thin Quiet Silver (#dcdde1) borders, then a full-width Deep Indigo (#090335) primary button with white text. Keep Signal Coral (#fe7268) for small links and Soft Graphite (#858796) for muted supporting copy. Favor generous open space and a flat, border-led treatment without shadows or cards. If decorative artwork is appropriate, use playful hand-drawn illustrations around the content, keeping them subordinate and clear of interactive elements.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Single-column centered form, with a small brand lockup above-left and illustrations flanking the content. | Email and password entry, Password recovery link, Sign-up route | Serif centered heading, Outlined rectangular fields, Full-width dark CTA, Coral text links |

## Source CSS custom properties (selected)

```css
--dp-animation-duration: .1s;
--dp-border-radius: 4px;
--dp-cell-border-radius: 4px;
--dp-multi-calendars-spacing: 10px;
--dp-font-size: 1rem;
--dp-preview-font-size: .8rem;
--dp-time-font-size: 2rem;
--swiper-theme-color: #007aff;
--vc-font-normal: 400;
--vc-font-medium: 500;
--vc-font-semibold: 600;
--vc-font-bold: 700;
--vc-text-2xs: 10px;
--vc-text-xs: 12px;
--vc-text-sm: 14px;
--vc-text-base: 16px;
--vc-text-lg: 18px;
--vc-text-xl: 20px;
--vc-text-2xl: 24px;
--vc-rounded: .25rem;
--vc-rounded-md: .375rem;
--vc-rounded-lg: .5rem;
--vc-rounded-full: 9999px;
--vc-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
--vc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
--vc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
--vc-slide-duration: .15s;
--plyr-color-main: #00b2ff;
--plyr-font-size-base: 13px;
--plyr-font-size-small: 12px;
--plyr-font-size-time: 11px;
--plyr-font-size-badges: 9px;
--plyr-font-size-menu: 13px;
--plyr-font-weight-regular: 500;
--plyr-font-weight-bold: 600;
--plyr-font-size-captions-medium: 18px;
--plyr-font-size-captions-large: 21px;
```

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