@bluefly/openstandardagents 0.2.5-RC → 0.2.7

package/website/app/ecosystem/page.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import type { Metadata } from 'next';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 
 export const metadata: Metadata = {
   title: 'Ecosystem - Open Standard Agents',
@@ -209,14 +210,14 @@ export default function EcosystemPage() {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
             {runtimes.map((runtime) => (
-              <div key={runtime.name} className="card p-6 hover:shadow-lg transition-shadow">
+              <Card key={runtime.name} variant="default" padding="md" elevation={1} hover>
                 <div className="flex items-center justify-between mb-4">
                   <span className="text-4xl">{runtime.logo}</span>
                   <StatusBadge status={runtime.status} />
                 </div>
                 <h3 className="text-xl font-semibold mb-2">{runtime.name}</h3>
                 <p className="text-gray-600">{runtime.notes}</p>
-              </div>
+              </Card>
             ))}
           </div>
         </section>
@@ -225,109 +226,125 @@ export default function EcosystemPage() {
         <section className="mb-16">
           <h2 className="text-4xl font-bold mb-6 text-primary">Integration Ecosystem</h2>
           <div className="grid md:grid-cols-2 gap-6">
-            <div className="card p-6">
-              <h3 className="text-2xl font-semibold mb-4 text-primary">Tool Integration</h3>
-              <ul className="space-y-3 text-gray-700">
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>MCP Servers:</strong> Native Model Context Protocol support</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>OpenAPI/REST:</strong> Standard HTTP API integration</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>GraphQL:</strong> Query-based data fetching</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>gRPC:</strong> High-performance RPC protocols</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>WebSockets:</strong> Real-time bidirectional communication</span>
-                </li>
-              </ul>
-            </div>
+            <Card variant="default" padding="md" elevation={1}>
+              <CardHeader>
+                <CardTitle className="text-primary">Tool Integration</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>MCP Servers:</strong> Native Model Context Protocol support</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>OpenAPI/REST:</strong> Standard HTTP API integration</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>GraphQL:</strong> Query-based data fetching</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>gRPC:</strong> High-performance RPC protocols</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>WebSockets:</strong> Real-time bidirectional communication</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
 
-            <div className="card p-6">
-              <h3 className="text-2xl font-semibold mb-4 text-primary">Data Integration</h3>
-              <ul className="space-y-3 text-gray-700">
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Vector Databases:</strong> Pinecone, Weaviate, Qdrant</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>SQL Databases:</strong> PostgreSQL, MySQL, SQLite</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>NoSQL:</strong> MongoDB, Redis, DynamoDB</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Message Queues:</strong> RabbitMQ, Kafka, SQS</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Object Storage:</strong> S3, GCS, Azure Blob</span>
-                </li>
-              </ul>
-            </div>
+            <Card variant="default" padding="md" elevation={1}>
+              <CardHeader>
+                <CardTitle className="text-primary">Data Integration</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Vector Databases:</strong> Pinecone, Weaviate, Qdrant</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>SQL Databases:</strong> PostgreSQL, MySQL, SQLite</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>NoSQL:</strong> MongoDB, Redis, DynamoDB</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Message Queues:</strong> RabbitMQ, Kafka, SQS</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Object Storage:</strong> S3, GCS, Azure Blob</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
 
-            <div className="card p-6">
-              <h3 className="text-2xl font-semibold mb-4 text-primary">Monitoring & Observability</h3>
-              <ul className="space-y-3 text-gray-700">
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>OpenTelemetry:</strong> Distributed tracing support</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Prometheus:</strong> Metrics collection and alerting</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Grafana:</strong> Visualization and dashboards</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Sentry:</strong> Error tracking and reporting</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>DataDog:</strong> Full-stack monitoring</span>
-                </li>
-              </ul>
-            </div>
+            <Card variant="default" padding="md" elevation={1}>
+              <CardHeader>
+                <CardTitle className="text-primary">Monitoring & Observability</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>OpenTelemetry:</strong> Distributed tracing support</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Prometheus:</strong> Metrics collection and alerting</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Grafana:</strong> Visualization and dashboards</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Sentry:</strong> Error tracking and reporting</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>DataDog:</strong> Full-stack monitoring</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
 
-            <div className="card p-6">
-              <h3 className="text-2xl font-semibold mb-4 text-primary">CI/CD & DevOps</h3>
-              <ul className="space-y-3 text-gray-700">
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>GitHub Actions:</strong> Automated testing and deployment</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>GitLab CI/CD:</strong> Pipeline automation</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Jenkins:</strong> Continuous integration server</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>ArgoCD:</strong> GitOps continuous delivery</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Terraform:</strong> Infrastructure as code</span>
-                </li>
-              </ul>
-            </div>
+            <Card variant="default" padding="md" elevation={1}>
+              <CardHeader>
+                <CardTitle className="text-primary">CI/CD & DevOps</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>GitHub Actions:</strong> Automated testing and deployment</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>GitLab CI/CD:</strong> Pipeline automation</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Jenkins:</strong> Continuous integration server</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>ArgoCD:</strong> GitOps continuous delivery</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Terraform:</strong> Infrastructure as code</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
           </div>
         </section>
 
@@ -335,17 +352,35 @@ export default function EcosystemPage() {
         <section className="mb-16">
           <h2 className="text-4xl font-bold mb-6 text-primary">Community & Resources</h2>
           <div className="grid md:grid-cols-3 gap-6">
-            <Link href="/docs/ecosystem/overview" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Ecosystem Overview</h3>
-              <p className="text-gray-700">Learn about the OSSA ecosystem architecture and integration patterns.</p>
+            <Link href="/docs/ecosystem/overview">
+              <Card variant="interactive" padding="md" elevation={1} className="h-full">
+                <CardHeader>
+                  <CardTitle className="text-primary">Ecosystem Overview</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-700">Learn about the OSSA ecosystem architecture and integration patterns.</p>
+                </CardContent>
+              </Card>
             </Link>
-            <Link href="/docs/ecosystem/framework-support" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Framework Support Guide</h3>
-              <p className="text-gray-700">Detailed compatibility information and migration guides for each framework.</p>
+            <Link href="/docs/ecosystem/framework-support">
+              <Card variant="interactive" padding="md" elevation={1} className="h-full">
+                <CardHeader>
+                  <CardTitle className="text-primary">Framework Support Guide</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-700">Detailed compatibility information and migration guides for each framework.</p>
+                </CardContent>
+              </Card>
             </Link>
-            <Link href="/examples" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Integration Examples</h3>
-              <p className="text-gray-700">Real-world examples of OSSA integrations across frameworks and platforms.</p>
+            <Link href="/examples">
+              <Card variant="interactive" padding="md" elevation={1} className="h-full">
+                <CardHeader>
+                  <CardTitle className="text-primary">Integration Examples</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-700">Real-world examples of OSSA integrations across frameworks and platforms.</p>
+                </CardContent>
+              </Card>
             </Link>
           </div>
         </section>

package/website/app/globals.scss

@@ -6,32 +6,206 @@
 
 @layer base {
   :root {
-    /* OSSA Brand Colors - from SCSS variables */
-    --ossa-primary: #{$ossa-primary};
-    --ossa-secondary: #{$ossa-secondary};
-    --ossa-accent: #{$ossa-accent};
-    
-    /* Semantic Colors - Muted for better visual harmony */
-    --ossa-success: #{$ossa-success};
-    --ossa-warning: #{$ossa-warning};
-    --ossa-error: #{$ossa-error};
-    --ossa-info: #{$ossa-info};
-    
-    /* Neutral Colors */
-    --ossa-dark: #{$ossa-dark};
-    --ossa-gray-900: #{$ossa-gray-900};
-    --ossa-gray-700: #{$ossa-gray-700};
-    --ossa-gray-500: #{$ossa-gray-500};
-    --ossa-gray-300: #{$ossa-gray-300};
+    /* ========================================================================
+       PRIMARY BRAND COLOR - Deep Purple
+       ======================================================================== */
+    --ossa-primary-50: #{$ossa-primary-50};
+    --ossa-primary-100: #{$ossa-primary-100};
+    --ossa-primary-200: #{$ossa-primary-200};
+    --ossa-primary-300: #{$ossa-primary-300};
+    --ossa-primary-400: #{$ossa-primary-400};
+    --ossa-primary: #{$ossa-primary-500};
+    --ossa-primary-500: #{$ossa-primary-500};
+    --ossa-primary-600: #{$ossa-primary-600};
+    --ossa-primary-700: #{$ossa-primary-700};
+    --ossa-primary-800: #{$ossa-primary-800};
+    --ossa-primary-900: #{$ossa-primary-900};
+    --ossa-primary-950: #{$ossa-primary-950};
+
+    /* ========================================================================
+       SECONDARY BRAND COLOR - Cyan Blue
+       ======================================================================== */
+    --ossa-secondary-50: #{$ossa-secondary-50};
+    --ossa-secondary-100: #{$ossa-secondary-100};
+    --ossa-secondary-200: #{$ossa-secondary-200};
+    --ossa-secondary-300: #{$ossa-secondary-300};
+    --ossa-secondary-400: #{$ossa-secondary-400};
+    --ossa-secondary: #{$ossa-secondary-500};
+    --ossa-secondary-500: #{$ossa-secondary-500};
+    --ossa-secondary-600: #{$ossa-secondary-600};
+    --ossa-secondary-700: #{$ossa-secondary-700};
+    --ossa-secondary-800: #{$ossa-secondary-800};
+    --ossa-secondary-900: #{$ossa-secondary-900};
+    --ossa-secondary-950: #{$ossa-secondary-950};
+
+    /* ========================================================================
+       ACCENT COLOR - Light Purple
+       ======================================================================== */
+    --ossa-accent-50: #{$ossa-accent-50};
+    --ossa-accent-100: #{$ossa-accent-100};
+    --ossa-accent-200: #{$ossa-accent-200};
+    --ossa-accent-300: #{$ossa-accent-300};
+    --ossa-accent-400: #{$ossa-accent-400};
+    --ossa-accent: #{$ossa-accent-500};
+    --ossa-accent-500: #{$ossa-accent-500};
+    --ossa-accent-600: #{$ossa-accent-600};
+    --ossa-accent-700: #{$ossa-accent-700};
+    --ossa-accent-800: #{$ossa-accent-800};
+    --ossa-accent-900: #{$ossa-accent-900};
+    --ossa-accent-950: #{$ossa-accent-950};
+
+    /* ========================================================================
+       DARK PURPLE - For contrast and depth
+       ======================================================================== */
+    --ossa-dark-purple-50: #{$ossa-dark-purple-50};
+    --ossa-dark-purple-100: #{$ossa-dark-purple-100};
+    --ossa-dark-purple-200: #{$ossa-dark-purple-200};
+    --ossa-dark-purple-300: #{$ossa-dark-purple-300};
+    --ossa-dark-purple-400: #{$ossa-dark-purple-400};
+    --ossa-dark-purple-500: #{$ossa-dark-purple-500};
+    --ossa-dark-purple-600: #{$ossa-dark-purple-600};
+    --ossa-dark-purple-700: #{$ossa-dark-purple-700};
+    --ossa-dark-purple-800: #{$ossa-dark-purple-800};
+    --ossa-dark-purple: #{$ossa-dark-purple-900};
+    --ossa-dark-purple-900: #{$ossa-dark-purple-900};
+    --ossa-dark-purple-950: #{$ossa-dark-purple-950};
+
+    /* ========================================================================
+       SEMANTIC COLORS
+       ======================================================================== */
+    /* Success - Green */
+    --ossa-success-50: #{$ossa-success-50};
+    --ossa-success-100: #{$ossa-success-100};
+    --ossa-success-200: #{$ossa-success-200};
+    --ossa-success-300: #{$ossa-success-300};
+    --ossa-success-400: #{$ossa-success-400};
+    --ossa-success: #{$ossa-success-500};
+    --ossa-success-500: #{$ossa-success-500};
+    --ossa-success-600: #{$ossa-success-600};
+    --ossa-success-700: #{$ossa-success-700};
+    --ossa-success-800: #{$ossa-success-800};
+    --ossa-success-900: #{$ossa-success-900};
+    --ossa-success-950: #{$ossa-success-950};
+
+    /* Warning - Amber */
+    --ossa-warning-50: #{$ossa-warning-50};
+    --ossa-warning-100: #{$ossa-warning-100};
+    --ossa-warning-200: #{$ossa-warning-200};
+    --ossa-warning-300: #{$ossa-warning-300};
+    --ossa-warning-400: #{$ossa-warning-400};
+    --ossa-warning: #{$ossa-warning-500};
+    --ossa-warning-500: #{$ossa-warning-500};
+    --ossa-warning-600: #{$ossa-warning-600};
+    --ossa-warning-700: #{$ossa-warning-700};
+    --ossa-warning-800: #{$ossa-warning-800};
+    --ossa-warning-900: #{$ossa-warning-900};
+    --ossa-warning-950: #{$ossa-warning-950};
+
+    /* Error - Red */
+    --ossa-error-50: #{$ossa-error-50};
+    --ossa-error-100: #{$ossa-error-100};
+    --ossa-error-200: #{$ossa-error-200};
+    --ossa-error-300: #{$ossa-error-300};
+    --ossa-error-400: #{$ossa-error-400};
+    --ossa-error: #{$ossa-error-500};
+    --ossa-error-500: #{$ossa-error-500};
+    --ossa-error-600: #{$ossa-error-600};
+    --ossa-error-700: #{$ossa-error-700};
+    --ossa-error-800: #{$ossa-error-800};
+    --ossa-error-900: #{$ossa-error-900};
+    --ossa-error-950: #{$ossa-error-950};
+
+    /* Info - Cyan */
+    --ossa-info-50: #{$ossa-info-50};
+    --ossa-info-100: #{$ossa-info-100};
+    --ossa-info-200: #{$ossa-info-200};
+    --ossa-info-300: #{$ossa-info-300};
+    --ossa-info-400: #{$ossa-info-400};
+    --ossa-info: #{$ossa-info-500};
+    --ossa-info-500: #{$ossa-info-500};
+    --ossa-info-600: #{$ossa-info-600};
+    --ossa-info-700: #{$ossa-info-700};
+    --ossa-info-800: #{$ossa-info-800};
+    --ossa-info-900: #{$ossa-info-900};
+    --ossa-info-950: #{$ossa-info-950};
+
+    /* ========================================================================
+       NEUTRAL COLORS
+       ======================================================================== */
+    --ossa-gray-50: #{$ossa-gray-50};
     --ossa-gray-100: #{$ossa-gray-100};
+    --ossa-gray-200: #{$ossa-gray-200};
+    --ossa-gray-300: #{$ossa-gray-300};
+    --ossa-gray-400: #{$ossa-gray-400};
+    --ossa-gray-500: #{$ossa-gray-500};
+    --ossa-gray-600: #{$ossa-gray-600};
+    --ossa-gray-700: #{$ossa-gray-700};
+    --ossa-gray-800: #{$ossa-gray-800};
+    --ossa-gray-900: #{$ossa-gray-900};
+    --ossa-gray-950: #{$ossa-gray-950};
+
     --ossa-white: #{$ossa-white};
+    --ossa-black: #{$ossa-black};
+    --ossa-dark: #{$ossa-dark};
 
-    /* Brand gradients */
+    /* ========================================================================
+       FOCUS RING COLORS - For Accessibility
+       ======================================================================== */
+    --ossa-focus-primary: #{$ossa-focus-primary};
+    --ossa-focus-secondary: #{$ossa-focus-secondary};
+    --ossa-focus-accent: #{$ossa-focus-accent};
+
+    /* ========================================================================
+       BRAND GRADIENTS
+       ======================================================================== */
     --gradient-brand: #{$gradient-brand};
     --gradient-hero: #{$gradient-hero};
     --gradient-button: #{$gradient-button};
 
-    /* Code syntax highlighting */
+    /* ========================================================================
+       TYPOGRAPHY SYSTEM
+       ======================================================================== */
+    /* Font Families */
+    --font-sans: #{$font-sans};
+    --font-mono: #{$font-mono};
+
+    /* Type Scale */
+    --text-display: #{$text-display};
+    --text-h1: #{$text-h1};
+    --text-h2: #{$text-h2};
+    --text-h3: #{$text-h3};
+    --text-h4: #{$text-h4};
+    --text-h5: #{$text-h5};
+    --text-h6: #{$text-h6};
+    --text-body: #{$text-body};
+    --text-small: #{$text-small};
+
+    /* Line Heights */
+    --leading-display: #{$leading-display};
+    --leading-h1: #{$leading-h1};
+    --leading-h2: #{$leading-h2};
+    --leading-h3: #{$leading-h3};
+    --leading-h4: #{$leading-h4};
+    --leading-h5: #{$leading-h5};
+    --leading-h6: #{$leading-h6};
+    --leading-body: #{$leading-body};
+    --leading-small: #{$leading-small};
+
+    /* Letter Spacing */
+    --tracking-display: #{$tracking-display};
+    --tracking-h1: #{$tracking-h1};
+    --tracking-normal: #{$tracking-normal};
+
+    /* Font Weights */
+    --font-normal: #{$font-normal};
+    --font-medium: #{$font-medium};
+    --font-semibold: #{$font-semibold};
+    --font-bold: #{$font-bold};
+    --font-extrabold: #{$font-extrabold};
+
+    /* ========================================================================
+       CODE SYNTAX HIGHLIGHTING
+       ======================================================================== */
     --code-bg: #{$code-bg};
     --code-text: #{$code-text};
     --code-keyword: #{$code-keyword};
@@ -41,14 +215,75 @@
 
   html {
     scroll-behavior: smooth;
+    font-family: $font-sans;
   }
 
   body {
     @apply font-sans text-gray-900 bg-white antialiased;
+    font-size: $text-body;
+    line-height: $leading-body;
+    font-weight: $font-normal;
+  }
+
+  /* ========================================================================
+     TYPOGRAPHY HIERARCHY - Based on Issue #44 Brand Guide
+     ======================================================================== */
+  
+  /* Display - For hero sections */
+  .text-display {
+    font-size: $text-display;
+    line-height: $leading-display;
+    font-weight: $font-extrabold;
+    letter-spacing: $tracking-display;
+  }
+
+  h1, .h1 {
+    font-size: $text-h1;
+    line-height: $leading-h1;
+    font-weight: $font-bold;
+    letter-spacing: $tracking-h1;
+  }
+
+  h2, .h2 {
+    font-size: $text-h2;
+    line-height: $leading-h2;
+    font-weight: $font-bold;
+  }
+
+  h3, .h3 {
+    font-size: $text-h3;
+    line-height: $leading-h3;
+    font-weight: $font-semibold;
+  }
+
+  h4, .h4 {
+    font-size: $text-h4;
+    line-height: $leading-h4;
+    font-weight: $font-semibold;
+  }
+
+  h5, .h5 {
+    font-size: $text-h5;
+    line-height: $leading-h5;
+    font-weight: $font-semibold;
+  }
+
+  h6, .h6 {
+    font-size: $text-h6;
+    line-height: $leading-h6;
+    font-weight: $font-semibold;
+  }
+
+  /* Body text */
+  p, .text-body {
+    font-size: $text-body;
+    line-height: $leading-body;
   }
 
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-sans font-semibold;
+  /* Small text */
+  small, .text-small {
+    font-size: $text-small;
+    line-height: $leading-small;
   }
 
   code {