North star · Keep the login form calm and central, using navy for action, coral for links, and illustrations as supporting accents.
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.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Deep Indigo主文字 · Midnight Ink次要文字 · Soft Graphite描边 · Quiet Silver强调 · Signal Coral
文字
背景
对比度
WCAG
#0a042d Midnight Ink
#ffffff Gallery White
19.66:1
AAA
#0a042d Midnight Ink
#090335 Deep Indigo
1.01:1
不达标
#858796 Soft Graphite
#ffffff Gallery White
3.56:1
AA-large
#858796 Soft Graphite
#090335 Deep Indigo
5.49:1
AA
#fe7268 Signal Coral
#ffffff Gallery White
2.69:1
不达标
#fe7268 Signal Coral
#090335 Deep Indigo
7.27:1
AAA
字体
字号阶梯：Custom（比例约 2.563，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
gilroy
网络字体 · 字重 400 / 600 / 700 · 占比 88%
免费替代：Nunito Sans
Body copy, form controls, links, and navigation text.
Aa 设计
Georgia
网络字体 · 字重 700 · 占比 12%
免费替代：Lora
Login page heading.
角色
示例
字号
字重
行高
字距
一级标题
Centered “Log In” page heading.
Audacy
41px
700
1.44
0
正文
Form text and supporting account prompt.
The quick brown fox 敏捷的狐狸
16px
400
1.75
0
辅助文字
Compact secondary labels and supporting text.
The quick brown fox 敏捷的狐狸
12px
600
1.75
0.05em
链接
Password recovery link.
The quick brown fox 敏捷的狐狸
12px
600
1.75
0.05em
间距与布局
基准单位 4px · 密度：适中
47px版块间距
—元素间距
—卡片内边距
1105px内容最大宽度
8px
10px
16px
18px
20px
24px
27px
34px
40px
47px
73px
125px
131px
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.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
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.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
Pair a Georgia heading with Gilroy-style sans text.
Treat illustrations as supporting decoration.
✕ 不该做
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.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
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.
