/* =====================================================================
ANN TAYLOR DESIGN SYSTEM — site CSS v1 · 10/2026
Source: Figma "Ann Taylor Design System" (8pOHQX1ksS9rNq57drWeQY)
· Standard Fonts / Desktop Sizes (38:134, 47:1362) — Sofia Pro H1–H7
· Editorial Fonts (38:209) — Ethic Serif E1–E4
· Buttons Site (38:243) — Button CTA + Underline CTA
---------------------------------------------------------------------
HOW IT SCALES (fluid standard)
Every size is a multiple of --at-u, the same unit the g3 HP/PLP system uses:
mobile < 1024px : 1.56vw (= 6.08px on a 390 board)
desktop 1024–1679 : 0.95vw
desktop ≥ 1680 : 16px (= the Figma desktop board)
So each style hits Figma's px exactly at 390 and at 1680 and scales smoothly
between them. Because --at-u lives on :root, these classes do NOT depend on the
parent's font-size — they can't compound like em (the trio-caption problem).
USE
Typography : class="at-h1" … "at-h7" + modifiers at-semibold | at-caps | at-underline | at-strike
Editorial : class="at-e1" … "at-e4" + at-italic | at-medium-italic (E1, lowercase only)
Buttons : Shop All (white button, #111 text)
Links : Get Promoted (underline CTA)
Colors : var(--at-black) #111111 · var(--at-white) #FFFFFF
===================================================================== */
/* ---------- tokens ---------- */
:root {
--at-u: 1.56vw;
--at-black: #111111;
--at-white: #ffffff;
--at-font-sans: "sofia-pro", sans-serif; /* Typekit kit already on the site */
--at-font-serif: "Ethic Serif", serif; /* self-hosted (Constant @font-face) */
--at-track: 0.00625em; /* 0.1px at 16px */
--at-sans-regular: 400;
--at-sans-semibold: 600; /* Figma "Semi Bold"; Typekit sofia-pro semibold = 600 */
--at-gray-dark: #4a4a4a; /* Universal/Darker Gray — hover */
--at-gray: #979797; /* Universal/Medium Gray — disabled */
}
@media (min-width: 1024px) and (max-width: 1679.98px) {
:root {
--at-u: 0.95vw;
}
}
@media (min-width: 1680px) {
:root {
--at-u: 16px;
}
}
/* ---------- Sofia Pro type scale (Figma px / line-height) ----------
H1 32/48 · H2 24/36 · H3 20/30 · H4 16/24 · H5 14/20 · H6 12/16 · H7 10/14 — same px on mobile and desktop */
.at-h1,
.at-h2,
.at-h3,
.at-h4,
.at-h5,
.at-h6,
.at-h7 {
font-family: var(--at-font-sans);
font-weight: var(--at-sans-regular);
font-style: normal;
letter-spacing: var(--at-track);
color: inherit;
margin: 0;
}
.at-h1 {
font-size: calc(var(--at-u) * 5.2632);
line-height: 1.5;
} /* 32px @390 */
.at-h2 {
font-size: calc(var(--at-u) * 3.9474);
line-height: 1.5;
} /* 24px */
.at-h3 {
font-size: calc(var(--at-u) * 3.2895);
line-height: 1.5;
} /* 20px */
.at-h4 {
font-size: calc(var(--at-u) * 2.6316);
line-height: 1.5;
} /* 16px */
.at-h5 {
font-size: calc(var(--at-u) * 2.3026);
line-height: 1.4286;
} /* 14px */
.at-h6 {
font-size: calc(var(--at-u) * 1.9737);
line-height: 1.3333;
} /* 12px */
.at-h7 {
font-size: calc(var(--at-u) * 1.6447);
line-height: 1.4;
} /* 10px */
@media (min-width: 1024px) {
.at-h1 {
font-size: calc(var(--at-u) * 2);
} /* 32px @1680 */
.at-h2 {
font-size: calc(var(--at-u) * 1.5);
} /* 24px */
.at-h3 {
font-size: calc(var(--at-u) * 1.25);
} /* 20px */
.at-h4 {
font-size: calc(var(--at-u) * 1);
} /* 16px */
.at-h5 {
font-size: calc(var(--at-u) * 0.875);
} /* 14px */
.at-h6 {
font-size: calc(var(--at-u) * 0.75);
} /* 12px */
.at-h7 {
font-size: calc(var(--at-u) * 0.625);
} /* 10px */
}
/* ---------- Ethic Serif editorial scale ----------
E1 80/100 Light (+ Light Italic, Medium Italic lowercase) · E2 40/54 · E3 36/48 · E4 30/40 */
.at-e1,
.at-e2,
.at-e3,
.at-e4 {
font-family: var(--at-font-serif);
font-weight: 300;
font-style: normal;
letter-spacing: var(--at-track);
color: inherit;
margin: 0;
}
.at-e1 {
font-size: calc(var(--at-u) * 13.1579);
line-height: 1.25;
} /* 80px @390 */
.at-e2 {
font-size: calc(var(--at-u) * 6.5789);
line-height: 1.35;
} /* 40px */
.at-e3 {
font-size: calc(var(--at-u) * 5.9211);
line-height: 1.3333;
} /* 36px */
.at-e4 {
font-size: calc(var(--at-u) * 4.9342);
line-height: 1.3333;
} /* 30px */
@media (min-width: 1024px) {
.at-e1 {
font-size: calc(var(--at-u) * 5);
} /* 80px @1680 */
.at-e2 {
font-size: calc(var(--at-u) * 2.5);
} /* 40px */
.at-e3 {
font-size: calc(var(--at-u) * 2.25);
} /* 36px */
.at-e4 {
font-size: calc(var(--at-u) * 1.875);
} /* 30px */
}
/* ---------- modifiers ---------- */
.at-semibold {
font-weight: var(--at-sans-semibold);
}
.at-caps {
text-transform: uppercase;
}
.at-underline {
text-decoration: underline;
text-underline-position: from-font;
}
.at-strike {
text-decoration: line-through;
text-decoration-skip-ink: none;
}
.at-italic {
font-style: italic;
}
.at-medium-italic {
font-style: italic;
font-weight: 500;
text-transform: lowercase;
} /* needs the Ethic Serif Medium Italic file */
/* ---------- Button CTA (white, #111 text) ----------
Figma desktop: 14px Sofia Regular / 20, 12px × 24px padding → 44px tall, 210px wide (both labels equal)
Figma mobile : 11.44px / 10.4 → 28px tall, 130.5px wide
Equal widths come from min-width (em of the button's own size), long labels still grow. */
.at-btn,
:is(.g3-hp, .g3-container) a.at-btn {
display: inline-block;
box-sizing: border-box;
min-width: 11.41em; /* 130.5px @390 */
padding: 0 1.714em;
font-family: var(--at-font-sans);
font-size: calc(var(--at-u) * 1.8816); /* 11.44px @390 */
font-weight: var(--at-sans-regular);
line-height: 2.4545; /* 28.08px tall */
letter-spacing: 0.0045em;
text-align: center;
white-space: nowrap;
text-decoration: none;
color: var(--at-black);
background-color: var(--at-white);
border: 0;
cursor: pointer;
}
@media (min-width: 1024px) {
.at-btn,
:is(.g3-hp, .g3-container) a.at-btn {
min-width: 15.023em; /* 210.32px @1680 */
font-size: calc(var(--at-u) * 0.875); /* 14px */
line-height: 3.1429; /* 44px tall */
letter-spacing: var(--at-track);
}
}
/* ---------- Underline CTA ----------
Figma desktop: 15px Sofia Regular / 20, underline · mobile: 11.44px / 10.4 */
.at-link,
:is(.g3-hp, .g3-container) a.at-link {
display: inline-block;
font-family: var(--at-font-sans);
font-size: calc(var(--at-u) * 1.8816); /* 11.44px @390 */
font-weight: var(--at-sans-regular);
line-height: 2;
letter-spacing: 0.0045em;
color: inherit;
text-decoration: underline;
text-underline-position: from-font;
white-space: nowrap;
}
@media (min-width: 1024px) {
.at-link,
:is(.g3-hp, .g3-container) a.at-link {
font-size: calc(var(--at-u) * 0.9375); /* 15px @1680 */
line-height: 1.3333; /* 20px */
letter-spacing: var(--at-track);
}
}
/* =====================================================================
CTA COMPONENT VARIANTS — Figma library "Design-System" (wXE8kzgJTGznmaOcXCMgOW)
component set CTA 5536:5928 · connected via figma/CTA.figma.ts (Code Connect)
Plain .at-btn = the site's white CTA (Buttons Site board). Add ONE type modifier
for the library look; sizes inherit .at-btn's fluid scale (14px @1680, 11.44px @390).
Type : at-btn--primary-a | --primary-b | --secondary | --tertiary
Size : at-btn--small (Default = no class)
State : :hover / :focus-visible are automatic · aria-disabled="true" · aria-busy="true" (Load)
Radius : at-btn--radius-sm | --radius-lg (LOFT only — AT is square)
Brand : at-btn--loft (LOFT only — Poppins, not loaded on AT)
Icon : before the label
===================================================================== */
/* Primary A — #111 fill, white Semibold · hover #4A4A4A · disabled #979797 */
.at-btn.at-btn--primary-a,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--primary-a {
--at-dot: var(--at-white);
background-color: var(--at-black);
color: var(--at-white);
font-weight: var(--at-sans-semibold);
}
.at-btn.at-btn--primary-a:hover,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--primary-a:hover {
background-color: var(--at-gray-dark);
}
.at-btn.at-btn--primary-a[aria-disabled="true"],
:is(.g3-hp, .g3-container) a.at-btn.at-btn--primary-a[aria-disabled="true"] {
background-color: var(--at-gray);
}
/* Primary B — white fill, 1px #111 inside stroke, #111 Semibold · hover #4A4A4A · disabled #979797
(inset shadow = Figma inside stroke, so the button stays 44px tall) */
.at-btn.at-btn--primary-b,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--primary-b {
--at-dot: var(--at-black);
background-color: var(--at-white);
color: var(--at-black);
font-weight: var(--at-sans-semibold);
box-shadow: inset 0 0 0 1px currentColor;
}
.at-btn.at-btn--primary-b:hover,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--primary-b:hover {
color: var(--at-gray-dark);
}
.at-btn.at-btn--primary-b[aria-disabled="true"],
:is(.g3-hp, .g3-container) a.at-btn.at-btn--primary-b[aria-disabled="true"] {
color: var(--at-gray);
}
/* Small (primaries) — 8px vertical padding → 36px @1680 */
.at-btn.at-btn--small,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--small {
line-height: 2.008;
} /* 22.97px @390 */
@media (min-width: 1024px) {
.at-btn.at-btn--small,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--small {
line-height: 2.5714;
} /* 36px @1680 */
}
/* Secondary — text + 1px rule underneath (14/20 Regular) · hover drops the rule · disabled #979797
Tertiary — underlined text (12/16 Regular; Small 10/14)
Both are text CTAs: no box, colour follows the parent so they work on dark imagery. */
.at-btn.at-btn--secondary,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--secondary,
.at-btn.at-btn--tertiary,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--tertiary {
min-width: 0;
padding: 0;
background: none;
box-shadow: none;
color: inherit;
font-weight: var(--at-sans-regular);
}
.at-btn.at-btn--secondary,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--secondary {
line-height: 1.4286;
border-bottom: 1px solid currentColor;
}
.at-btn.at-btn--secondary:hover,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--secondary:hover {
border-bottom-color: transparent;
}
.at-btn.at-btn--tertiary,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--tertiary {
font-size: calc(var(--at-u) * 1.6128); /* 9.8px @390 */
line-height: 1.3333;
text-decoration: underline;
text-underline-position: from-font;
}
.at-btn.at-btn--secondary.at-btn--small,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--secondary.at-btn--small {
font-size: calc(var(--at-u) * 1.6128);
line-height: 1.3333;
}
.at-btn.at-btn--tertiary.at-btn--small,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--tertiary.at-btn--small {
font-size: calc(var(--at-u) * 1.344); /* 8.17px @390 */
line-height: 1.4;
}
@media (min-width: 1024px) {
.at-btn.at-btn--secondary,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--secondary {
line-height: 1.4286;
} /* 14/20 */
.at-btn.at-btn--tertiary,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--tertiary,
.at-btn.at-btn--secondary.at-btn--small,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--secondary.at-btn--small {
font-size: calc(var(--at-u) * 0.75); /* 12px @1680 */
line-height: 1.3333; /* 16px */
}
.at-btn.at-btn--tertiary.at-btn--small,
:is(.g3-hp, .g3-container) a.at-btn.at-btn--tertiary.at-btn--small {
font-size: calc(var(--at-u) * 0.625); /* 10px */
line-height: 1.4; /* 14px */
}
}
.at-btn.at-btn--secondary[aria-disabled="true"],
:is(.g3-hp, .g3-container) a.at-btn.at-btn--secondary[aria-disabled="true"],
.at-btn.at-btn--tertiary[aria-disabled="true"],
:is(.g3-hp, .g3-container) a.at-btn.at-btn--tertiary[aria-disabled="true"] {
color: var(--at-gray);
}
/* States shared by every type */
.at-btn:focus-visible {
outline: 1px dashed var(--at-black);
outline-offset: 2px;
} /* Figma "Focused" */
.at-btn[aria-disabled="true"] {
pointer-events: none;
cursor: default;
}
.at-btn[aria-busy="true"] {
/* Figma "Load" — label hidden, 3 dots */
color: transparent !important;
pointer-events: none;
background-image:
radial-gradient(
circle,
var(--at-dot, currentColor) 0 0.2em,
transparent 0.22em
),
radial-gradient(
circle,
var(--at-dot, currentColor) 0 0.2em,
transparent 0.22em
),
radial-gradient(
circle,
var(--at-dot, currentColor) 0 0.2em,
transparent 0.22em
);
background-size: 0.6em 0.6em;
background-repeat: no-repeat;
background-position:
calc(50% - 1em) 50%,
50% 50%,
calc(50% + 1em) 50%;
}
/* Icon slot — 18px on primaries, 12px on secondary, 8px gap */
.at-btn__icon {
display: inline-block;
width: 1.2857em;
height: 1.2857em;
margin-right: 0.5714em;
vertical-align: -0.25em;
}
.at-btn--secondary .at-btn__icon {
width: 0.8571em;
height: 0.8571em;
vertical-align: -0.05em;
}
.at-btn__icon > svg,
.at-btn__icon > img {
display: block;
width: 100%;
height: 100%;
}
/* LOFT-only options (kept so every Figma variant has a class; not used on AT) */
.at-btn.at-btn--radius-sm {
border-radius: 0.357em;
} /* 5px */
.at-btn.at-btn--radius-lg {
border-radius: 3.571em;
} /* 50px pill */
.at-btn.at-btn--loft {
font-family: "Poppins", sans-serif;
}