Merge branch 'main' into guardrails

Author: Viehzeug

docs/assets/invariant.css

@@ -7,14 +7,18 @@
     src: url("./NeueMontreal-Medium.otf") format("opentype");
     font-weight: 500;
 }
+
+
 body {
-    font-family: NeueMontreal, system-ui, -apple-system, "Helvetica Neue", sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     margin: 0;
     padding: 0;
     position: relative;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased !important;
     text-rendering: optimizeLegibility;
+    
+    background-color: #f6f6f6;
 
     --text-color: #0C0C13;
 }
@@ -30,7 +34,7 @@ body {
 }
 
 h1 {
-    font-family: NeueMontreal, system-ui, -apple-system, "Helvetica Neue", sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .md-header {
@@ -41,7 +45,7 @@ h1 {
 
 .md-header__topic {
     color: var(--text-color);
-    font-weight: 300 !important;
+    font-weight: 500 !important;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
@@ -70,10 +74,9 @@ h1 {
     color: var(--text-color);
 
     color: #0C0C13;
-    font-family: "NeueMontreal";
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 38px;
     font-style: normal;
-    font-weight: 400;
     line-height: 52px;
     letter-spacing: 0.55px;
     margin-bottom: 20pt;
@@ -133,6 +136,7 @@ div.subtitle {
     font-size: 18pt;
     opacity: 0.5;
     margin-bottom: 0pt;
+    font-weight: 500;
 }
 
 p>img:not(.inline-invariant) {
@@ -181,16 +185,16 @@ a.tile {
     display: inline-block;
     flex: 1;
     min-width: 228pt;
-    background-color: rgb(239, 239, 239);
+    background-color: white;
     border-radius: 5pt;
     padding: 10pt;
     margin: 10pt;
-    transition: background-color 0.2s;
+    border: 2pt solid #E5E5E5;
 }
 
 a.tile:hover {
     text-decoration: none;
-    background-color: rgb(225, 225, 225);
+    background-color: rgb(240, 240, 240);
 }
 
 a.tile span {
@@ -211,7 +215,7 @@ a.tile span:nth-child(2) {
 
 strong {
     font-weight: 600 !important;
-    font-family: NeueMontreal, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 blockquote {
@@ -247,8 +251,13 @@ figure.wide {
     max-width: 500pt !important;
 }
 
+h1 {
+    font-weight: 600 !important;
+}
+
 h2, h3, h4 {
     margin-top: 40pt !important;
+    font-weight: 500 !important;
 }
 
 h2 {
@@ -375,7 +384,7 @@ label.md-nav__title {
 
 .overview {
     --body-blue: #6a7aff;
-    --primary-blue: #3e3aff;
+    --primary-blue: #3d3affac;
     border-radius: 4pt;
     display: flex;
     flex-direction: row;
@@ -384,6 +393,11 @@ label.md-nav__title {
     align-items: center;
 }
 
+
+.md-sidebar__scrollwrap {
+    background-color: #f6f6f6;
+}
+
 .overview .box {
     border-radius: 4pt;
     text-decoration: none;
@@ -413,7 +427,7 @@ label.md-nav__title {
 }
 
 .overview .online {
-    border: 1pt dashed var(--primary-blue);
+    border: 2pt dashed var(--primary-blue);
     width: calc(100% - 50pt);
     height: 90pt;
     position: absolute;
@@ -431,7 +445,7 @@ label.md-nav__title {
 }
 
 .offline {
-    border: 1pt dashed var(--primary-blue);
+    border: 2pt dashed var(--primary-blue);
     width: calc(62.5%);
     left: -1pt;
     z-index: 0;
@@ -459,7 +473,6 @@ label.md-nav__title {
     position: absolute;
     top: -25pt;
     left: -25%;
-    /* border-top: 1pt dashed rgb(204, 204, 204); */
     background: none;
     background-color: transparent;
 }
@@ -505,7 +518,7 @@ label.md-nav__title {
 .overview .box.clear {
     background-color: white;
     color: var(--primary-blue);
-    border: 1pt solid var(--primary-blue);
+    border: 2pt solid var(--primary-blue);
 }
 
 .overview .box.clear:hover {
@@ -538,8 +551,8 @@ label.md-nav__title {
 .overview .box.thirdparty {
     background-color: white;
     color: grey;
-    border-width: 1pt;
-    border-color: grey;
+    border-width: 2pt;
+    border-color: #E5E5E5;
     min-height: auto;
     height: auto;
     white-space: nowrap;
@@ -581,4 +594,48 @@ iframe {
     z-index: 1;
     background-image: url("/assets/logo.svg");
     background-size: 1.125em;
+}
+
+.md-typeset .md-code__content {
+    border-radius: 5pt;
+    font-size: 12pt;
+}
+
+code {
+    border-radius: 5pt;
+    border: 2pt solid #E5E5E5;
+    background-color: white !important;
+}
+
+.md-grid {
+    max-width: 100%;
+    margin-left: 0pt;
+}
+
+.md-content {
+    max-width: 40rem;
+    margin: auto;
+}
+
+.md-header {
+    background-color: #f6f6f6;
+    height: 41pt;
+}
+.md-header__topic {
+    font-size: 16pt;
+    font-family: NeueMontreal,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+    font-weight: 500;
+}
+.md-header img {
+    width: 20pt !important;
+    height: 20pt !important;
+    margin-right: -3pt;
+}
+
+.md-nav__title {
+    box-shadow: none !important;
+}
+
+.md-nav--primary .md-nav__title[for=__drawer], .md-nav__title {
+    background: transparent !important;
 }

docs/gateway/index.md

@@ -15,11 +15,11 @@ This enables you to _easily observe and debug_ your agent applications without a
 
 ## Features
 
-- ✅ **Single Line Setup**: Just change the base URL of your LLM to the Invariant Gateway.
-- ✅ **Intercepts agents on an LLM-level** for better debugging and analysis.
-- ✅ **Tool Calling and Computer Use Support** to capture all forms of agentic interactions.
-- ✅ **Seamless forwarding and LLM streaming** to OpenAI, Anthropic, and others.
-- ✅ **Stores and organize runtime traces** in the [Invariant Explorer](https://explorer.invariantlabs.ai/).
+- **Single Line Setup**: Just change the base URL of your LLM to the Invariant Gateway.
+- **Intercepts agents on an LLM-level** for better debugging and analysis.
+- **Tool Calling and Computer Use Support** to capture all forms of agentic interactions.
+- **Seamless forwarding and LLM streaming** to OpenAI, Anthropic, and others.
+- **Stores and organize runtime traces** in the [Invariant Explorer](https://explorer.invariantlabs.ai/).
 
 ## Getting Started as a Security Admin
 

docs/index.md

@@ -6,9 +6,9 @@ title: Welcome
 
 <div class='subtitle'>A security and debugging layer for agentic AI systems.</div>
 
-The Invariant eco-system offers a toolchain for building and securing agentic AI systems. It can be used both to build secure agentic AI systems _from scratch_, and to _secure existing or deployed AI agents_ in an organization.
+Invariant offers a toolchain for building and securing agentic AI systems. It supports building secure agentic AI systems _from scratch_, and to _secure existing or deployed AI agents_ in an organization.
 
-For this, it relies on an entirely transparent proxy that intercepts and traces the LLM calls of your agent. This enables security guardrailing and insights during development and operation, without requiring any code changes to the actual agent system.
+For this, the _Invariant Gateway_ intercepts and traces the LLM calls of your agent. This enables security guardrailing and insights during development and operation, without requiring any code changes.
 
 <div class='overview small'>
     <div class='clear box thirdparty'>