Skip to content
DesignMunkDesignMunk Submit a site

Viral

viral.app
The operating system for UGC
Analytics Software Next.js Tailwind Homepage Outfit
Share Visit site
viral.app DESKTOP · 1440
Viral

AI Breakdown

Design export

---
version: alpha
name: Viral
description: The operating system for UGC
colors:
  primary: "#09090b"
  secondary: "#fcb499"
  tertiary: "#ff743d"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Outfit
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Inter
    fontSize: 45px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.027em
  headline-sm:
    fontFamily: Outfit
    fontSize: 39px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.012em
  headline-xs:
    fontFamily: Outfit
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.014em
  body-md:
    fontFamily: Outfit
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 36px
  xl: 56px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 18px 20px
    height: 52px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 18px 20px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Viral: Pill CTAs and Warm Peach on Monochrome

## Overview

A monochrome interface with warm peach and orange accents. The personality is confident and efficient—built for operations teams running creator programs. Layouts are spacious, copy-forward, and rely on consistent pill CTAs to drive action. Use this system when clarity, speed, and repeatable structure are more important than illustration or heavy color.

## Colors

- **primary (#09090b):** Deep ink for headlines and core text.
- **secondary (#fcb499):** Soft peach for backgrounds, badges, and gentle emphasis.
- **tertiary (#ff743d):** Signal orange for primary CTAs and key highlights.
- **neutral (#ffffff):** Paper white canvas for pages and cards.
- **border (#e5e7eb):** Hairline dividers, card borders, inputs, and table rules.
- **surface ({colors.neutral}):** Surface layer equals paper white for cards and sections.
- **on-surface ({colors.primary}):** Default text color on surfaces; use for maximum contrast.

## Typography

- Display uses Outfit. Freely available from Google Fonts. Roles: headline-lg (52/1.1/500, -0.03em) for H1s; headline-sm (39/1.21/500, -0.012em) for section leads; headline-xs (34/1.21/500, -0.014em) for subheads; body-md (30/1.5/500) for lead paragraphs and large UI labels. Substitutes with similar geometry: Sora, Poppins, or Manrope.
- A single large subhead uses Inter. Freely available from Google Fonts. Role: headline-md (45/1.2/500, +0.027em) when a slightly more technical tone is needed. Substitutes: Roboto, system-ui/Segoe UI, or Helvetica Neue.
- Line lengths should stay generous; the 30px body makes short paragraphs ideal. Keep display tracking as tokenized—do not add extra letterspacing.

## Layout

Spacing follows an 8–56px scale. Build section rhythm with xl (56px) blocks between major bands, lg (36px) for intra-section groups, and md (24px) for element stacks. Cards and feature groups sit on a single-column flow that expands into simple two-column splits for comparisons and pricing. Generous white space and tight typographic contrast do the heavy lifting—keep grids simple and content-led.

## Elevation & Depth

Depth is mostly flat. Use the measured small shadow only for floating UI (e.g., app mock/screenshot cards): lab(0 0 0 / 0.02) layers with soft spreads. Everything else relies on the border token #e5e7eb for separation, plus warm peach tints for background bands. Avoid heavier shadows; hierarchy comes from spacing, borders, and tone.

## Shapes

Corners are friendly but disciplined. Cards and screenshots use rounded.sm (8px). CTAs, badges, and toggles use rounded.full (9999px) for pill silhouettes. Shape language signals action: pills invite clicks; 8px corners indicate content surfaces.

## Components

Tokened elements:
- Primary Button: #ff743d background, white text, 52px height, 18x20 padding, rounded.full.
- Secondary Button: dark text on transparent/peach backgrounds, 52px height, 18x20 padding, rounded.full.
- Link Button: text-only, no radius.
- Card: white surface, ink text, 8px corners, 16px padding, border #e5e7eb when separation is needed.

### Announcement Badge
- Use secondary #fcb499 as background with on-surface text. Rounded.full with horizontal padding sm (16px) and vertical xs (8px). Place above hero H1.

### Dual CTA Row
- Pair the primary and secondary buttons with a gap of sm (16px). Primary first; optional trailing arrow on secondary.

### App Screenshot Card
- Card token with rounded.sm (8px), border #e5e7eb, and the small measured shadow for lift. Used in the hero under the CTAs.

### Before/After Comparison
- Two side-by-side cards comparing "Without" vs "With." Headings in headline-sm (39px). Lists spaced at xs (8px).

### Three-Step How-It-Works
- Numbered steps in a simple grid. Each step title uses headline-xs (34px); stack title, copy, and links with md (24px) spacing.

### Stats Bar
- Row of four metrics (e.g., Accounts, Views). Figures set in body-md (30px/1.5/500). Use border #e5e7eb to separate items.

### Pricing Cards + Billing Toggle
- Plan cards use card token with clear dividers and a primary CTA. Billing toggle is a rounded.full control; apply border #e5e7eb and fill the active thumb with #ff743d.

### FAQ Accordion
- Each question is a border-separated row on white; titles in headline-xs. Expand areas use md (24px) padding.

## Do's and Don'ts

- Do use #ff743d only for the most important actions; it is the single accent.
- Do separate dense content with #e5e7eb borders and xl (56px) section spacing.
- Do keep cards at 8px radius and buttons at full radius for consistent shape language.
- Don't add heavy shadows; use the measured small shadow sparingly.
- Don't introduce new accent colors; secondary #fcb499 is for backgrounds and badges only.
- Don't style secondary CTAs identically to body links—maintain the 52px pill to preserve affordance.

## Agent Prompt Guide

Quick color reference — Text: #09090b, Background: #ffffff, Border: #e5e7eb, Accent: #ff743d.

1) Build a hero with oversized H1 and dual CTAs
- H1: Outfit, 52px, 500, line-height 1.1, letter-spacing -0.03em, color #09090b.
- Subcopy: Outfit, 30px/1.5/500, color #09090b at 80% opacity.
- Primary CTA: 52px height, padding 18px 20px, background #ff743d, text #ffffff, border-radius 9999px.
- Secondary CTA: 52px height, padding 18px 20px, text #09090b, border-radius 9999px.
- Section spacing: top/bottom 56px, gap between elements 24px.

2) Create a two-column Before/After comparison
- Two cards on #ffffff with border 1px #e5e7eb, border-radius 8px, padding 16px.
- Headings: Outfit, 39px, 500.
- Bullet lists: gaps 8px; card gap to heading 16px.

3) Stats bar under the hero
- Four equal items separated by 1px #e5e7eb.
- Number: Outfit, 30px/1.5/500, color #09090b.
- Label: Outfit, 30px/1.5/500 at reduced opacity.
- Bar padding: 16px–24px; outer spacing above/below 36px.

4) Pricing grid with toggle
- Grid of plan cards: background #ffffff, border 1px #e5e7eb, radius 8px, padding 16px, gaps 24px.
- Plan name: Outfit, 39px/1.21/500; price line can use Inter, 45px/1.2/500 for contrast.
- CTA per card: 52px pill in #ff743d with #ffffff text.
- Billing toggle: container radius 9999px with border #e5e7eb; active thumb/background in #ff743d.

## Similar Brands

- Zapier — Also leans on a bright orange CTA over a neutral canvas; Viral runs larger type and softer borders.
- Notion — Monochrome UI with pill accents; Notion is stricter black-and-white, Viral adds peach warmth.
- Loom — Warm accent color with generous white space; Loom uses more illustration, Viral is more screenshot-led.
- Typeform — Friendly rounded shapes and soft neutrals; Typeform relies more on beige tints, Viral is crisper with hairline dividers.

More like this

Browse Analytics →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 1 hour ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 2 hours ago
glideapps.com
Glide Blog Developer Tools
Glide Blog
A bold masthead titled The Column and an above-the-fold email capture lead into a clean two-column layout: a large, image-led feature on…
Blog · 14 hours ago
mora.com
Mora About AI
Mora About
An editorial, single-column layout centers a bold, two-weight headline and a dense but well-kerned founder letter, with selective bolding to surface the…
About · 17 hours ago