CommunityRule/community-rule
2
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed 2026-11-02 17:03:43 -07:00
1 parent 63d5d21ae0
commit e808fe70bf
162 files changed
+1385 -1377
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/sections/Accordion/Accordion.view.tsx
+2 -2
View File
@@ -22,9 +22,9 @@ function FaqAccordionView({
return (
<section
aria-labelledby={headingId}
className={`bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-004)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-096)] md:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-160)] lg:py-[var(--spacing-scale-096)] ${className}`.trim()}
className={`bg-[var(--color-surface-default-secondary)] px-[var(--space-100)] py-[var(--space-800)] md:px-[var(--space-2400)] md:py-[var(--space-1800)] lg:px-[var(--space-4000)] lg:py-[var(--space-2400)] ${className}`.trim()}
>
<div className="mx-auto flex w-full flex-col items-center gap-[var(--spacing-scale-096)] md:gap-[var(--spacing-scale-040)]">
<div className="mx-auto flex w-full flex-col items-center gap-[var(--space-2400)] md:gap-[var(--space-1000)]">
<h2
id={headingId}
className="w-full text-center font-bricolage-grotesque text-[length:var(--text-large-heading)] font-bold leading-[length:var(--text-large-heading--line-height)] text-[var(--color-content-default-brand-primary,#fefcc9)] lg:text-[length:var(--text-x-large-heading)] lg:leading-[length:var(--text-x-large-heading--line-height)] xl:text-[length:var(--text-xx-large-heading)] xl:leading-[length:var(--text-xx-large-heading--line-height)] xl:tracking-[var(--text-xx-large-heading--letter-spacing)]"
app/components/sections/AskOrganizer/AskOrganizer.container.tsx
+6 -6
View File
@@ -62,17 +62,17 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
const sectionPadding =
resolvedVariant === "compact"
? "py-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)]"
? "py-[var(--space-400)] px-[var(--space-400)] md:py-[var(--space-800)] md:px-[var(--space-800)]"
: resolvedVariant === "use-case-detail" || resolvedVariant === "inverse"
? "w-full py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)]"
: "py-[var(--spacing-scale-040)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)]";
? "w-full py-[var(--space-800)] px-[var(--space-800)] md:py-[var(--space-2400)] md:px-[var(--space-1800)]"
: "py-[var(--space-1000)] px-[var(--space-800)] md:py-[var(--space-2400)] md:px-[var(--space-1800)]";
const contentGap =
resolvedVariant === "compact"
? "gap-[var(--spacing-scale-020)]"
? "gap-[var(--space-500)]"
: resolvedVariant === "use-case-detail"
? "gap-[var(--spacing-scale-040)]"
: "gap-[var(--spacing-scale-040)]";
? "gap-[var(--space-1000)]"
: "gap-[var(--space-1000)]";
const labelledBy = title ? "ask-organizer-headline" : undefined;
app/components/sections/AskOrganizer/AskOrganizer.view.tsx
+2 -2
View File
@@ -47,13 +47,13 @@ function AskOrganizerView({
/>
<div
className={`${buttonContainerClass} flex-wrap gap-y-[var(--spacing-scale-016)]`}
className={`${buttonContainerClass} flex-wrap gap-y-[var(--space-400)]`}
>
<Button
size="small"
buttonType="filled"
palette={buttonPalette}
className="!px-[var(--spacing-scale-010)] md:!px-[var(--spacing-scale-016)] md:!py-[var(--spacing-scale-012)] md:!text-medium-label"
className="!px-[var(--space-250)] md:!px-[var(--space-400)] md:!py-[var(--space-300)] md:!text-medium-label"
onClick={onContactClick}
ariaLabel={ctaAriaLabel}
data-testid="ask-organizer-cta"
app/components/sections/Book/Book.view.tsx
+3 -3
View File
@@ -25,10 +25,10 @@ function BookView({
return (
<section
aria-labelledby={headingId}
className={`px-[var(--spacing-scale-008)] py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-160)] lg:py-[var(--spacing-scale-064)] ${className}`.trim()}
className={`px-[var(--space-200)] py-[var(--space-1800)] md:px-[var(--space-1800)] lg:px-[var(--space-4000)] lg:py-[var(--space-1800)] ${className}`.trim()}
>
<div className="mx-auto flex w-full max-w-[1440px] flex-col items-center">
<div className="flex w-full flex-col items-center gap-[var(--spacing-scale-032)] rounded-[var(--radius-measures-radius-xlarge,20px)] bg-[var(--color-surface-default-secondary)] p-[var(--spacing-scale-048)] shadow-[0_0_48px_rgba(0,0,0,0.1)] md:flex-row md:items-center lg:gap-[var(--spacing-scale-040)] lg:p-[var(--spacing-scale-064)] xl:mx-auto xl:max-w-[1280px] xl:gap-[var(--spacing-scale-032)] xl:p-[var(--spacing-scale-048)]">
<div className="flex w-full flex-col items-center gap-[var(--space-800)] rounded-[var(--radius-500)] bg-[var(--color-surface-default-secondary)] p-[var(--space-1200)] shadow-[0_0_48px_rgba(0,0,0,0.1)] md:flex-row md:items-center lg:gap-[var(--space-1000)] lg:p-[var(--space-1800)] xl:mx-auto xl:max-w-[1280px] xl:gap-[var(--space-800)] xl:p-[var(--space-1200)]">
<div className="relative aspect-[375/580] w-full shrink-0 overflow-hidden rounded-[4px] shadow-[0_0_24px_rgba(0,0,0,0.25)] md:aspect-auto md:h-[495px] md:w-[320px]">
{/* eslint-disable-next-line @next/next/no-img-element -- marketing cover art */}
<img
@@ -37,7 +37,7 @@ function BookView({
className="size-full object-cover"
/>
</div>
<div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-scale-016)] lg:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-020)]">
<div className="flex min-w-0 flex-1 flex-col gap-[var(--space-400)] lg:gap-[var(--space-600)] xl:gap-[var(--space-500)]">
<ContentLockup
variant="book"
alignment="left"
app/components/sections/CardSteps/CardSteps.view.tsx
+3 -3
View File
@@ -22,9 +22,9 @@ function CardStepsView({
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: schemaJson }}
/>
<section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
<section className="bg-transparent py-[var(--space-800)] px-[var(--space-500)] sm:py-[var(--space-1200)] sm:px-[var(--space-800)] lg:py-[var(--space-1800)] lg:px-[var(--space-1800)] xl:py-[var(--space-2100)] xl:px-[var(--space-1800)]">
<div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] sm:gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
<div className="grid grid-cols-1 gap-y-[var(--space-600)] sm:gap-y-[var(--space-800)] lg:gap-y-[var(--space-1400)]">
<div>
<SectionHeader
variant="multi-line"
@@ -35,7 +35,7 @@ function CardStepsView({
/>
</div>
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
<div className="grid grid-cols-1 gap-y-[var(--space-600)] lg:grid-cols-3 lg:gap-[var(--space-600)]">
{steps.map((item, index) => (
<Step
key={index}
app/components/sections/ContentBanner/ContentBanner.view.tsx
+15 -15
View File
@@ -23,18 +23,18 @@ function ContentBannerGuideView({
return (
<section
className="relative w-full overflow-clip px-[var(--spacing-scale-020)] py-[var(--spacing-scale-024)] sm:px-[var(--spacing-scale-032)] sm:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-048)] lg:py-[var(--spacing-scale-040)] xl:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)]"
className="relative w-full overflow-clip px-[var(--space-500)] py-[var(--space-600)] sm:px-[var(--space-800)] sm:py-[var(--space-800)] lg:px-[var(--space-1200)] lg:py-[var(--space-1000)] xl:px-[var(--space-1800)] xl:py-[var(--space-2100)]"
aria-labelledby="content-banner-title"
>
<div
className="mx-auto flex w-full max-w-[1024px] flex-col items-start gap-[var(--spacing-scale-024)] md:flex-row md:items-start md:gap-[var(--spacing-scale-024)] lg:items-center lg:gap-[var(--spacing-scale-032)] xl:max-w-[1312px] xl:gap-[var(--spacing-scale-056)]"
className="mx-auto flex w-full max-w-[1024px] flex-col items-start gap-[var(--space-600)] md:flex-row md:items-start md:gap-[var(--space-600)] lg:items-center lg:gap-[var(--space-800)] xl:max-w-[1312px] xl:gap-[var(--space-1400)]"
data-node-id="19189:9358"
>
<div
className="flex w-full shrink-0 flex-col items-start justify-center gap-[var(--measures-spacing-016)] md:max-w-[280px] lg:max-w-[365px] xl:max-w-[623px]"
className="flex w-full shrink-0 flex-col items-start justify-center gap-[var(--space-400)] md:max-w-[280px] lg:max-w-[365px] xl:max-w-[623px]"
data-node-id="19189:9171"
>
<div className="flex w-full flex-col items-start gap-[var(--measures-spacing-004)] text-left text-[var(--color-content-default-primary)]">
<div className="flex w-full flex-col items-start gap-[var(--space-100)] text-left text-[var(--color-content-default-primary)]">
<h1
id="content-banner-title"
className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-medium-display"
@@ -49,7 +49,7 @@ function ContentBannerGuideView({
</div>
{updatedLabel ? (
<div
className="flex w-full flex-wrap items-end gap-[var(--measures-spacing-008,8px)] text-xx-small-paragraph text-[var(--color-content-default-secondary)] md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph"
className="flex w-full flex-wrap items-end gap-[var(--space-200)] text-xx-small-paragraph text-[var(--color-content-default-secondary)] md:text-x-small-paragraph lg:text-small-paragraph xl:text-large-paragraph"
data-name="Metadata Container"
>
<span>{author}</span>
@@ -59,7 +59,7 @@ function ContentBannerGuideView({
</div>
<div
className="flex w-full shrink-0 items-center justify-center max-sm:pb-[var(--spacing-scale-024)] md:flex-1 md:justify-end"
className="flex w-full shrink-0 items-center justify-center max-sm:pb-[var(--space-600)] md:flex-1 md:justify-end"
data-node-id="22078:806960"
>
{/* eslint-disable-next-line @next/next/no-img-element */}
@@ -96,18 +96,18 @@ function ContentBannerArticleView({
className="
relative z-[1] w-full overflow-visible
min-h-[275px]
pt-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)]
pb-[var(--spacing-scale-064)]
sm:min-h-[326px] sm:pb-[var(--spacing-scale-048)]
md:min-h-[224px] md:px-[var(--spacing-scale-024)] md:pb-0
md:pt-[var(--spacing-scale-008)]
lg:min-h-[358.4px] lg:px-[var(--spacing-scale-048)] lg:py-[var(--spacing-scale-040)]
xl:min-h-[504px] xl:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)]
pt-[var(--space-400)] px-[var(--space-400)]
pb-[var(--space-1800)]
sm:min-h-[326px] sm:pb-[var(--space-1200)]
md:min-h-[224px] md:px-[var(--space-600)] md:pb-0
md:pt-[var(--space-200)]
lg:min-h-[358.4px] lg:px-[var(--space-1200)] lg:py-[var(--space-1000)]
xl:min-h-[504px] xl:px-[var(--space-1800)] xl:py-[var(--space-2100)]
"
>
<div
aria-hidden
className="pointer-events-none absolute inset-x-0 top-0 -bottom-[var(--spacing-scale-024)] sm:-bottom-[var(--spacing-scale-032)] md:hidden"
className="pointer-events-none absolute inset-x-0 top-0 -bottom-[var(--space-600)] sm:-bottom-[var(--space-800)] md:hidden"
data-name="ContentBannerBackgroundHorizontal"
>
{/* eslint-disable-next-line @next/next/no-img-element */}
@@ -120,7 +120,7 @@ function ContentBannerArticleView({
<div
aria-hidden
className="pointer-events-none absolute inset-x-0 top-0 -bottom-[var(--spacing-scale-032)] hidden md:block"
className="pointer-events-none absolute inset-x-0 top-0 -bottom-[var(--space-800)] hidden md:block"
data-name="ContentBannerBackgroundSection"
>
{/* eslint-disable-next-line @next/next/no-img-element */}
app/components/sections/FeatureGrid/FeatureGrid.container.tsx
+4 -4
View File
@@ -22,7 +22,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
description: t(
"pages.home.featureGrid.features.decisionMaking.description",
),
descriptionClassName: "text-[#3a3273]",
descriptionClassName: "text-[var(--color-content-invert-brand-lavender)]",
iconSrc: getAssetPath(featureIconPath("git-branch")),
},
{
@@ -31,7 +31,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
description: t(
"pages.home.featureGrid.features.valuesAlignment.description",
),
descriptionClassName: "text-[#424f1a]",
descriptionClassName: "text-[var(--color-content-invert-brand-lime)]",
iconSrc: getAssetPath(featureIconPath("arrow-left-right")),
},
{
@@ -40,7 +40,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
description: t(
"pages.home.featureGrid.features.membershipGuidance.description",
),
descriptionClassName: "text-[#5e2e23]",
descriptionClassName: "text-[var(--color-content-invert-brand-rust)]",
iconSrc: getAssetPath(featureIconPath("door-open")),
},
{
@@ -49,7 +49,7 @@ const FeatureGridContainer = memo<FeatureGridProps>(
description: t(
"pages.home.featureGrid.features.conflictResolution.description",
),
descriptionClassName: "text-[#1f4d47]",
descriptionClassName: "text-[var(--color-content-invert-brand-teal)]",
iconSrc: getAssetPath(featureIconPath("message-square-share")),
},
],
app/components/sections/FeatureGrid/FeatureGrid.view.tsx
+7 -7
View File
@@ -19,15 +19,15 @@ function FeatureGridView({
return (
<section
className={`p-0 md:px-[var(--spacing-scale-024)] lg:p-[var(--spacing-scale-064)] ${className}`}
className={`p-0 md:px-[var(--space-600)] lg:p-[var(--space-1800)] ${className}`}
aria-labelledby={labelledBy}
aria-label={labelledBy ? undefined : ariaLabel}
>
<div
data-figma-node="18632-10668"
className="rounded-none bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] md:rounded-[var(--radius-measures-radius-large)] md:p-[var(--spacing-scale-048)] lg:p-[var(--spacing-scale-064)]"
className="rounded-none bg-[var(--color-surface-default-secondary)] px-[var(--space-400)] py-[var(--space-800)] md:rounded-[var(--radius-500)] md:p-[var(--space-1200)] lg:p-[var(--space-1800)]"
>
<div className="mx-auto flex w-full flex-col gap-[var(--spacing-scale-040)] md:gap-[var(--spacing-scale-048)] lg:flex-row lg:items-center lg:gap-[var(--spacing-scale-064)]">
<div className="mx-auto flex w-full flex-col gap-[var(--space-1000)] md:gap-[var(--space-1200)] lg:flex-row lg:items-center lg:gap-[var(--space-1800)]">
<div className="lg:min-w-0 lg:flex-1">
<ContentLockup
title={title}
@@ -39,11 +39,11 @@ function FeatureGridView({
/>
</div>
<div className="grid w-full grid-cols-1 gap-[var(--spacing-scale-008)] md:grid-cols-2 md:gap-[var(--spacing-scale-016)] lg:flex-1">
<div className="grid w-full grid-cols-1 gap-[var(--space-200)] md:grid-cols-2 md:gap-[var(--space-400)] lg:flex-1">
{features.map((feature) => (
<div
key={feature.title}
className={`flex flex-col gap-[var(--spacing-scale-016)] p-[var(--spacing-scale-024)] ${feature.backgroundColor} rounded-[var(--radius-200)] md:rounded-[var(--radius-400)] lg:rounded-[var(--radius-measures-radius-large)]`}
className={`flex flex-col gap-[var(--space-400)] p-[var(--space-600)] ${feature.backgroundColor} rounded-[var(--radius-200)] md:rounded-[var(--radius-400)] lg:rounded-[var(--radius-500)]`}
>
<div className="size-[40px] shrink-0 overflow-clip">
{/* eslint-disable-next-line @next/next/no-img-element -- decorative Figma glyph */}
@@ -56,8 +56,8 @@ function FeatureGridView({
role="presentation"
/>
</div>
<div className="flex w-full flex-col gap-[var(--spacing-scale-008)]">
<p className="font-semibold text-[17px] leading-[22px] text-[var(--color-content-inverse-primary)]">
<div className="flex w-full flex-col gap-[var(--space-200)]">
<p className="font-semibold text-[17px] leading-[22px] text-[var(--color-content-invert-primary)]">
{feature.title}
</p>
<p
app/components/sections/GovernanceTemplateGrid/GovernanceTemplateGrid.tsx
+3 -3
View File
@@ -84,9 +84,9 @@ export function GovernanceTemplateGrid({
className={`
select-none
cursor-pointer
max-[639px]:rounded-[var(--measures-radius-200,8px)]
min-[640px]:max-[1023px]:rounded-[var(--measures-radius-300,12px)]
min-[1024px]:rounded-[var(--radius-measures-radius-large)]
max-[639px]:rounded-[var(--radius-200)]
min-[640px]:max-[1023px]:rounded-[var(--radius-300)]
min-[1024px]:rounded-[var(--radius-500)]
max-[639px]:pb-[24px] max-[639px]:pt-[12px] max-[639px]:px-[12px]
min-[640px]:max-[1023px]:p-[24px]
min-[1024px]:max-[1439px]:p-[24px]
app/components/sections/GovernanceTemplateGrid/GovernanceTemplateGridSkeleton.tsx
+3 -3
View File
@@ -35,10 +35,10 @@ export function GovernanceTemplateGridSkeleton({
<div
key={i}
className="
flex min-h-[120px] animate-pulse flex-col gap-3 rounded-[var(--measures-radius-200,8px)]
flex min-h-[120px] animate-pulse flex-col gap-3 rounded-[var(--radius-200)]
bg-[var(--color-surface-default-secondary,#262626)] p-4
min-[640px]:min-h-[140px] min-[640px]:rounded-[var(--measures-radius-300,12px)]
min-[1024px]:min-h-[160px] min-[1024px]:rounded-[var(--radius-measures-radius-small)]
min-[640px]:min-h-[140px] min-[640px]:rounded-[var(--radius-300)]
min-[1024px]:min-h-[160px] min-[1024px]:rounded-[var(--radius-300)]
"
>
<div className="h-10 w-10 rounded bg-[var(--color-surface-default-tertiary,#404040)] min-[640px]:h-14 min-[640px]:w-14" />
app/components/sections/Groups/Groups.view.tsx
+2 -2
View File
@@ -9,9 +9,9 @@ function GroupsView({ title, items, headingId, className = "" }: GroupsViewProps
<section
data-figma-node="22085-860411"
aria-labelledby={headingId}
className={`bg-transparent px-0 py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:px-[var(--spacing-scale-160)] ${className}`.trim()}
className={`bg-transparent px-0 py-[var(--space-1800)] lg:px-[var(--space-1800)] xl:px-[var(--space-4000)] ${className}`.trim()}
>
<div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-[var(--spacing-scale-032)] md:max-w-[1280px] md:gap-[var(--spacing-scale-048)]">
<div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-[var(--space-800)] md:max-w-[1280px] md:gap-[var(--space-1200)]">
<h2
id={headingId}
className="w-full shrink-0 text-center font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:text-large-heading lg:text-xx-large-heading"
app/components/sections/HeroBanner/HeroBanner.tsx
+3 -3
View File
@@ -35,10 +35,10 @@ const HeroBanner = memo<HeroBannerProps>(
imageAlt = "Hero illustration",
}) => {
return (
<section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
<div className="flex flex-col gap-[var(--spacing-scale-010)]">
<section className="bg-transparent px-[var(--space-200)] sm:px-[var(--space-250)] md:px-[var(--space-400)] lg:px-[var(--space-600)] xl:px-[var(--space-1200)]">
<div className="flex flex-col gap-[var(--space-250)]">
{/* Frame container for content */}
<div className="bg-[var(--color-surface-inverse-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
<div className="bg-[var(--color-surface-invert-brand-primary)] p-[var(--space-300)] sm:p-[var(--space-400)] md:p-[var(--space-1800)] lg:py-[var(--space-2400)] lg:px-[var(--space-1800)] rounded-tl-none rounded-tr-[var(--radius-400)] rounded-br-[var(--radius-400)] rounded-bl-[var(--radius-400)] flex flex-col gap-[var(--space-600)] sm:gap-[var(--space-600)] md:flex-row md:gap-[var(--space-1200)] relative overflow-hidden">
{/* DECORATIONS (behind content) */}
<HeroDecor
className="pointer-events-none absolute z-0
app/components/sections/HeroBanner/HeroDecor.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ interface HeroDecorProps {
const HeroDecor = memo<HeroDecorProps>(({ className = "" }) => {
return (
<svg
className={`text-[var(--color-surface-default-brand-darker-accent)] ${className}`}
className={`text-[var(--color-content-default-brand-secondary)] ${className}`}
viewBox="0 0 1540 645"
aria-hidden="true"
overflow="visible"
app/components/sections/LogoWall/LogoWall.view.tsx
+3 -3
View File
@@ -11,14 +11,14 @@ function LogoWallView({
}: LogoWallViewProps) {
return (
<section
className={`bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)] ${className}`}
className={`bg-[var(--color-surface-default-primary)] p-[var(--space-800)] md:px-[var(--space-600)] md:py-[var(--space-800)] lg:px-[var(--space-1800)] lg:py-[var(--space-1200)] xl:px-[160px] xl:py-[var(--space-1800)] ${className}`}
>
<div className="flex flex-col items-center gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
<div className="flex flex-col items-center gap-[var(--space-800)] md:gap-[var(--space-600)] xl:gap-[var(--space-800)]">
<p className="font-inter text-center text-[10px] font-medium uppercase leading-[12px] text-[var(--color-content-default-primary)] xl:text-[14px] xl:leading-[12px]">
{heading}
</p>
<div className="w-full opacity-60">
<div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:w-full md:flex-nowrap md:items-center md:justify-between gap-[38.4px] lg:gap-[var(--spacing-scale-048)]">
<div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:w-full md:flex-nowrap md:items-center md:justify-between gap-[38.4px] lg:gap-[var(--space-1200)]">
{displayLogos.map((logo, index) => (
<div
key={index}
app/components/sections/QuoteBlock/QuoteBlock.container.tsx
+13 -13
View File
@@ -26,10 +26,10 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
const variants: Record<string, VariantConfig> = {
compact: {
container:
"py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)]",
card: "py-[var(--spacing-scale-032)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-040)] md:px-[var(--spacing-scale-024)] rounded-[var(--radius-measures-radius-small)]",
gap: "gap-[var(--spacing-scale-016)] md:gap-[var(--spacing-scale-024)]",
avatarGap: "gap-[var(--spacing-scale-012)]",
"py-[var(--space-800)] px-[var(--space-400)]",
card: "py-[var(--space-800)] px-[var(--space-400)] md:py-[var(--space-1000)] md:px-[var(--space-600)] rounded-[var(--radius-300)]",
gap: "gap-[var(--space-400)] md:gap-[var(--space-600)]",
avatarGap: "gap-[var(--space-300)]",
avatar: "w-[48px] h-[48px] md:w-[64px] md:h-[64px]",
quote: "text-[16px] leading-[120%] md:text-[20px] md:leading-[110%]",
author: "text-[10px] leading-[120%] md:text-[12px]",
@@ -38,11 +38,11 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
},
standard: {
container:
"md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-016)] lg:p-[var(--spacing-scale-064)]",
card: "py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-048)] md:rounded-[var(--radius-measures-radius-medium)] lg:py-[var(--spacing-scale-064)] lg:pl-[120px] lg:pr-[320px]",
gap: "gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] lg:gap-[var(--spacing-scale-064)] xl:gap-[105px]",
"md:py-[var(--space-800)] md:px-[var(--space-400)] lg:p-[var(--space-1800)]",
card: "py-[var(--space-1800)] px-[var(--space-500)] md:py-[var(--space-1800)] md:px-[var(--space-1200)] md:rounded-[var(--radius-400)] lg:py-[var(--space-1800)] lg:pl-[120px] lg:pr-[320px]",
gap: "gap-[var(--space-600)] md:gap-[var(--space-1200)] lg:gap-[var(--space-1800)] xl:gap-[105px]",
avatarGap:
"gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-018)] xl:gap-[var(--spacing-scale-032)]",
"gap-[var(--space-500)] lg:gap-[var(--sizing-450)] xl:gap-[var(--space-800)]",
avatar:
"md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px] xl:w-[200px] xl:h-[200px]",
quote:
@@ -55,11 +55,11 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
},
extended: {
container:
"py-[var(--spacing-scale-048)] px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-080)] lg:px-[var(--spacing-scale-048)]",
card: "py-[var(--spacing-scale-080)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)] md:rounded-[var(--radius-measures-radius-large)] lg:py-[var(--spacing-scale-112)] lg:pl-[160px] lg:pr-[400px]",
gap: "gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-064)] lg:gap-[var(--spacing-scale-080)] xl:gap-[140px]",
"py-[var(--space-1200)] px-[var(--space-600)] md:py-[var(--space-1800)] md:px-[var(--space-800)] lg:py-[var(--spacing-scale-080)] lg:px-[var(--space-1200)]",
card: "py-[var(--spacing-scale-080)] px-[var(--space-800)] md:py-[var(--space-2400)] md:px-[var(--space-1800)] md:rounded-[var(--radius-500)] lg:py-[var(--spacing-scale-112)] lg:pl-[160px] lg:pr-[400px]",
gap: "gap-[var(--space-800)] md:gap-[var(--space-1800)] lg:gap-[var(--spacing-scale-080)] xl:gap-[140px]",
avatarGap:
"gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] xl:gap-[var(--spacing-scale-048)]",
"gap-[var(--space-800)] lg:gap-[var(--space-1000)] xl:gap-[var(--space-1200)]",
avatar:
"w-[80px] h-[80px] md:w-[140px] md:h-[140px] lg:w-[180px] lg:h-[180px] xl:w-[240px] xl:h-[240px]",
quote:
@@ -72,7 +72,7 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
},
statement: {
container:
"flex w-full flex-col items-center px-[var(--spacing-scale-032)] py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-096)] md:py-[var(--space-1200)]",
"flex w-full flex-col items-center px-[var(--space-800)] py-[var(--space-1200)] md:px-[var(--space-2400)] md:py-[var(--space-1200)]",
card: "",
gap: "",
avatarGap: "",
app/components/sections/QuoteBlock/QuoteBlock.view.tsx
+8 -8
View File
@@ -35,7 +35,7 @@ function QuoteBlockView({
role="region"
>
<div
className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--spacing-scale-020)] bg-[var(--color-surface-invert-brand-primary,#fefcc9)] px-[var(--spacing-scale-032)] py-[var(--spacing-scale-048)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
className="relative box-border flex w-full max-w-[1440px] shrink-0 flex-col items-center justify-center gap-[var(--space-800)] overflow-hidden rounded-[var(--space-500)] bg-[var(--color-surface-invert-brand-primary,#fefcc9)] px-[var(--space-800)] py-[var(--space-1200)] md:px-[var(--space-1800)] md:py-[var(--space-2400)]"
>
<QuoteStatementDecor />
<div className="relative z-10 flex w-full min-w-0 shrink-0 flex-col items-center text-center">
@@ -64,11 +64,11 @@ function QuoteBlockView({
role="region"
>
<div
className={`${config.card} bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
className={`${config.card} bg-[var(--color-surface-invert-brand-secondary)] relative overflow-hidden`}
>
{/* Background with noise texture */}
<div
className="absolute inset-0 bg-[var(--color-surface-default-brand-darker-accent)]"
className="absolute inset-0 bg-[var(--color-surface-invert-brand-secondary)]"
style={{
filter:
'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grain" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" colorInterpolationFilters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" seed="7" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" result="softNoise" type="matrix" values="0.8 0 0 0 0.3 0 0.6 0 0 0.2 0 0 1.0 0 0.4 0 0 0 0.25 0"/><feComposite in="softNoise" in2="SourceAlpha" operator="in" result="maskedNoise"/><feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply"/></filter></defs></svg>#grain\')',
@@ -101,7 +101,7 @@ function QuoteBlockView({
/>
) : (
<div
className={`flex items-center justify-center bg-gray-300 rounded-full ${config.avatar} text-gray-600 font-bold`}
className={`flex items-center justify-center bg-[var(--color-gray-300)] rounded-full ${config.avatar} text-[var(--color-gray-600)] font-bold`}
>
<span className="text-sm md:text-base lg:text-lg xl:text-xl">
{author
@@ -125,7 +125,7 @@ function QuoteBlockView({
className={[
"font-bricolage-grotesque font-normal",
config.quote,
"text-[var(--color-content-inverse-primary)]",
"text-[var(--color-content-invert-primary)]",
// give space for the hanging open-quote so it's not clipped:
"pl-[0.6em] -indent-[0.6em]",
// inject quotes
@@ -139,10 +139,10 @@ function QuoteBlockView({
</p>
</blockquote>
</div>
<footer className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)] xl:gap-[var(--spacing-scale-020)]">
<footer className="flex flex-col gap-[var(--space-200)] md:gap-[var(--space-300)] xl:gap-[var(--space-500)]">
<cite
id={authorId}
className={`font-normal ${config.author} text-[var(--color-content-inverse-primary)] uppercase not-italic`}
className={`font-normal ${config.author} text-[var(--color-content-invert-primary)] uppercase not-italic`}
>
{author}
</cite>
@@ -153,7 +153,7 @@ function QuoteBlockView({
className={[
"font-normal",
config.source,
"text-[var(--color-content-inverse-primary)] uppercase",
"text-[var(--color-content-invert-primary)] uppercase",
"pl-[0.6em] -indent-[0.6em]",
"relative before:content-[attr(data-qopen)] after:content-[attr(data-qclose)]",
"before:[font-family:var(--font-inter)] after:[font-family:var(--font-inter)]",
app/components/sections/QuoteBlock/QuoteDecor.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface QuoteDecorProps {
const QuoteDecor = memo<QuoteDecorProps>(({ className = "" }) => {
return (
<svg
className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 ${className}`}
className={`text-[var(--color-surface-invert-brand-primary)] opacity-100 ${className}`}
viewBox="400 0 442 163"
aria-hidden="true"
overflow="visible"
app/components/sections/RelatedArticles/RelatedArticles.view.tsx
+9 -9
View File
@@ -24,8 +24,8 @@ export function RelatedArticlesView({
<section
className={
isUseCases
? "px-[var(--spacing-scale-020)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-120)] lg:py-[var(--spacing-scale-064)]"
: "py-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)]"
? "px-[var(--space-500)] py-[var(--space-800)] md:px-[var(--space-600)] md:py-[var(--space-1200)] lg:px-[var(--space-3000)] lg:py-[var(--space-1800)]"
: "py-[var(--space-800)] lg:py-[var(--space-1800)]"
}
data-testid="related-articles"
{...(isUseCases ? { "data-figma-node": "20711-14231" } : {})}
@@ -33,8 +33,8 @@ export function RelatedArticlesView({
<div
className={
isUseCases
? "mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-032)]"
: "flex flex-col gap-[var(--spacing-scale-032)] lg:gap-[51px]"
? "mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[var(--space-600)] md:gap-[var(--space-800)]"
: "flex flex-col gap-[var(--space-800)] lg:gap-[51px]"
}
>
{isUseCases && useCasesHeadingLines?.length ? (
@@ -56,7 +56,7 @@ export function RelatedArticlesView({
className={`text-center font-medium text-[32px] leading-[110%] lg:text-medium-display ${
headingSurface === "onLight"
? "text-[var(--color-content-default-primary)]"
: "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-invert-primary)]"
}`}
>
{heading}
@@ -74,7 +74,7 @@ export function RelatedArticlesView({
<div
className={`flex gap-0 transition-transform duration-500 ease-in-out ${
isUseCases
? "lg:gap-[var(--spacing-scale-012)] lg:pl-[var(--spacing-scale-024)]"
? "lg:gap-[var(--space-300)] lg:pl-[var(--space-600)]"
: ""
} ${
manualScroll
@@ -103,14 +103,14 @@ export function RelatedArticlesView({
</div>
{isMobile && !isUseCases && (
<div className="flex justify-center gap-[var(--measures-spacing-008)] px-[var(--measures-spacing-064)]">
<div className="flex justify-center gap-[var(--space-200)] px-[var(--space-1800)]">
{filteredPosts.map((relatedPost, index) => (
<div
key={relatedPost.slug}
className="max-w-[var(--measures-spacing-056)] w-full h-[var(--measures-spacing-004)] bg-gray-200 rounded-full overflow-hidden"
className="max-w-[var(--space-1400)] w-full h-[var(--space-100)] bg-gray-200 rounded-full overflow-hidden"
>
<div
className="h-full bg-gray-600 rounded-full transition-all duration-75 ease-linear"
className="h-full bg-[var(--color-gray-600)] rounded-full transition-all duration-75 ease-linear"
style={getProgressStyle(index)}
/>
</div>
app/components/sections/Stats/Stats.view.tsx
+4 -4
View File
@@ -33,12 +33,12 @@ function StatsView({
return (
<section
aria-labelledby={headingId}
className={`bg-black px-[var(--spacing-scale-032)] py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-064)] md:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-160)] ${className}`.trim()}
className={`bg-black px-[var(--space-800)] py-[var(--space-1200)] md:px-[var(--space-1800)] md:py-[var(--space-1800)] lg:px-[var(--space-4000)] ${className}`.trim()}
>
<div className="mx-auto flex w-full max-w-[1440px] flex-col items-start gap-[var(--spacing-scale-010)] sm:gap-[var(--spacing-scale-032)]">
<div className="mx-auto flex w-full max-w-[1440px] flex-col items-start gap-[var(--space-250)] sm:gap-[var(--space-800)]">
<h2
id={headingId}
className="max-w-[116px] text-x-large-paragraph md:text-[length:var(--spacing-scale-016)] md:leading-[length:var(--spacing-scale-020)] md:translate-y-24 lg:translate-y-0"
className="max-w-[116px] text-x-large-paragraph md:text-[length:var(--space-400)] md:leading-[length:var(--space-500)] md:translate-y-24 lg:translate-y-0"
>
<span className="-mb-1 block whitespace-nowrap md:-mb-0 md:inline md:whitespace-normal md:leading-[inherit]">
{titlePrefix ? (
@@ -67,7 +67,7 @@ function StatsView({
</>
) : null}
</h2>
<ul className="grid w-full flex-1 grid-cols-1 gap-[var(--spacing-scale-014)] md:grid-cols-2 md:gap-[var(--spacing-scale-016)] lg:grid-cols-4">
<ul className="grid w-full flex-1 grid-cols-1 gap-[var(--sizing-350)] md:grid-cols-2 md:gap-[var(--space-400)] lg:grid-cols-4">
{items.map((item, index) => {
/* Figma mobile Card / Stat rows: 182px (1st, 4th) vs 260px (2nd, 3rd) */
const isShortCard = index === 0 || index === items.length - 1;
app/components/sections/UseCasesOrgs/UseCasesOrgs.view.tsx
+2 -2
View File
@@ -7,9 +7,9 @@ function UseCasesOrgsView({ children, className = "" }: UseCasesOrgsViewProps) {
return (
<section
data-figma-node="21993-33687"
className={`bg-[var(--color-surface-default-primary)] px-[var(--spacing-scale-024)] pb-[var(--spacing-scale-048)] ${className}`.trim()}
className={`bg-[var(--color-surface-default-primary)] px-[var(--space-600)] pb-[var(--space-1200)] ${className}`.trim()}
>
<div className="mx-auto flex w-full max-w-[1440px] flex-wrap content-center items-center justify-center gap-[var(--spacing-scale-008)] lg:flex-nowrap">
<div className="mx-auto flex w-full max-w-[1440px] flex-wrap content-center items-center justify-center gap-[var(--space-200)] lg:flex-nowrap">
{children}
</div>
</section>