Skip to content

Commit cd2564a

Browse files
ericallamericallam
authored
Merge pull request #9 from triggerdotdev/chore/design-system-alignment
2 parents ca906eb + 155264e commit cd2564a

File tree

5 files changed

+41
-24
lines changed

5 files changed

+41
-24
lines changed

‎docs/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@
77
"start": "next start"
88
},
99
"dependencies": {
10+
"@tailwindcss/postcss": "^4.0.0",
1011
"fumadocs-core": "^16.0.0",
1112
"fumadocs-mdx": "^14.0.0",
1213
"fumadocs-ui": "^16.0.0",
14+
"geist": "^1.7.0",
1315
"next": "^16.0.0",
1416
"react": "^19.0.0",
1517
"react-dom": "^19.0.0",
16-
"tailwindcss": "^4.0.0",
17-
"@tailwindcss/postcss": "^4.0.0"
18+
"tailwindcss": "^4.0.0"
1819
},
1920
"devDependencies": {
2021
"@types/mdx": "^2.0.0",

‎docs/src/app/global.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,600,700&display=swap');
12
@import 'tailwindcss';
23
@import 'fumadocs-ui/css/neutral.css';
34
@import 'fumadocs-ui/css/preset.css';

‎docs/src/app/home.css‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
.hp {
2-
--hp-bg: #0a0a0a;
3-
--hp-bg-raised: #111111;
4-
--hp-bg-code: #0d0d0d;
5-
--hp-border: #1a1a1a;
6-
--hp-border-bright: #2a2a2a;
7-
--hp-text: #e5e5e5;
8-
--hp-text-dim: #737373;
9-
--hp-text-muted: #525252;
10-
--hp-accent: #22c55e;
11-
--hp-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
12-
--hp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
2+
--hp-bg: #121317;
3+
--hp-bg-raised: #15171A;
4+
--hp-bg-code: #0D0E12;
5+
--hp-border: #1C1E21;
6+
--hp-border-bright: #272A2E;
7+
--hp-text: #D7D9DD;
8+
--hp-text-dim: #878C99;
9+
--hp-text-muted: #5F6570;
10+
--hp-accent: #A8FF53;
11+
--hp-mono: var(--font-geist-mono), ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
12+
--hp-sans: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
13+
--hp-title: "Satoshi", var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1314

1415
background: var(--hp-bg);
1516
color: var(--hp-text);
1617
font-family: var(--hp-sans);
1718
line-height: 1.6;
1819
-webkit-font-smoothing: antialiased;
19-
background-image: radial-gradient(circle, #1a1a1a 1px, transparent 1px);
20+
background-image: radial-gradient(circle, #1C1E21 1px, transparent 1px);
2021
background-size: 24px 24px;
2122
min-height: 100vh;
2223
}
@@ -27,7 +28,7 @@
2728
/* NAV */
2829
.hp-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 20px 24px; border-bottom: 1px solid var(--hp-border); }
2930
.hp-nav-left { display: flex; align-items: center; gap: 12px; }
30-
.hp-wordmark { font-family: var(--hp-mono); font-size: 16px; font-weight: 600; color: var(--hp-text); letter-spacing: -0.02em; }
31+
.hp-wordmark { font-family: var(--hp-title); font-size: 17px; font-weight: 700; color: var(--hp-text); letter-spacing: -0.02em; }
3132
.hp-wordmark span { color: var(--hp-accent); }
3233
.hp-by-trigger { display: flex; align-items: center; gap: 5px; font-family: var(--hp-mono); font-size: 12px; color: var(--hp-text-muted) !important; transition: color 0.15s; }
3334
.hp-by-trigger:hover { color: var(--hp-text-dim) !important; }
@@ -40,8 +41,8 @@
4041
/* HERO */
4142
.hp-hero { padding: 80px 0 48px; text-align: center; }
4243
.hp-hero-label { font-family: var(--hp-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hp-accent); margin-bottom: 16px; }
43-
.hp-hero h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 20px; }
44-
.hp-hero p { font-size: 18px; color: var(--hp-text-dim); max-width: 640px; margin: 0 auto; line-height: 1.6; }
44+
.hp-hero h1 { font-family: var(--hp-title); font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 20px; }
45+
.hp-hero p { font-size: 18px; color: var(--hp-text-dim); max-width: 640px; margin: 0 auto; line-height: 1.6; font-weight: 300; }
4546

4647
/* CODE BLOCK */
4748
.hp-code-section { padding: 48px 0; }
@@ -89,21 +90,21 @@
8990
.hp-features { padding: 64px 0; }
9091
.hp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hp-border); border: 1px solid var(--hp-border); border-radius: 8px; overflow: hidden; }
9192
.hp-feature-card { background: var(--hp-bg-raised); padding: 32px 28px; }
92-
.hp-feature-card h3 { font-family: var(--hp-mono); font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--hp-text); }
93+
.hp-feature-card h3 { font-family: var(--hp-title); font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--hp-text); }
9394
.hp-feature-card p { font-size: 14px; color: var(--hp-text-dim); line-height: 1.6; }
9495
.hp-feature-card code { font-family: var(--hp-mono); font-size: 13px; color: var(--hp-accent); background: rgba(34, 197, 94, 0.08); padding: 1px 5px; border-radius: 3px; }
9596

9697
/* WORKFLOW */
9798
.hp-workflow { padding: 64px 0; }
98-
.hp-workflow h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
99+
.hp-workflow h2 { font-family: var(--hp-title); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
99100
.hp-section-subtitle { color: var(--hp-text-dim); margin-bottom: 32px; font-size: 16px; }
100101
.hp-section-subtitle a { color: var(--hp-accent); }
101102
.hp-section-subtitle code { font-family: var(--hp-mono); font-size: 14px; color: var(--hp-accent); background: rgba(34, 197, 94, 0.08); padding: 1px 5px; border-radius: 3px; }
102103
.hp-section-subtitle strong { color: var(--hp-text); }
103104
.hp-workflow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; }
104105
.hp-workflow-step { font-family: var(--hp-mono); font-size: 13px; }
105106
.hp-step-num { color: var(--hp-accent); font-size: 12px; margin-bottom: 8px; }
106-
.hp-step-title { color: var(--hp-text); font-weight: 600; margin-bottom: 6px; font-size: 14px; }
107+
.hp-step-title { font-family: var(--hp-title); color: var(--hp-text); font-weight: 600; margin-bottom: 6px; font-size: 14px; }
107108
.hp-step-desc { color: var(--hp-text-dim); line-height: 1.5; }
108109
.hp-step-desc code { font-family: var(--hp-mono); font-size: 12px; color: var(--hp-accent); background: rgba(34, 197, 94, 0.08); padding: 1px 4px; border-radius: 3px; }
109110
.hp-workflow-flow { display: flex; align-items: center; justify-content: center; padding: 32px 0; }
@@ -116,7 +117,7 @@
116117

117118
/* SKILLS */
118119
.hp-skills { padding: 64px 0; }
119-
.hp-skills h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
120+
.hp-skills h2 { font-family: var(--hp-title); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
120121
.hp-skills-install { background: var(--hp-bg-code); border: 1px solid var(--hp-border); border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
121122
.hp-skills-pre { padding: 20px; overflow-x: auto; font-family: var(--hp-mono); font-size: 12.5px; line-height: 1.7; color: var(--hp-text-dim); margin: 0; background: transparent !important; }
122123
.hp-skills-detail { display: flex; gap: 32px; }
@@ -125,10 +126,10 @@
125126

126127
/* COMPAT */
127128
.hp-compat { padding: 64px 0; }
128-
.hp-compat h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
129+
.hp-compat h2 { font-family: var(--hp-title); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
129130
.hp-compat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
130131
.hp-compat-item { background: var(--hp-bg-raised); border: 1px solid var(--hp-border); border-radius: 8px; padding: 20px 24px; font-family: var(--hp-mono); font-size: 14px; }
131-
.hp-compat-label { color: var(--hp-text); font-weight: 600; margin-bottom: 4px; }
132+
.hp-compat-label { font-family: var(--hp-title); color: var(--hp-text); font-weight: 600; margin-bottom: 4px; }
132133
.hp-compat-desc { color: var(--hp-text-dim); font-size: 13px; font-family: var(--hp-sans); }
133134

134135
/* FOOTER */

‎docs/src/app/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import './global.css';
22
import { RootProvider } from 'fumadocs-ui/provider/next';
33
import type { ReactNode } from 'react';
44
import type { Metadata } from 'next';
5+
import { GeistSans } from 'geist/font/sans';
6+
import { GeistMono } from 'geist/font/mono';
57

68
export const metadata: Metadata = {
79
title: {
@@ -13,7 +15,7 @@ export const metadata: Metadata = {
1315

1416
export default function RootLayout({ children }: { children: ReactNode }) {
1517
return (
16-
<html lang="en" suppressHydrationWarning>
18+
<html lang="en" suppressHydrationWarning className={`${GeistSans.variable} ${GeistMono.variable}`}>
1719
<body className="flex flex-col min-h-screen">
1820
<RootProvider
1921
theme={{

‎pnpm-lock.yaml‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)