Skip to content

Commit f1c6133

Browse files
vishnu-madhavan-gitvishnu-madhavan-git
committed
feat: unify 9ruby site design system
1 parent 44d96ae commit f1c6133

59 files changed

Lines changed: 4627 additions & 518 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎DESIGN.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
---
2+
version: alpha
3+
name: 9Ruby Official
4+
description: Dark, monochrome, editorial AI studio system for 9Ruby.com.
5+
colors:
6+
primary: "#FFFFFF"
7+
secondary: "#AAAAAA"
8+
tertiary: "#7A7A7A"
9+
neutral: "#080808"
10+
surface: "#101010"
11+
surfaceSolid: "#161616"
12+
border: "#2A2A2A"
13+
accent: "#FFFFFF"
14+
typography:
15+
display:
16+
fontFamily: Manrope
17+
fontSize: 6rem
18+
fontWeight: 950
19+
lineHeight: 0.93
20+
letterSpacing: "-0.075em"
21+
h1:
22+
fontFamily: Manrope
23+
fontSize: 4.5rem
24+
fontWeight: 950
25+
lineHeight: 0.94
26+
letterSpacing: "-0.07em"
27+
h2:
28+
fontFamily: Manrope
29+
fontSize: 3rem
30+
fontWeight: 900
31+
lineHeight: 0.98
32+
letterSpacing: "-0.06em"
33+
body-md:
34+
fontFamily: Manrope
35+
fontSize: 1rem
36+
fontWeight: 400
37+
lineHeight: 1.6
38+
letterSpacing: "-0.012em"
39+
label:
40+
fontFamily: Manrope
41+
fontSize: 0.6875rem
42+
fontWeight: 800
43+
lineHeight: 1
44+
letterSpacing: "0.12em"
45+
rounded:
46+
none: 0px
47+
sm: 6px
48+
md: 10px
49+
full: 999px
50+
spacing:
51+
sectionY: 96px
52+
sectionYMobile: 64px
53+
pageX: 32px
54+
pageXMobile: 24px
55+
maxWidth: 1200px
56+
components:
57+
page-shell:
58+
backgroundColor: "{colors.neutral}"
59+
textColor: "{colors.primary}"
60+
card-default:
61+
backgroundColor: "{colors.surface}"
62+
textColor: "{colors.primary}"
63+
rounded: "{rounded.none}"
64+
padding: 24px
65+
card-muted:
66+
backgroundColor: "{colors.surfaceSolid}"
67+
textColor: "{colors.secondary}"
68+
rounded: "{rounded.none}"
69+
padding: 24px
70+
label-muted:
71+
backgroundColor: "{colors.neutral}"
72+
textColor: "{colors.tertiary}"
73+
rounded: "{rounded.none}"
74+
padding: 8px
75+
border-sample:
76+
backgroundColor: "{colors.border}"
77+
textColor: "{colors.accent}"
78+
rounded: "{rounded.none}"
79+
padding: 8px
80+
button-primary:
81+
backgroundColor: "{colors.primary}"
82+
textColor: "#000000"
83+
rounded: "{rounded.full}"
84+
padding: 12px
85+
button-secondary:
86+
backgroundColor: "{colors.neutral}"
87+
textColor: "{colors.primary}"
88+
rounded: "{rounded.full}"
89+
padding: 12px
90+
---
91+
92+
## Overview
93+
94+
9Ruby.com uses one official visual system: dark monochrome, sharp editorial spacing, oversized uppercase headlines, thin borders, and restrained motion.
95+
96+
The site should feel like a premium AI studio and revenue systems company, not a collection of unrelated experiments. Every page cleanup must preserve this system.
97+
98+
## Colors
99+
100+
- **Background (#080808):** Official page background. Use this instead of random light gray or different black values.
101+
- **Surface (#101010 / #161616):** Cards, panels, mobile menus, and elevated blocks.
102+
- **Text (#FFFFFF):** Main text and high-emphasis actions.
103+
- **Muted text (#AAAAAA / #7A7A7A):** Captions, descriptions, secondary navigation.
104+
- **Accent (#FFFFFF):** The official accent is white. Do not introduce random bright colors unless a specific product page requires it.
105+
- **Border (#2A2A2A):** Thin, low-contrast dividers. Prefer `rgba(255,255,255,0.12)` in code.
106+
107+
## Typography
108+
109+
Use Manrope as the official brand face through `var(--font-brand), var(--font-geist-sans), system-ui, sans-serif`.
110+
111+
Headlines are uppercase, heavy, tight, and editorial. Body copy is compact and practical.
112+
113+
Use Arabic micro-labels only as brand accents, not as large competing content blocks.
114+
115+
## Layout
116+
117+
Use one page rhythm:
118+
119+
- Fixed 72px navbar.
120+
- Breadcrumb band under navbar for inner pages.
121+
- Max content width around 1200px.
122+
- Horizontal padding: 24px mobile, 32px desktop.
123+
- Section padding: 64px mobile, 96px desktop.
124+
- Cards use grid systems, not random scattered layouts.
125+
- Hero sections must make the first buyer action obvious.
126+
127+
## Elevation & Depth
128+
129+
Keep depth subtle:
130+
131+
- Thin borders.
132+
- Very dark surfaces.
133+
- Minimal glow/grain.
134+
- No colorful glassmorphism unless it is already part of an approved 9Ruby component.
135+
136+
## Shapes
137+
138+
9Ruby uses mostly square/editorial panels with occasional rounded-pill CTAs.
139+
140+
- Cards: square or very small radius.
141+
- Buttons: full pill radius.
142+
- Badges: square outline or compact pill depending on context.
143+
144+
## Components
145+
146+
Official repeated components:
147+
148+
- `Navbar` for all public pages.
149+
- `Breadcrumb` for inner pages.
150+
- `PageHeader` for directory-style pages.
151+
- `Footer` for all public pages.
152+
- `RevenueAuditOffer`, `ProductizedOfferLadder`, and `NicheRevenuePage` for money pages.
153+
154+
When cleaning page by page, prefer extracting repeated styles into these components instead of creating one-off page systems.
155+
156+
## Do's and Don'ts
157+
158+
Do:
159+
160+
- Keep the site dark and monochrome.
161+
- Keep navigation buyer-first.
162+
- Use consistent card grids and spacing.
163+
- Keep one primary CTA per page.
164+
- Preserve the current premium 9Ruby look.
165+
166+
Don't:
167+
168+
- Add light gray pages unless the full brand direction changes.
169+
- Mix many layout systems on one route.
170+
- Add new random categories to the navbar.
171+
- Add colorful gradients, neon accents, emojis, or unrelated icon styles.
172+
- Rebuild the site from scratch when a page can be aligned to the official system.

‎src/app/about/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
1010
description: "The story behind 9Ruby and IX Ruby. AI agents, websites, voice systems, and automation for modern brands.",
1111
}
1212

13-
const NV = "var(--font-sora), var(--font-geist-sans), system-ui, sans-serif"
13+
const NV = "var(--font-brand), var(--font-geist-sans), system-ui, sans-serif"
1414
const BORDER = "0.8px solid rgba(255,255,255,0.12)"
1515

1616
const values = [

‎src/app/ai-lead-capture-system/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import SeoMoneyPageTemplate from "@/components/SeoMoneyPageTemplate"
2+
import { seoMoneyPages } from "@/data/seo-money-pages"
3+
4+
const page = seoMoneyPages["ai-lead-capture-system"]
5+
6+
export const metadata = page.metadata
7+
8+
export default function Page() {
9+
return <SeoMoneyPageTemplate page={page} />
10+
}

‎src/app/ai-model-explorer/page.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { Metadata } from "next"
2+
3+
import Navbar from "@/components/Navbar"
4+
import Footer from "@/components/Footer"
5+
import Breadcrumb from "@/components/Breadcrumb"
6+
import AiModelExplorer from "@/components/AiModelExplorer"
7+
import { aiModelCategories, aiModelDirectoryTotal, aiModelQuickSearches, aiModels } from "@/lib/ai-models"
8+
9+
export const metadata: Metadata = {
10+
title: "AI Model Explorer | 9Ruby",
11+
description:
12+
"Search, filter, and browse AI models by category. Start with free model details, then upgrade for premium integration guides and tools.",
13+
}
14+
15+
export default function AiModelExplorerPage() {
16+
return (
17+
<main style={{ background: "#080808", minHeight: "100vh" }}>
18+
<Navbar />
19+
<Breadcrumb items={[{ label: "AI Model Explorer" }]} />
20+
<AiModelExplorer models={aiModels} categories={aiModelCategories} quickSearches={aiModelQuickSearches} directoryTotal={aiModelDirectoryTotal} />
21+
<Footer />
22+
</main>
23+
)
24+
}

‎src/app/ai-website-design/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import SeoMoneyPageTemplate from "@/components/SeoMoneyPageTemplate"
2+
import { seoMoneyPages } from "@/data/seo-money-pages"
3+
4+
const page = seoMoneyPages["ai-website-design"]
5+
6+
export const metadata = page.metadata
7+
8+
export default function Page() {
9+
return <SeoMoneyPageTemplate page={page} />
10+
}

‎src/app/apps/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Metadata } from "next"
22

33
export const metadata: Metadata = {
4-
title: "App Store | 9Ruby",
4+
title: "Apps | 9Ruby",
55
description:
66
"Browse 13,000+ app integrations for 9Ruby AI. Connect your favorite tools — CRM, analytics, marketing, developer, design, and more.",
77
openGraph: {
8-
title: "App Store | 9Ruby",
8+
title: "Apps | 9Ruby",
99
description:
1010
"Browse 13,000+ app integrations for 9Ruby AI. Connect your favorite tools — CRM, analytics, marketing, developer, design, and more.",
1111
},

‎src/app/apps/page.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -830,7 +830,7 @@ export default function AppStorePage() {
830830
return (
831831
<>
832832
<Navbar />
833-
<Breadcrumb items={[{ label: "App Store" }]} />
833+
<Breadcrumb items={[{ label: "Apps" }]} />
834834

835835
<main className="min-h-screen pt-20" style={{ background: "#080808" }}>
836836
{/* ============================================================ */}
@@ -845,8 +845,7 @@ export default function AppStorePage() {
845845
</div>
846846

847847
<h1 className="text-4xl md:text-5xl lg:text-6xl font-sans leading-[0.92] tracking-tight mb-5" style={{ color: "#fff" }}>
848-
9Ruby{" "}
849-
<span style={{ color: "rgba(255,255,255,0.5)" }}>App Store</span>
848+
Apps
850849
</h1>
851850

852851
<p className="text-sm md:text-base text-white/44 leading-relaxed mb-8 max-w-2xl">
@@ -947,7 +946,7 @@ export default function AppStorePage() {
947946
<Sparkles size={16} className="text-white/55" />
948947
<h2 className="text-xl font-sans text-white">Staff Picks</h2>
949948
</div>
950-
<p className="text-sm text-white/44">Hand-selected by the 9Ruby team</p>
949+
<p className="text-sm text-white/44">Hand-selected tools and apps</p>
951950
</div>
952951
<button className="flex items-center gap-1 text-sm text-white/44 hover:text-white/70 transition-colors">
953952
View all <ArrowRight size={14} />
@@ -978,7 +977,7 @@ export default function AppStorePage() {
978977
<div className="grid grid-cols-1 md:grid-cols-2 gap-px" style={{ border: "0.8px solid rgba(255,255,255,0.12)" }}>
979978
{trending.slice(0, 8).map((app, idx) => (
980979
<div key={app.id} className="flex items-center gap-5 p-5 hover:bg-white/[0.02] transition-colors" style={{ borderBottom: "0.8px solid rgba(255,255,255,0.08)", borderRight: idx % 2 === 0 ? "0.8px solid rgba(255,255,255,0.08)" : undefined }}>
981-
<span style={{ fontFamily: "var(--font-sora), var(--font-geist-sans), system-ui, sans-serif", fontWeight: 950, fontSize: 28, color: "rgba(255,255,255,0.1)", minWidth: 36, letterSpacing: "-0.05em", lineHeight: 1 }}>
980+
<span style={{ fontFamily: "var(--font-brand), var(--font-geist-sans), system-ui, sans-serif", fontWeight: 950, fontSize: 28, color: "rgba(255,255,255,0.1)", minWidth: 36, letterSpacing: "-0.05em", lineHeight: 1 }}>
982981
{String(idx + 1).padStart(2, "0")}
983982
</span>
984983
<div className="w-10 h-10 rounded-none bg-black/[0.04] border border-white/[0.08] flex items-center justify-center flex-shrink-0">
@@ -1422,4 +1421,4 @@ export default function AppStorePage() {
14221421
</>
14231422
)
14241423
}
1425-
1424+

‎src/app/audit/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Navbar from "@/components/Navbar"
44
import Footer from "@/components/Footer"
55
import AuditIntakeForm from "@/components/AuditIntakeForm"
66

7-
const NV = "var(--font-sora), var(--font-geist-sans), system-ui, sans-serif"
7+
const NV = "var(--font-brand), var(--font-geist-sans), system-ui, sans-serif"
88
const BORDER = "0.8px solid rgba(255,255,255,0.12)"
99
const PAYPAL = "https://paypal.me/PayVishnuMadhav?locale.x=en_US&country.x=AE"
1010

‎src/app/audit/sample-report/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Navbar from "@/components/Navbar"
55
import Footer from "@/components/Footer"
66
import Breadcrumb from "@/components/Breadcrumb"
77

8-
const NV = "var(--font-sora), var(--font-geist-sans), system-ui, sans-serif"
8+
const NV = "var(--font-brand), var(--font-geist-sans), system-ui, sans-serif"
99
const BORDER = "0.8px solid rgba(255,255,255,0.12)"
1010

1111
export const metadata: Metadata = {

0 commit comments

Comments
 (0)