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/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