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/not-found.tsx
+10 -10
View File
@@ -43,14 +43,14 @@ export default function NotFound() {
aria-labelledby="not-found-heading"
>
<div
className="relative flex min-h-0 w-full min-w-0 max-w-full flex-1 flex-col overflow-x-clip 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)]"
className="relative flex min-h-0 w-full min-w-0 max-w-full flex-1 flex-col overflow-x-clip 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="relative z-10 flex min-h-0 w-full max-w-full flex-1 flex-col items-center justify-center py-[var(--spacing-scale-040)] sm:py-[var(--spacing-scale-048)]">
<div className="relative z-10 flex min-h-0 w-full max-w-full flex-1 flex-col items-center justify-center py-[var(--space-1000)] sm:py-[var(--space-1200)]">
{/*
Vertical rhythm: 22078-808903 + 22078-808908 — 404→bar 8px, bar→h1 32px, h1→body 16px,
body→CTAs 48px, CTA→templates 40px (lockup flex gap), template→hint 20px
*/}
<div className="mx-auto flex w-full max-w-[480px] flex-col items-center gap-[var(--spacing-scale-040)] text-center">
<div className="mx-auto flex w-full max-w-[480px] flex-col items-center gap-[var(--space-1000)] text-center">
<div className="flex w-full min-w-0 flex-col items-center">
<div className="relative flex w-full flex-col items-center">
<HeroDecor
@@ -65,30 +65,30 @@ export default function NotFound() {
{t("pages.notFoundPage.codeTitle")}
</p>
<div
className="mt-[var(--spacing-scale-008)] h-1.5 w-[120px] shrink-0 rounded-full bg-[var(--color-yellow-yellow200)]"
className="mt-[var(--space-200)] h-1.5 w-[120px] shrink-0 rounded-full bg-[var(--color-yellow-yellow200)]"
aria-hidden="true"
/>
<h1
id="not-found-heading"
className="mt-[var(--spacing-scale-032)] max-w-full text-center font-bricolage-grotesque font-medium leading-[1.1] text-[40px] text-[var(--color-content-default-primary)] min-[400px]:text-medium-display"
className="mt-[var(--space-800)] max-w-full text-center font-bricolage-grotesque font-medium leading-[1.1] text-[40px] text-[var(--color-content-default-primary)] min-[400px]:text-medium-display"
>
{t("pages.notFoundPage.heading")}
</h1>
</div>
<p className="mt-[var(--spacing-scale-016)] w-full max-w-[443px] text-center text-large-paragraph text-[var(--color-content-default-secondary)]">
<p className="mt-[var(--space-400)] w-full max-w-[443px] text-center text-large-paragraph text-[var(--color-content-default-secondary)]">
{t("pages.notFoundPage.description")}
</p>
<div
dir="ltr"
className="mt-[var(--spacing-scale-048)] flex w-full min-w-0 flex-col items-center justify-center gap-[var(--spacing-scale-016)] min-[400px]:flex-nowrap min-[400px]:flex-row min-[400px]:items-center min-[400px]:justify-center"
className="mt-[var(--space-1200)] flex w-full min-w-0 flex-col items-center justify-center gap-[var(--space-400)] min-[400px]:flex-nowrap min-[400px]:flex-row min-[400px]:items-center min-[400px]:justify-center"
>
<Button
href="/"
size="large"
buttonType="filled"
palette="default"
className="inline-flex w-max max-w-full shrink-0 items-center justify-center gap-[var(--spacing-scale-010)]"
className="inline-flex w-max max-w-full shrink-0 items-center justify-center gap-[var(--space-250)]"
>
<Icon
name="arrow_back"
@@ -110,9 +110,9 @@ export default function NotFound() {
</div>
{templateEntries.length > 0 ? (
<div className="flex w-full min-w-0 max-w-[36rem] flex-col items-center gap-[var(--spacing-scale-020)] self-stretch">
<div className="flex w-full min-w-0 max-w-[36rem] flex-col items-center gap-[var(--space-500)] self-stretch">
<div
className="flex w-full min-w-0 max-md:flex-wrap md:flex-nowrap items-center justify-center gap-x-[var(--spacing-scale-016)] gap-y-[var(--spacing-scale-012)]"
className="flex w-full min-w-0 max-md:flex-wrap md:flex-nowrap items-center justify-center gap-x-[var(--space-400)] gap-y-[var(--space-300)]"
role="list"
>
{templateEntries.map((entry) => (