Merge pull request #242 from signalwire/Devon/styling

Branded styling

Author: Devon-White

fern/assets/fonts/Inter-Regular.ttf

@@ -0,0 +1,77 @@
+/* =============================================================================
+   SIGNALWIRE BRAND OVERRIDES
+   Applies brand tokens to Fern components. Requires brand-tokens.css.
+   ============================================================================= */
+
+/* --- Headings: neutral color, not accent (brand rule: colored headings = violation) --- */
+h1, h2, h3, h4, h5, h6,
+.fern-page-heading {
+  color: var(--fg-headings);
+  letter-spacing: -0.02em;
+}
+
+/* --- Links: brand link colors with fuchsia hover --- */
+.fern-mdx-link,
+.fern-markdown a:not([class]) {
+  transition: color 0.15s ease;
+}
+
+.fern-mdx-link:hover,
+.fern-markdown a:not([class]):hover,
+.fern-mdx-link:hover code,
+.fern-markdown a:not([class]):hover code {
+  color: var(--interactive-link-hover);
+}
+
+/* --- Inline code: brand code colors per mode --- */
+:not(pre) > code {
+  background: var(--code-bg);
+  color: var(--code-fg);
+}
+
+/* --- Sidebar: brand surface color --- */
+.fern-sidebar-container {
+  background: var(--bg-surface);
+}
+
+/* --- Tables: brand-aligned header and borders --- */
+.fern-markdown table th {
+  background: var(--table-header-bg);
+  color: var(--table-header-text);
+  border-bottom: 2px solid var(--table-border);
+}
+
+.fern-markdown table td {
+  border-bottom: 1px solid var(--table-border);
+}
+
+.fern-markdown table tr:hover td {
+  background: var(--table-row-hover);
+}
+
+/* --- Callouts: brand callout colors --- */
+.fern-callout-info {
+  background: var(--callout-info-bg);
+  border-color: var(--callout-info-border);
+}
+
+.fern-callout-warning {
+  background: var(--callout-warn-bg);
+  border-color: var(--callout-warn-border);
+}
+
+.fern-callout-danger {
+  background: var(--callout-danger-bg);
+  border-color: var(--callout-danger-border);
+}
+
+.fern-callout-success {
+  background: var(--callout-success-bg);
+  border-color: var(--callout-success-border);
+}
+
+/* --- API property keys: brand specifies code at weight 400 only.
+   Fern defaults to 600 which causes faux-bold blur with our single-weight woff2. --- */
+.fern-api-property-key {
+  font-weight: 400;
+}

fern/assets/fonts/instrument-sans.woff2

@@ -0,0 +1,118 @@
+/* =============================================================================
+   SIGNALWIRE BRAND TOKENS
+   Source: temp/signalwire-tokens.css (extracted from the brand style guide)
+   ============================================================================= */
+
+/* --- Brand palette (locked, mode-independent) --- */
+:root {
+  --sw-blue: #044EF4;
+  --sw-fuchsia: #F72A72;
+  --sw-turquoise: #40E0D0;
+  --sw-gold: #FFD700;
+
+  /* RGB channels for alpha compositing */
+  --sw-blue-rgb: 4, 78, 244;
+  --sw-fuchsia-rgb: 247, 42, 114;
+  --sw-turquoise-rgb: 64, 224, 208;
+  --sw-gold-rgb: 255, 215, 0;
+}
+
+/* --- Dark mode tokens --- */
+.dark {
+  /* Surfaces */
+  --bg-page: #0e0e18;
+  --bg-surface: #181a28;
+  --bg-surface-raised: #222436;
+
+  /* Foreground */
+  --fg-default: #f0f0f4;
+  --fg-secondary: #e8e8ec;
+  --fg-muted: #a0a0aa;
+  --fg-subtle: #73737e;
+  --fg-headings: var(--fg-default);
+  --fg-emphasis: var(--sw-turquoise);
+  --fg-emphasis-small: var(--sw-turquoise);
+
+  /* Borders */
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-strong: rgba(255, 255, 255, 0.15);
+
+  /* Inline code */
+  --code-bg: rgba(255, 255, 255, 0.06);
+  --code-fg: var(--sw-turquoise);
+
+  /* Links */
+  --interactive-link-default: var(--sw-turquoise);
+  --interactive-link-hover: var(--sw-fuchsia);
+  --interactive-link-visited: var(--fg-muted);
+
+  /* Callouts */
+  --callout-info-bg: rgba(var(--sw-blue-rgb), 0.06);
+  --callout-info-border: rgba(var(--sw-blue-rgb), 0.18);
+  --callout-warn-bg: rgba(var(--sw-gold-rgb), 0.04);
+  --callout-warn-border: rgba(var(--sw-gold-rgb), 0.16);
+  --callout-danger-bg: rgba(var(--sw-fuchsia-rgb), 0.06);
+  --callout-danger-border: rgba(var(--sw-fuchsia-rgb), 0.18);
+  --callout-success-bg: rgba(var(--sw-turquoise-rgb), 0.06);
+  --callout-success-border: rgba(var(--sw-turquoise-rgb), 0.18);
+
+  /* Tables */
+  --table-header-bg: transparent;
+  --table-header-text: var(--sw-fuchsia);
+  --table-row-hover: rgba(255, 255, 255, 0.03);
+  --table-border: rgba(255, 255, 255, 0.07);
+
+  /* Shadows */
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --shadow-glow-fuchsia: 0 0 20px rgba(var(--sw-fuchsia-rgb), 0.25);
+}
+
+/* --- Light mode tokens --- */
+:root:not(.dark) {
+  /* Surfaces */
+  --bg-page: #FAFBFC;
+  --bg-surface: #F3F4F6;
+  --bg-surface-raised: #E8EAF0;
+
+  /* Foreground */
+  --fg-default: #1A1A18;
+  --fg-secondary: #3A3A38;
+  --fg-muted: #737371;
+  --fg-subtle: #A8A8A6;
+  --fg-headings: #070c2d;
+  --fg-emphasis: var(--sw-fuchsia);
+  --fg-emphasis-small: #AB0A42; /* Darkened fuchsia — AAA on light bg (7.1:1) */
+
+  /* Borders */
+  --border-default: rgba(0, 0, 0, 0.1);
+  --border-strong: rgba(0, 0, 0, 0.18);
+
+  /* Inline code */
+  --code-bg: rgba(0, 0, 0, 0.06);
+  --code-fg: var(--sw-blue);
+
+  /* Links */
+  --interactive-link-default: var(--sw-blue);
+  --interactive-link-hover: var(--sw-fuchsia);
+  --interactive-link-visited: var(--fg-muted);
+
+  /* Callouts */
+  --callout-info-bg: rgba(var(--sw-blue-rgb), 0.06);
+  --callout-info-border: rgba(var(--sw-blue-rgb), 0.18);
+  --callout-warn-bg: rgba(var(--sw-gold-rgb), 0.04);
+  --callout-warn-border: rgba(var(--sw-gold-rgb), 0.16);
+  --callout-danger-bg: rgba(var(--sw-fuchsia-rgb), 0.06);
+  --callout-danger-border: rgba(var(--sw-fuchsia-rgb), 0.18);
+  --callout-success-bg: rgba(var(--sw-turquoise-rgb), 0.06);
+  --callout-success-border: rgba(var(--sw-turquoise-rgb), 0.18);
+
+  /* Tables */
+  --table-header-bg: var(--sw-blue);
+  --table-header-text: #ffffff;
+  --table-row-hover: rgba(0, 0, 0, 0.02);
+  --table-border: rgba(0, 0, 0, 0.1);
+
+  /* Shadows */
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-glow-fuchsia: 0 0 20px rgba(var(--sw-fuchsia-rgb), 0.15);
+}

fern/assets/fonts/jetbrains-mono-400.woff2

@@ -19,6 +19,10 @@ layout:
   tabs-placement: header
   page-width: full
 
+landing-page:
+  page: Home
+  path: products/home/pages/welcome.mdx
+
 experimental:
   ai-examples: false
 
@@ -109,14 +113,15 @@ page-actions:
   options:
     cursor: false
     vscode: false
+    ask-ai: false
 
 colors:
   accent-primary:
     light: "#044ef4" # SW Blue for light mode
     dark: "#40e0d0" # SW Turquoise for dark mode
   background:
-    light: "#ffffff" # SW White
-    dark: "#0a1628" # SW Navy (visible blue tint)
+    light: "#FAFBFC" # SW Light page (cool gray, per brand tokens)
+    dark: "#0e0e18" # SW Dark page (near-black, per brand tokens)
 
 logo:
   dark: assets/logo-no-text.svg
@@ -152,17 +157,22 @@ metadata:
 
 typography:
   headingsFont:
-    name: Neue Einstellung
+    name: Instrument Sans
     paths:
-      - path: assets/fonts/neueeinstellung-bold.woff2
+      - path: assets/fonts/instrument-sans.woff2
         weight: 700
         style: normal
-      - path: assets/fonts/neueeinstellung-medium.woff2
+      - path: assets/fonts/instrument-sans.woff2
         weight: 500
         style: normal
   bodyFont:
-    name: Inter
-    path: assets/fonts/Inter-Regular.ttf
+    name: Lexend
+    path: assets/fonts/lexend-400.woff2
+    weight: 400
+    style: normal
+  codeFont:
+    name: JetBrains Mono
+    path: assets/fonts/jetbrains-mono-400.woff2
     weight: 400
     style: normal
 
@@ -171,8 +181,14 @@ analytics:
     api-key: phc_Q78tnozKNjbx1lFBHBJkO7Qp3zLE3RISYS58cpVr7kX
 
 css:
+  - brand-tokens.css
+  - brand-overrides.css
   - styles.css
 
+
+ai-search: null
+ai-chat: null
+
 check:
   rules:
     no-circular-redirects: error

fern/assets/fonts/lexend-400.woff2

@@ -30,6 +30,28 @@ layout: custom
       <Button intent="primary" href="/docs/platform/getting-started" rightIcon="arrow-right">Get started</Button>
     </div>
 
+    {/* What are you building? */}
+    <div class="products-section">
+      <div class="section-header">
+        <h2>What are you building?</h2>
+      </div>
+
+      <CardGroup cols={4}>
+        <Card title="AI voice agent" icon="fa-regular fa-robot" href="/docs/platform/getting-started#ai-application">
+          LLM-powered phone agents and virtual assistants
+        </Card>
+        <Card title="Browser or mobile" icon="fa-regular fa-browser" href="/docs/platform/getting-started#browser-or-mobile-app">
+          WebRTC voice, video, and chat in your app
+        </Card>
+        <Card title="Server application" icon="fa-regular fa-server" href="/docs/platform/getting-started#server-application">
+          Backend call routing, SMS, and IVR systems
+        </Card>
+        <Card title="No-code" icon="fa-regular fa-diagram-project" href="/docs/platform/getting-started#no-code--low-code">
+          Drag-and-drop call flows and Dashboard AI agents
+        </Card>
+      </CardGroup>
+    </div>
+
     {/* Interfaces & SDKs */}
     <div class="products-section">
       <div class="section-header">