Refactor typography for Next.js manual setup page with clean, minimal design

Author: cursoragent

app/globals.css

@@ -147,184 +147,171 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Enhanced Typography System */
-
-/* Primary Title */
-h1 {
-  font-size: 2.5rem; /* 40px */
-  font-weight: 600;
-  line-height: 1.2;
-  margin-bottom: 1.5rem;
-  letter-spacing: -0.02em;
-}
-
-/* Step Headers (Step 1, Step 2, etc.) */
-h2 {
-  font-size: 1.875rem; /* 30px */
-  font-weight: 600;
-  line-height: 1.3;
-  margin-top: 3rem;
-  margin-bottom: 1.25rem;
-  color: var(--accent-purple);
-  border-bottom: 2px solid var(--accent-purple-light);
-  padding-bottom: 0.5rem;
-}
-
-/* Subsection Headers */
-h3 {
-  font-size: 1.5rem; /* 24px */
-  font-weight: 500;
-  line-height: 1.4;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-/* Component Headers */
-h4 {
-  font-size: 1.25rem; /* 20px */
-  font-weight: 500;
-  line-height: 1.4;
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
-}
-
-/* Enhanced Body Text */
-p {
-  font-size: 1rem; /* 16px */
-  line-height: 1.6;
-  margin-bottom: 1rem;
+* {
+  box-sizing: border-box;
 }
 
-/* Large introductory text */
-.lead-text {
-  font-size: 1.125rem; /* 18px */
-  line-height: 1.6;
-  color: var(--gray-11);
-  margin-bottom: 1.5rem;
-}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
 
-/* Small supporting text */
-.caption, .note {
-  font-size: 0.875rem; /* 14px */
-  line-height: 1.5;
-  color: var(--gray-10);
+  to {
+    opacity: 1;
+  }
 }
 
-/* Enhanced Code Typography */
-code {
-  font-size: 0.9em;
-  font-family: var(--font-family-monospace);
-  background: var(--gray-a2);
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-  color: var(--codeColor);
+#kapa-widget-portal a[href="https://sentry.io/privacy/"]
+{
+  color: rgb(134, 142, 150) !important;
 }
 
-pre {
-  font-size: 0.875rem !important; /* 14px - increased from 0.75rem */
-  line-height: 1.6 !important;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  background: var(--gray-1);
-  overflow-x: auto;
-  margin: 1.5rem 0;
-}
+/* Next.js Manual Setup Page - Enhanced Typography (Page-specific) */
+/* Target only the Next.js manual setup page */
+body:has([data-path*="nextjs/manual-setup"]) .main-content,
+.main-content:has(h1:contains("Manual Setup")),
+.content-wrapper:has([href*="nextjs/manual-setup"]),
+[data-current-pathname*="nextjs/manual-setup"] {
+  
+  /* Enhanced heading hierarchy - clean and minimal */
+  h1 {
+    font-size: 2.25rem !important; /* 36px */
+    font-weight: 600 !important;
+    line-height: 1.2 !important;
+    margin-bottom: 1.5rem !important;
+    letter-spacing: -0.015em !important;
+    color: var(--foreground) !important;
+  }
 
-pre code {
-  font-size: inherit;
-  background: transparent;
-  padding: 0;
-}
+  /* Step headers - subtle emphasis without heavy borders */
+  h2 {
+    font-size: 1.75rem !important; /* 28px */
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+    margin-top: 2.5rem !important;
+    margin-bottom: 1.25rem !important;
+    color: var(--foreground) !important;
+    position: relative !important;
+    border-bottom: none !important;
+    padding-bottom: 0 !important;
+  }
 
-/* Filename annotations */
-.filename-annotation {
-  font-size: 0.8125rem; /* 13px */
-  font-weight: 500;
-  color: var(--accent-purple);
-  background: var(--accent-purple-light);
-  padding: 0.25rem 0.75rem;
-  border-radius: 0.25rem 0.25rem 0 0;
-  margin-bottom: -1px;
-}
+  /* Subtle step indicator instead of heavy underlines */
+  h2::before {
+    content: "";
+    position: absolute;
+    left: -1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 1.5rem;
+    background: var(--accent-purple);
+    border-radius: 2px;
+    opacity: 0.6;
+  }
 
-/* Tab titles */
-.tab-title {
-  font-size: 0.875rem; /* 14px */
-  font-weight: 500;
-  padding: 0.5rem 1rem;
-}
+  /* Subsection headers */
+  h3 {
+    font-size: 1.375rem !important; /* 22px */
+    font-weight: 500 !important;
+    line-height: 1.4 !important;
+    margin-top: 2rem !important;
+    margin-bottom: 1rem !important;
+    color: var(--foreground) !important;
+  }
 
-/* Alert components */
-.alert {
-  font-size: 0.9375rem; /* 15px */
-  line-height: 1.5;
-  padding: 1rem 1.25rem;
-  border-radius: 0.5rem;
-  margin: 1.5rem 0;
-}
+  /* Component headers */
+  h4 {
+    font-size: 1.125rem !important; /* 18px */
+    font-weight: 500 !important;
+    line-height: 1.4 !important;
+    margin-top: 1.5rem !important;
+    margin-bottom: 0.75rem !important;
+    color: var(--foreground) !important;
+  }
 
-.alert-title {
-  font-size: 1rem; /* 16px */
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-}
+  /* Enhanced body text readability */
+  p {
+    font-size: 1rem !important;
+    line-height: 1.6 !important;
+    margin-bottom: 1.25rem !important;
+    color: var(--foreground) !important;
+  }
 
-/* Step indicators */
-.step-indicator {
-  font-size: 1.125rem; /* 18px */
-  font-weight: 700;
-  color: var(--accent-purple);
-  background: var(--accent-purple-light);
-  padding: 0.5rem 1rem;
-  border-radius: 2rem;
-  display: inline-block;
-  margin-bottom: 1rem;
-}
+  /* Lists with better spacing */
+  ul, ol {
+    margin: 1.25rem 0 !important;
+    padding-left: 1.5rem !important;
+  }
 
-/* List improvements */
-ul, ol {
-  margin: 1rem 0;
-  padding-left: 1.5rem;
-}
+  li {
+    margin-bottom: 0.5rem !important;
+    line-height: 1.6 !important;
+  }
 
-li {
-  margin-bottom: 0.5rem;
-  line-height: 1.6;
-  font-size: 1rem;
-}
+  /* Enhanced code blocks - larger and more readable */
+  pre {
+    font-size: 0.875rem !important; /* 14px */
+    line-height: 1.5 !important;
+    padding: 1.25rem !important;
+    margin: 1.5rem 0 !important;
+    border-radius: 0.5rem !important;
+    border: 1px solid var(--border-color) !important;
+  }
 
-/* Nested lists */
-li ul, li ol {
-  margin: 0.5rem 0;
-}
+  /* Inline code improvements */
+  code {
+    font-size: 0.9em !important;
+    padding: 0.125rem 0.375rem !important;
+    border-radius: 0.25rem !important;
+    background: var(--gray-a2) !important;
+    border: 1px solid var(--border-color) !important;
+  }
 
-/* Table of contents */
-.toc-item {
-  font-size: 0.875rem; /* 14px */
-  line-height: 1.4;
-  margin-bottom: 0.25rem;
-}
+  /* Clean alert styling - reduce visual noise */
+  .alert, [class*="alert"] {
+    background: var(--gray-a2) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 0.5rem !important;
+    padding: 1rem 1.25rem !important;
+    margin: 1.5rem 0 !important;
+    font-size: 0.9375rem !important;
+    line-height: 1.5 !important;
+  }
 
-.toc-item.active {
-  font-weight: 500;
-  color: var(--accent-purple);
-}
+  /* Tone down info alerts */
+  .alert[type="info"], [class*="alert"][data-type="info"] {
+    background: rgba(59, 130, 246, 0.05) !important;
+    border-color: rgba(59, 130, 246, 0.15) !important;
+    color: var(--foreground) !important;
+  }
 
-* {
-  box-sizing: border-box;
+  /* Tone down warning alerts */
+  .alert[type="warning"], [class*="alert"][data-type="warning"] {
+    background: rgba(245, 158, 11, 0.05) !important;
+    border-color: rgba(245, 158, 11, 0.15) !important;
+    color: var(--foreground) !important;
+  }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
+/* Responsive adjustments for Next.js page */
+@media (max-width: 768px) {
+  body:has([data-path*="nextjs/manual-setup"]) .main-content h1,
+  .main-content:has(h1:contains("Manual Setup")) h1,
+  [data-current-pathname*="nextjs/manual-setup"] h1 {
+    font-size: 2rem !important;
   }
 
-  to {
-    opacity: 1;
+  body:has([data-path*="nextjs/manual-setup"]) .main-content h2,
+  .main-content:has(h1:contains("Manual Setup")) h2,
+  [data-current-pathname*="nextjs/manual-setup"] h2 {
+    font-size: 1.5rem !important;
+    margin-top: 2rem !important;
   }
-}
 
-#kapa-widget-portal a[href="https://sentry.io/privacy/"]
-{
-  color: rgb(134, 142, 150) !important;
+  body:has([data-path*="nextjs/manual-setup"]) .main-content h2::before,
+  .main-content:has(h1:contains("Manual Setup")) h2::before,
+  [data-current-pathname*="nextjs/manual-setup"] h2::before {
+    display: none !important;
+  }
 }

src/components/apiExamples/apiExamples.module.scss

@@ -8,8 +8,7 @@
   border-top-right-radius: 0px;
   margin-top: 0;
   margin-bottom: 0;
-  font-size: 0.875rem;
-  line-height: 1.4;
+  font-size: 0.8rem;
   padding: 0.75rem;
 }
 

src/components/apiExamples/apiExamples.tsx

@@ -138,14 +138,14 @@ export function ApiExamples({api}: Props) {
           </div>
           {selectedTabView === 0 &&
             (exampleJson ? (
-              <code className="!text-[0.875rem]">
+              <code className="!text-[0.8rem]">
                 {codeToJsx(JSON.stringify(exampleJson, null, 2), 'json')}
               </code>
             ) : (
               strFormat(api.responses[selectedResponse].description)
             ))}
           {selectedTabView === 1 && (
-            <code className="!text-[0.875rem]">
+            <code className="!text-[0.8rem]">
               {codeToJsx(
                 JSON.stringify(api.responses[selectedResponse].content?.schema, null, 2),
                 'json'

src/components/codeTabs.tsx

@@ -159,7 +159,7 @@ const TabButton = styled('button')`
   display: inline-block;
   cursor: pointer;
   border: none;
-  font-size: 0.875rem;
+        font-size: 0.75rem;
   background: none;
   outline: none;
   border-bottom: 3px solid transparent;

src/components/onboarding/styles.module.scss

@@ -14,8 +14,8 @@
   padding: 8px 12px;
   overflow-wrap: break-word;
   max-width: 250px;
-  font-size: 0.8125rem;
-  line-height: 1.4;
+  font-size: 12px;
+  line-height: 1.2;
   text-align: center;
   color: var(--gray-11);
   background-color: white;
@@ -38,7 +38,7 @@
 
 .TooltipTitle {
   font-weight: bold;
-  font-size: 0.8125rem;
+  font-size: 12px;
   color: var(--gray-12);
   display: inline-block;
   width: 100%;

src/components/piiFields/style.module.scss

@@ -1,7 +1,6 @@
 .asterisk {
   margin-left: 5px;
-  font-size: 0.9375rem;
-  line-height: 1.4;
+  font-size: 0.9em;
   font-weight: normal;
 }