Skip to content
DesignMunkDesignMunk Submit a site

Streamline AI

streamline.ai
Take back legal's time with streamlined AI intake, triage, and automation.
AI Software Webflow Homepage DM Sans Sentient
Share Visit site
streamline.ai DESKTOP · 1440
Streamline AI

AI Breakdown

Design export

---
version: alpha
name: Streamline AI
description: Take back legal's time with streamlined AI intake, triage, and automation.
colors:
  primary: "#666666"
  secondary: "#e2f0d5"
  tertiary: "#20429b"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-armor-wash: "#040404"
  brand-anode: "#8ca4cc"
  brand-arctic-glow: "#c9d1e7"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Sentient
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Sentient
    fontSize: 34px
    fontWeight: 300
    lineHeight: 1.32
    letterSpacing: -0.059em
  headline-sm:
    fontFamily: DM Sans
    fontSize: 28px
    fontWeight: 300
    lineHeight: 1.21
    letterSpacing: -0.017em
  headline-xs:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.21
  body-md:
    fontFamily: DM Sans
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: -0.02em
rounded:
  sm: 8px
spacing:
  xs: 4px
  sm: 12px
  md: 32px
  lg: 80px
  xl: 170px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 15px 16px
    height: 100px
  button-secondary:
    backgroundColor: "#f7f7f7"
    textColor: "#1b1b1b"
    rounded: "{rounded.sm}"
    padding: 15px 16px
    height: 100px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Streamline AI: Elegant Serif Hero with Courtroom-Blue CTAs

## Overview

Professional, trustworthy, and product-led. The interface favors white surfaces, gray text, and one authoritative blue accent to keep focus on claims and proof (stats, screenshots, compliance). Spacing is generous and rhythmic—sections open up with large vertical padding, while component internals are compact and efficient. Overall tone: serious, analytical, and modern, aimed at in-house legal and legal-ops buyers.

## Colors

- Primary (#666666): Default text color for body copy and secondary headings.
- Secondary (#e2f0d5): Subtle positive/affirmation tint for backgrounds, banners, or success cues.
- Tertiary (#20429b): Primary accent for CTAs, key links, and focused highlights.
- Neutral (#ffffff): Base surface for pages, cards, and modals.
- Border (#e5e7eb): Dividers, table rules, input outlines; keeps depth minimal and clean.
- Brand-armor-wash (#040404): Near-black for high-contrast marks or logotypes when needed.
- Brand-anode (#8ca4cc): Supportive blue for illustrations, gradient washes, or empty states.
- Brand-arctic-glow (#c9d1e7): Pale blue for panel fills, hero highlights, or step backdrops.
- Surface (#ffffff): Alias of Neutral; primary canvas.
- On-surface (#666666): Alias of Primary; text on light surfaces.

## Typography

- Sentient (headlines): Custom/self-hosted. Not Google-loadable for agents. Use for headline-lg (40/1.2/400) and headline-md (34/1.32/300, -0.059em). Suitable substitutes: Fraunces (Google), Playfair Display (Google), or Cormorant Garamond (Google) to keep the refined, editorial serif feel.
- DM Sans (body and small heads): Google font. Used for headline-sm (28/1.21/300, -0.017em), headline-xs (24/1.21/300), and body-md (20/1.5/300, -0.02em). Load via Google Fonts; it provides reliable legibility and a neutral tone that pairs well with a serif display.
- Usage: Restrict Sentient (or its substitutes) to top-level headings and numerical KPIs; run all long-form copy, UI labels, nav, and controls in DM Sans.

## Layout

- Spacing scale: xs 4, sm 12, md 32, lg 80, xl 170.
- Section rhythm: use lg (80px) to xl (170px) for top/bottom padding. Within sections, stack blocks on md (32px). Micro relationships—labels to inputs, icon + text—use sm (12px) and xs (4px).
- Content width is centered with generous margins; multi-column rows (stats, integrations) align on a simple grid with even gutters derived from md (32px).

## Elevation & Depth

- Shadows: none by default; depth is communicated through white space, borders (#e5e7eb), and subtle tonal panels using brand-anode/arctic-glow.
- The measured inner shadow is reserved for pressed or inset states (inputs, toggles). Avoid drop shadows for cards and dialogs; use borders and contrast instead.

## Shapes

- Radius language: sm = 8px. Apply to buttons, cards, inputs, and screenshot frames. The square link button (0px) is the exception and reads as textual affordance. Keep all new components on 8px to maintain consistency.

## Components

Buttons
- Primary: Background #20429b, text #ffffff, radius 8px, padding 15px 16px, height 100px. Use for the main CTA (Request a Demo). Keep labels short; vertically center text.
- Secondary: Background #f7f7f7, text #1b1b1b, radius 8px, padding 15px 16px, height 100px. Use when presenting an alternate, less emphatic action.
- Link: Text #666666, radius 0. Use inline or as quiet tertiary actions.

Card
- Background #ffffff, text #666666, radius 8px, padding 16px. Add a 1px border (#e5e7eb) when grouping dense content.

Distinctive page components
### Hero headline with bracketed highlight
- Typeset headline-lg (Sentient 40px). Emphasize a key phrase on a pale panel using brand-arctic-glow (#c9d1e7). Actions: primary (#20429b) and secondary buttons placed side by side on md (32px) gap.
### Product screenshot stage
- Wide media card with 8px radius. Optional gradient wash using brand-anode (#8ca4cc) → brand-arctic-glow (#c9d1e7). Border #e5e7eb; no outer shadow.
### KPI stat bar (10x, 50%, 40%, 65%)
- Four columns. Numerals in headline-md (Sentient 34px, -0.059em). Labels in body-md (DM Sans 20px). Grid gaps on md (32px); top/bottom padding lg (80px).
### Three-step "How it works"
- Three cards for Intake, Orchestrate, Execute. Titles in headline-xs (DM Sans 24px); descriptions in body-md (20px). Card padding 16px, radius 8px, borders #e5e7eb.
### Testimonials stack
- Quote text in headline-sm (DM Sans 28px); attribution in body-md (20px). Card background #ffffff with 1px border #e5e7eb; spacing md (32px) between items.
### Integrations strip
- Logo grid on a neutral surface with cell borders #e5e7eb. Use md (32px) gutters; hover states use a faint panel fill in brand-arctic-glow (#c9d1e7) at very low opacity.
### Security & compliance badges
- Inline badge row for SOC2, GDPR, SSO, etc. Set on a card with 8px radius; icons align on a 12px grid; copy in body-md.

## Do's and Don'ts

- Do reserve #20429b for primary actions and the most important interactive states.
- Do keep headlines in Sentient (or its substitutes) and all UI/body copy in DM Sans to preserve the high-trust tone.
- Do structure sections with lg–xl vertical padding and md internal gaps; use borders (#e5e7eb) instead of shadows.
- Don't introduce new radii; keep components at 8px, with link-style actions at 0px.
- Don't reduce text color below #666666 on white; contrast matters for a legal audience.
- Don't style tertiary links as buttons—use the link variant to avoid competing with the primary CTA.

## Agent Prompt Guide

Quick color reference
- Text: #666666
- Background: #ffffff
- Border: #e5e7eb
- Accent (primary action): #20429b

1) Hero with serif headline and two CTAs
- Container: background #ffffff; vertical padding 170px top/bottom.
- H1: font-family "Sentient", "Fraunces", Georgia, serif; size 40px; line-height 1.2; color #666666.
- Subhead: font-family "DM Sans", system-ui, sans-serif; size 20px; line-height 1.5; color #666666; letter-spacing -0.02em; max-width ~70ch.
- Buttons: Primary — background #20429b, text #ffffff, height 100px, radius 8px, padding 15px 16px. Secondary — background #f7f7f7, text #1b1b1b, same size. Gap 32px.
- Emphasize a phrase by placing it on a panel with background #c9d1e7 and 8px radius.

2) Four-up KPI stats row
- Section padding 80px; border-top and border-bottom 1px solid #e5e7eb.
- Number: font-family "Sentient", "Fraunces", Georgia, serif; size 34px; line-height 1.32; letter-spacing -0.059em; color #666666.
- Label: font-family "DM Sans"; size 20px; line-height 1.5; color #666666.
- Layout: 4 equal columns with 32px gutters.

3) Three-step process cards
- Grid of 3 cards; gap 32px; section padding 80px.
- Card: background #ffffff; border 1px solid #e5e7eb; radius 8px; padding 16px.
- Step title: "DM Sans" 24px/1.21; body: "DM Sans" 20px/1.5 -0.02em; accents in #20429b.

4) Testimonial card
- Card: #ffffff, 1px border #e5e7eb, radius 8px, padding 16px.
- Quote: "DM Sans" 28px/1.21; color #666666.
- Attribution: "DM Sans" 20px/1.5; color #666666.
- Optional divider between quote and attribution using #e5e7eb.

## Similar Brands

- Ironclad: Similar law-grade credibility with blue accents; Ironclad leans heavier on product chrome and denser UI shots.
- Clio: Blue-forward legal software with approachable sans; Streamline adds a refined serif for headlines to skew more enterprise.
- DocuSign: Corporate blue and white, compliance-led messaging; Streamline is lighter on gradients and keeps typography more editorial.
- Airtable: Clean white canvas and spacious rhythm; Streamline trades playful color for stricter enterprise tones.

More like this

Browse AI →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 23 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 23 minutes ago
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago