Skip to content

Visual Defragmentation: Premium Grid & Alchemical Theme #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cjo93 merged 8 commits into from
Feb 4, 2026
Merged

Visual Defragmentation: Premium Grid & Alchemical Theme #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a9d09ee
Refactor layout to Premium-Alchemical aesthetic with CSS Grid
google-labs-jules[bot] Feb 4, 2026
b98955b
Initial plan
Copilot Feb 4, 2026
900968b
Resolve merge conflicts with main branch by accepting main's changes
Copilot Feb 4, 2026
aa456b8
Resolve merge conflict in PlatformHub.tsx
google-labs-jules[bot] Feb 4, 2026
6e79f18
Fix merge conflicts and build errors from main branch
Copilot Feb 4, 2026
b65f631
Remove conflict markers from firestore.rules and api-v2 files
Copilot Feb 4, 2026
c1654f7
Merge branch 'visual-defrag-premium-grid-3706875891636465474' into co…
cjo93 Feb 4, 2026
30d89cb
Merge pull request #20 from cjo93/copilot/sub-pr-15-another-one
cjo93 Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 136 additions & 0 deletions src/pages/DesignSystem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import React from 'react';
import { ArrowRight, Activity, Lock } from 'lucide-react';
Copy link

@gemini-code-assist gemini-code-assist bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The Lock icon is imported from lucide-react but is not used within the component. It's good practice to remove unused imports to keep the code clean.

Suggested change
import { ArrowRight, Activity, Lock } from 'lucide-react';
import { ArrowRight, Activity } from 'lucide-react';

Copy link

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused import Lock from lucide-react should be removed.

Suggested change
import { ArrowRight, Activity, Lock } from 'lucide-react';
import { ArrowRight, Activity } from 'lucide-react';

Copilot uses AI. Check for mistakes.

export default function DesignSystem() {
return (
<div className="min-h-screen bg-[var(--color-black)] text-[var(--color-white)] p-10 font-sans">
<header className="mb-20 border-b border-white/10 pb-10">
<h1 className="text-6xl font-light tracking-tighter mb-4">Design System</h1>
<p className="text-xl text-white/40 font-mono">v2.0 // PREMIUM_ALCHEMICAL</p>
</header>

{/* TYPOGRAPHY */}
<section className="mb-20 grid grid-cols-1 md:grid-cols-12 gap-4">
<div className="col-span-12 md:col-span-4">
<h2 className="text-xs font-bold tracking-[0.2em] uppercase text-white/40 mb-4">Typography</h2>
</div>
<div className="col-span-12 md:col-span-8 space-y-12">
<div>
<h1 className="border-b border-white/10 pb-4 mb-2">Heading 1</h1>
<span className="text-xs text-white/30 font-mono">6rem / Light / -0.03em</span>
</div>
<div>
<h2>Heading 2</h2>
<span className="text-xs text-white/30 font-mono">3.75rem / Light / -0.02em</span>
</div>
<div>
<h3>Heading 3</h3>
<span className="text-xs text-white/30 font-mono">2.25rem / Light / -0.02em</span>
</div>
<div>
<h4 className="text-xl font-medium">Heading 4</h4>
<span className="text-xs text-white/30 font-mono">1.25rem / Medium</span>
</div>
<div>
<p className="text-lg leading-relaxed text-white/60 max-w-2xl">
Body Large. The friction isn't personal. It's structural. Map the invisible mechanics of your connections.
</p>
<p className="text-base leading-relaxed text-white/60 max-w-2xl">
Body Standard. Ingest raw relational data. Classify friction points against a deterministic 64-gate framework.
</p>
<span className="text-xs text-white/30 font-mono">Body / Inter / 1.6 Line Height</span>
</div>
</div>
</section>

{/* COLORS */}
<section className="mb-20 grid grid-cols-1 md:grid-cols-12 gap-4">
<div className="col-span-12 md:col-span-4">
<h2 className="text-xs font-bold tracking-[0.2em] uppercase text-white/40 mb-4">Palette</h2>
</div>
<div className="col-span-12 md:col-span-8 grid grid-cols-2 md:grid-cols-4 gap-8">
<div className="space-y-2">
<div className="w-full h-24 bg-[#0F172A] border border-white/10 rounded-lg"></div>
Copy link

@gemini-code-assist gemini-code-assist bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This line uses a hardcoded hex value #0F172A. To adhere to the new design system, please use the corresponding CSS variable. In this case, it should be var(--color-black).

Suggested change
<div className="w-full h-24 bg-[#0F172A] border border-white/10 rounded-lg"></div>
<div className="w-full h-24 bg-[var(--color-black)] border border-white/10 rounded-lg"></div>

<div className="text-xs font-mono">
<div className="text-white">Deep Slate</div>
<div className="text-white/40">#0F172A</div>
<div className="text-emerald-500">Background</div>
</div>
</div>
<div className="space-y-2">
<div className="w-full h-24 bg-[#F8FAFC] border border-white/10 rounded-lg"></div>
Copy link

@gemini-code-assist gemini-code-assist bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This line uses a hardcoded hex value #F8FAFC. The design system defines this color as var(--color-white). Please use the CSS variable for consistency.

Suggested change
<div className="w-full h-24 bg-[#F8FAFC] border border-white/10 rounded-lg"></div>
<div className="w-full h-24 bg-[var(--color-white)] border border-white/10 rounded-lg"></div>

<div className="text-xs font-mono">
<div className="text-white">Off White</div>
<div className="text-white/40">#F8FAFC</div>
<div className="text-emerald-500">Text / Accent</div>
</div>
</div>
<div className="space-y-2">
<div className="w-full h-24 bg-emerald-500 border border-white/10 rounded-lg"></div>
<div className="text-xs font-mono">
<div className="text-white">Emerald</div>
<div className="text-white/40">Token: Safe</div>
</div>
</div>
<div className="space-y-2">
<div className="w-full h-24 bg-purple-500 border border-white/10 rounded-lg"></div>
<div className="text-xs font-mono">
<div className="text-white">Purple</div>
<div className="text-white/40">Token: Process</div>
</div>
</div>
</div>
</section>

{/* INTERACTION */}
<section className="mb-20 grid grid-cols-1 md:grid-cols-12 gap-4">
<div className="col-span-12 md:col-span-4">
<h2 className="text-xs font-bold tracking-[0.2em] uppercase text-white/40 mb-4">Interaction</h2>
</div>
<div className="col-span-12 md:col-span-8 space-y-8">
<div className="flex flex-wrap gap-8 items-center">
<button className="button-primary">
Initialize System <ArrowRight size={16} />
</button>
<button className="button-secondary">
View Documentation
</button>
</div>
<div className="p-8 border border-white/10 bg-white/5 backdrop-blur-md max-w-md">
<h4 className="text-sm font-bold uppercase tracking-widest mb-4 flex items-center gap-2">
<Activity size={16} className="text-emerald-500" /> Card Element
</h4>
<p className="text-sm text-white/60 mb-6">
Glassmorphism card with 1px border and backdrop blur. High-end, precise feel.
</p>
<div className="flex gap-2">
<span className="text-[10px] uppercase font-bold px-2 py-1 bg-white/10 rounded text-white/80">
Unit A
</span>
<span className="text-[10px] uppercase font-bold px-2 py-1 bg-white/10 rounded text-white/80">
Copy link

@gemini-code-assist gemini-code-assist bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

There appears to be an extra space at the beginning of this line, which makes its indentation inconsistent with the <span> for 'Unit A' on line 107. This could be a formatting typo and should be corrected for consistency.

Suggested change
<span className="text-[10px] uppercase font-bold px-2 py-1 bg-white/10 rounded text-white/80">
<span className="text-[10px] uppercase font-bold px-2 py-1 bg-white/10 rounded text-white/80">

Copy link

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra leading space in the JSX. Should be <span instead of <span for consistent formatting.

Suggested change
<span className="text-[10px] uppercase font-bold px-2 py-1 bg-white/10 rounded text-white/80">
<span className="text-[10px] uppercase font-bold px-2 py-1 bg-white/10 rounded text-white/80">

Copilot uses AI. Check for mistakes.
Unit B
</span>
</div>
</div>
</div>
</section>

{/* GRID */}
Copy link

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra leading space before the comment. Should be {/* GRID */} instead of {/* GRID */}.

Suggested change
{/* GRID */}
{/* GRID */}

Copilot uses AI. Check for mistakes.
<section className="mb-20 grid grid-cols-1 md:grid-cols-12 gap-4">
<div className="col-span-12 md:col-span-4">
<h2 className="text-xs font-bold tracking-[0.2em] uppercase text-white/40 mb-4">Grid System</h2>
</div>
<div className="col-span-12 md:col-span-8">
<div className="grid grid-cols-12 gap-4 h-32 w-full border border-dashed border-white/20 p-2">
{Array.from({ length: 12 }).map((_, i) => (
<div key={i} className="bg-white/10 h-full flex items-center justify-center text-[10px] text-white/30">
{i + 1}
</div>
))}
</div>
<p className="mt-4 text-xs text-white/40 font-mono">12-Column Grid / 1rem (16px) Gap</p>
</div>
</section>
</div>
);
}
25 changes: 0 additions & 25 deletions src/pages/products/Manuals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,31 +44,6 @@ export default function Landing() {
const container = document.getElementById('landing-container');
if (!container) return;

let ticking = false;

const handleScroll = () => {
if (!ticking) {
window.requestAnimationFrame(() => {
const scrollTop = container.scrollTop;

setScrollY((prev) => {
// Optimization: Stop updating state once the hero section is fully hidden (opacity reaches 0 at 600px).
// This prevents unnecessary re-renders when scrolling through the rest of the page.
if (prev > 600 && scrollTop > 600) {
return prev;
}
return scrollTop;
});

ticking = false;
});
ticking = true;
}
};

container.addEventListener('scroll', handleScroll, { passive: true });
return () => container.removeEventListener('scroll', handleScroll);
}, []);
const update = () => {
const scrollTop = container.scrollTop;

Expand Down
2 changes: 1 addition & 1 deletion src/styles/design-system.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,4 +162,4 @@ code {
h3 {
font-size: 1.5rem;
}
}
}