Skip to content
DesignMunkDesignMunk Submit a site

Gumloop

gumloop.com
Understanding a task should be the only prerequisite to automating it.
AI Software Next.js Tailwind Homepage Geist Sans Gellix
Share Visit site
gumloop.com DESKTOP · 1440
Gumloop

AI Breakdown

Design export

---
version: alpha
name: Gumloop
description: Understanding a task should be the only prerequisite to automating it.
colors:
  primary: "#18191b"
  secondary: "#fb3e97"
  tertiary: "#0190ff"
  neutral: "#fcfcfc"
  brand-cochonnet: "#fc87c0"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Gellix
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Gellix
    fontSize: 35px
    fontWeight: 500
    lineHeight: 1.29
    letterSpacing: -0.026em
  headline-sm:
    fontFamily: Gellix
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.73
    letterSpacing: -0.035em
  headline-xs:
    fontFamily: GeistSans
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.05
  body-md:
    fontFamily: GeistSans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
rounded:
  sm: 8px
  md: 10px
spacing:
  xs: 2px
  sm: 10px
  md: 20px
  lg: 24px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 8px 18px
    height: 36px
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 18px
    height: 36px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 6px
---

# Gumloop: Agent Chat Previews Drive a Calm, Ringed UI

## Overview

Gumloop's UI is a calm, product-forward system for enterprise AI. It uses a light surface (#fcfcfc), deep graphite text (#18191b), compact body copy, and understated accent color. Density is moderate: 14px body with generous modules, ample whitespace between sections, and tight, efficient components. The tone is serious and operational rather than playful—built to showcase complex workflows without visual noise.

## Colors

- Primary (#18191b): Core text, icons, and high-contrast elements.
- Secondary (#fb3e97): Marketing accents, highlights, and promotional UI only.
- Tertiary (#0190ff): Interactive accents—links, focus states, and data highlights.
- Neutral (#fcfcfc): Page background and most card surfaces.
- Brand-cochonnet (#fc87c0): Occasional brand flourish for charts or empty states.
- Surface ({colors.neutral} -> #fcfcfc): Default component backgrounds.
- On-surface ({colors.primary} -> #18191b): Text and controls that sit on the surface color.

## Typography

- Headline (Gellix): Used for all display headings. Sizes: headline-lg 48px/1/-0.025em for H1; headline-md 35px/1.29/-0.026em for section titles; headline-sm 26px/1.73/-0.035em for card and feature headers. Availability: custom/self-hosted; not guaranteed for external agents. Substitutes: Inter, Manrope, or Plus Jakarta Sans for a similar geometric grotesk tone.
- Body and UI (GeistSans): Used for subheads and all body copy. Sizes: headline-xs 19px/1.05/500 for sub-section leads; body-md 14px/1.43/400 for paragraphs, lists, tables, and interface labels. Availability: custom/self-hosted. Substitutes: Inter, IBM Plex Sans, or Work Sans.
- Emoji (Noto Color Emoji): Google-hosted for colored emoji in product shots and examples; safe to load where supported.

## Layout

- Spacing scale centers on sm 10px, md 20px, lg 24px, and xl 64px. Treat 2px as the atomic unit for hairlines and micro-gaps.
- Section rhythm: top/bottom padding at xl (64px) or 2×xl for major breaks; internal stacks use md (20px) with lg (24px) for breathing on larger modules.
- Grid: a 12-column layout with wide gutters pairs well with the compact type; cards align to 4px multiples, but spacing tokens should be preferred for consistency.
- Card padding is tight (6px) by token; nest content with md or lg spacing inside as needed.

## Elevation & Depth

Depth is delivered by a subtle 1px oklab ring in measured_shadows.sm plus microscopic soft shadows; larger shadow tiers are disabled. Hierarchy relies on whitespace, typographic scale, and tonal contrast between #fcfcfc surfaces and #18191b text. Use borders sparingly—prefer the ringed shadow for cards and previews.

## Shapes

Corners are friendly but businesslike: buttons at rounded.sm (8px) and cards at rounded.md (10px). Maintain this contrast—controls slightly tighter than containers. Avoid mixed radii within a single component; larger modules (modals, feature panels) inherit the 10px language.

## Components

Buttons
- Primary: 36px tall, 8px radius, background #18191b, text #ffffff, padding 8px 18px. Use for main CTAs like "Get Started".
- Secondary: 36px tall, 8px radius, background #ffffff, text #18191b; pair with the primary in hero and section intros.
- Link: Text-only, 0px radius; color #18191b, used inline.

Card
- Background #fcfcfc, text #18191b, 10px radius, padding 6px, with the sm ring shadow for separation.

### Hero App Preview
A wide card showing the agent console. Use card styles with the sm ring and rounded.md (10px). Headline above uses headline-lg (48px); CTA row is primary + secondary at 36px.

### Stat Strip ("Tasks Automated / Agents Deployed")
Two or more compact counters under a subhead. Typeset counters in headline-xs (19px, 500) and labels in body-md (14px). Spacing: md (20px) between items.

### Company Brain Trio
Three feature cards: Company knowledge, Skills, Live activity. Each is a card with 10px corners, internal stacks at md (20px), and subheads in headline-sm (26px).

### Chat Workspace Demo
A Slack-style channel list and thread preview. Use body-md for messages and headline-xs for channel names. Wrap the whole preview in a card with the ring shadow to float from the page.

### Controls Dashboard
Grid of governance panels (usage monitoring, audit logging, VPC). Each panel is a card; titles in headline-sm (26px), lists in body-md. Maintain lg (24px) gap between panels.

### Testimonial Stack
Quote blocks with customer logos and pull-quotes. Use headline-sm (26px) for quotes, body-md for attribution. Keep accent highlights in tertiary (#0190ff) or secondary (#fb3e97) sparingly.

### Changelog List
Dense list of recent releases. Item title in headline-xs (19px), date in body-md (14px). Stack items with sm (10px) and separate groups with md (20px).

## Do's and Don'ts

- Do pair the 48px Gellix H1 with a prominent primary button at 36px; keep negative tracking as specified.
- Do prefer the ringed sm shadow for separation instead of solid gray borders.
- Do keep body copy at 14px with 1.43 line height; this density is intentional for data-heavy sections.
- Don't use secondary (#fb3e97) or brand-cochonnet (#fc87c0) for long text or primary CTAs; reserve as accents.
- Don't add large drop shadows—md, lg, xl shadow tokens are intentionally none.
- Don't mix radii within a module; buttons 8px, containers 10px.

## Agent Prompt Guide

Quick reference
- Text: #18191b
- Background: #fcfcfc
- Border/Ring: use measured_shadows.sm (1px ring) or fallback to #18191b at low emphasis
- Accent: #0190ff (tertiary) or #fb3e97 (secondary)

1) Build the hero
"Create a full-width hero on #fcfcfc with an H1 set in Gellix 500 at 48px, line-height 1, letter-spacing -0.025em, color #18191b. Place a primary button (36px tall, 8px radius, bg #18191b, text #ffffff, padding 8px 18px) followed by a secondary button (36px, 8px radius, bg #ffffff, text #18191b). Beneath, render a large preview card with 10px radius, background #fcfcfc, and the measured_shadows.sm ring."

2) Three-up features
"On #fcfcfc, lay out three cards in a 12-col grid with lg (24px) gaps. Each card: 10px radius, 6px inner padding plus md (20px) content spacing, ring via measured_shadows.sm. Title in Gellix 500 at 26px (headline-sm), body in GeistSans 14px/1.43 #18191b. Accent bullets in #0190ff."

3) Governance dashboard row
"Create a two-row grid of four cards per row on #fcfcfc, gap lg (24px). Card titles use Gellix 500 at 26px; supporting copy GeistSans 14px. Use the sm ring shadow for each card; include small badges in #fb3e97 for alerts."

4) Testimonial block
"Stack three testimonial cards with md (20px) spacing. Quote in Gellix 500 at 26px #18191b; attribution in GeistSans 14px. Add a subtle accent rule or icon in #0190ff. Card surface #fcfcfc, 10px radius, ring shadow."

5) Changelog list
"Create a vertical list of release items. Title in GeistSans 500 at 19px (headline-xs) and description in 14px/1.43. Separate items with sm (10px) and groups with md (20px). Links in #0190ff, hover underline."

## Similar Brands

- Notion: Light surfaces and hairline separation; Gumloop is denser in body copy and uses stronger display headings.
- Linear: Monochrome UI with subtle color accents; Gumloop is less gradient-driven and more operational.
- Retool: Product-led homepage with app previews; Gumloop's corners are softer (8–10px) and typography lighter-weight.
- Anthropic: Calm, minimal palette; Gumloop adds clearer enterprise controls and repeated chat previews to ground use cases.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 5 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago