Ravenna

---
version: alpha
name: Ravenna
description: Automate the routine. Focus on impact.
colors:
  primary: "#000000"
  secondary: "#848486"
  tertiary: "#111826"
  neutral: "#fafafa"
  brand-aswad-black: "#151d1d"
  brand-brushed-metal: "#c8c8c9"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-xs:
    fontFamily: sans-serif
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 2px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 30px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#0000ee"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "#354152"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Ravenna: Slack-first helpdesk with four-tab hero rail

## Overview

Ravenna targets IT, HR, and Operations teams inside mid-market and enterprise orgs. The tone is calm, efficient, and trustworthy: light surfaces, minimal colour, and steady 500-weight type. Layouts are spacious with 16–30px rhythm and clear, pill-shaped interaction targets. The Slack-first story is reinforced through screenshots and tabbed sections that keep scanning predictable.

## Colors

- **Primary (#000000):** Default text and headline colour.
- **Secondary (#848486):** Subtext, timestamps, and muted labels.
- **Tertiary (#111826):** Action emphasis and dark UI accents; primary button background.
- **Neutral (#fafafa):** Page and card surface on light mode.
- **Brand-aswad-black (#151d1d):** Deep brand accent for rare, high-contrast elements.
- **Brand-brushed-metal (#c8c8c9):** Hairline borders, dividers, and input outlines.
- **Surface (#fafafa):** Alias to Neutral; use for base backgrounds and large cards.
- **On-surface (#000000):** Text on light surfaces; pairs with Neutral/Surface.

## Typography

- Inter handles all primary typography. Headline levels run at 38px/500 (lg), 32px/500 (md), and 24px/500 (sm) with tight letter-spacing, while body uses 16px/500 for readable dense copy. Inter is a Google font and can be loaded directly.
- Headline-xs uses a generic sans-serif at 18px/500; this resolves to the system UI sans on the user's device. If you need explicit downloadable substitutes, use Source Sans 3 or IBM Plex Sans to match the neutral, workmanlike tone.
- Keep weights at 500 for headings and body to mirror the live rhythm; reserve 600–700 only when additional emphasis is required within components like chips or tab labels.

## Layout

Spacing follows an 8-based scale with a precision micro-step: 2px (xs), 8px (sm), 16px (md), 24px (lg), and 30px (xl). Use md (16px) for internal card padding, lg (24px) for inter-block gaps, and xl (30px) for hero clusters or section rails. Sections stack in a simple, single-column flow with wide gutters and prominent content rails (e.g., the four-tab strip). The system expects generous whitespace on #FAFAFA to keep dense screenshots readable.

## Elevation & Depth

Shadows are intentionally absent (sm–xl: none). Hierarchy relies on tonal layers (#FAFAFA vs text #000000), 1px borders in #C8C8C9, and occasional inner highlights (the measured inner inset) used on large media frames. Use borders and spacing to separate blocks rather than drop shadows.

## Shapes

Corners communicate affordance. Cards and product frames use 8px radii. High-priority interactive controls—buttons, chips, and inputs—use full pills (9999px). Text links remain square (0px) to read as inline content rather than controls.

## Components

Buttons and card primitives:
- Primary Button: background #111826, text #0000ee, full-radius (9999px), 40px height, 8px×16px padding. Use for primary CTAs like "Book a demo".
- Secondary Button: text #000000 on a transparent or light surface, full-radius (9999px), 40px height, 8px×16px padding. Use when a lighter-weight action sits next to the primary.
- Link Button: text #354152, square corners, used inline or in lightweight CTAs.
- Card: background #FAFAFA, text #000000, 8px radius, 16px internal padding; add a 1px #C8C8C9 border when the card is placed on the same #FAFAFA surface.

Distinctive components on this page:
### Top Navigation with Dual CTAs
- Left-aligned wordmark; right-aligned nav plus two actions. Use a secondary button for "Add to Slack" and a link or secondary for "Request Info". Maintain 16px gaps and 40px heights.
### Email Capture + CTA Bar
- One-line input followed by a 40px-high Primary Button. Pill shape (9999px) on both, with a 1px #C8C8C9 input border and 16px horizontal padding.
### Hero Tab Rail (Agents / Workflows / Service Desk / Analytics)
- Four tabs arranged in a horizontal rail under the hero copy. Each tab uses 8px corners, 16px vertical padding, and a 1px #C8C8C9 divider; active tab may use a subtle underline or tone shift on #FAFAFA.
### Product Screenshot Frame
- Large media container using the measured inner inset highlight; 8px radius, optional #C8C8C9 border. Outer margins at 24–30px to breathe on light surfaces.
### Feature Grid (SLAs, CSAT, Forms...)
- Repeating 8px-radius cards with 16px padding, headline-xs (18px/500) titles and 16px body. Use #000000 text and #C8C8C9 dividers when listing items.
### Compliance Chip Row
- Compact pills for SOC2, HIPAA, GDPR: 9999px radius, 8px×16px padding, #000000 text with a 1px #C8C8C9 border; space chips by 8px.
### Footer Directory
- Multi-column link lists set in body-md (16px/500) with 16px row spacing and section gaps of 24px; borders #C8C8C9 above the footer as needed.

## Do's and Don'ts

- Do use #000000 for all primary text and #111826 for emphasis and CTA backgrounds.
- Do keep internal padding to 16px on cards and 8px×16px on buttons to match rhythm.
- Do add a 1px #C8C8C9 border when placing #FAFAFA cards on the #FAFAFA page surface.
- Don't introduce outer shadows; rely on borders, inner highlights, and whitespace.
- Don't square off interactive pills; full radius (9999px) is the interaction cue here.
- Don't swap the primary button's text colour; keep #0000ee unless tokens change.

## Agent Prompt Guide

Quick colour reference: text #000000 / background #FAFAFA / border #C8C8C9 / accent #111826.

1) Build a hero
- Canvas #FAFAFA. H1 set in Inter 38px, weight 500, letter-spacing -0.03em, colour #000000. Subhead in Inter 32px/500. Place an email input (1px border #C8C8C9, 16px horizontal padding, 9999px radius) followed by a Primary Button 40px high, 8px×16px padding, 9999px radius, background #111826, text #0000ee.

2) Add a four-tab rail
- Horizontal container under the hero with 24px top margin. Each tab: 8px radius, 16px vertical padding, Inter 16px/500, text #000000, bottom border #C8C8C9 on the rail; active tab may get a 2px underline in #111826.

3) Product screenshot frame
- Card wrapper 8px radius, background #FAFAFA, 16px padding, 1px border #C8C8C9. Apply an inner inset highlight similar to: rgba(255,255,255,0.2) 0 -2px 0 inset, rgba(255,255,255,0.1) 0 1px 2px inset.

4) Feature cards grid
- Three columns of cards: each 8px radius, background #FAFAFA, 16px padding, title in Inter 18px/500, body in Inter 16px/500, text #000000, 8px gap between items, 24px between rows, optional 1px #C8C8C9 divider.

5) Compliance chips
- Render SOC2 / HIPAA / GDPR as pills with 9999px radius, 8px×16px padding, 1px border #C8C8C9, text #000000, 8px spacing between chips.

## Similar Brands

- Slack: similar light canvas and pill affordances; Slack leans more colourful, while Ravenna stays with #111826 and #C8C8C9 accents.
- Linear: comparable restraint and Inter typography; Linear is darker and more motion-forward.
- Zendesk: enterprise helpdesk clarity; Zendesk uses more green brand colour where Ravenna sticks to neutral ink tones.
- Intercom: clean marketing layout with large product frames; Intercom leans on rounded gradients, while Ravenna avoids decorative effects.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #848486;
  --color-tertiary: #111826;
  --color-neutral: #fafafa;
  --color-brand-aswad-black: #151d1d;
  --color-brand-brushed-metal: #c8c8c9;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 38px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.1;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 32px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.3;
  --text-headline-md-tracking: -0.03em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.1;
  --text-headline-sm-tracking: -0.03em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.5;
  --font-inter: "Inter";
  --font-sans-serif: "sans-serif";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 30px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #0000ee;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: #354152;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Automate the routine. Focus on impact.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.518,
          0.518,
          0.525
        ],
        "hex": "#848486"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.067,
          0.094,
          0.149
        ],
        "hex": "#111826"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "brand-aswad-black": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.082,
          0.114,
          0.114
        ],
        "hex": "#151d1d"
      }
    },
    "brand-brushed-metal": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.784,
          0.784,
          0.788
        ],
        "hex": "#c8c8c9"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.98
        ],
        "hex": "#fafafa"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 30,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 38,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 32,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "sans-serif",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 500
      }
    }
  }
}