Skip to content
DesignMunkDesignMunk Submit a site

Trybounty

trybounty.ai
An open marketplace where AI agents compete for results.
AI Software Tailwind Homepage Cal Sans Satoshi
Share Visit site
trybounty.ai DESKTOP · 1440
Trybounty

AI Breakdown

Design export

---
version: alpha
name: Trybounty
description: An open marketplace where AI agents compete for results.
colors:
  primary: "#202020"
  secondary: "#299c29"
  tertiary: "#9ff25f"
  neutral: "#f4f2ec"
  brand-fennel: "#93cc94"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Cal Sans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.12
  headline-md:
    fontFamily: Cal Sans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
  headline-sm:
    fontFamily: Cal Sans
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
  headline-xs:
    fontFamily: Satoshi
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Satoshi
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 18px
  md: 32px
  lg: 48px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 13px 10px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 13px 10px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Bounty: Lime Highlight Bars on a Paper Grid

## Overview

Bounty's brand is direct and energetic: a friendly marketplace layer for getting tasks done by AI agents. The UI should feel quick and trustworthy—strong headlines, clear actions, and minimal ornament. Spacing leans roomy rather than dense, and contrast is carried by deep ink text against a warm paper surface with lime accents for attention. When tokens don't specify, prefer clarity, readability, and speed to action.

## Colors

- **primary (#202020):** Deep ink for headlines, body text, and icons.
- **secondary (#299c29):** Support green for success states, badges, and graphs.
- **tertiary (#9ff25f):** Attention color for the primary CTA, text highlights, and focus elements.
- **neutral (#f4f2ec):** Paper-warm background used across the canvas and cards.
- **brand-fennel (#93cc94):** Soft fennel tint for secondary fills, tags, and supportive panels.
- **surface (#f4f2ec):** Surface color alias; use for panels and cards on the canvas.
- **on-surface (#202020):** Default text/icon color when placed on the surface.

## Typography

- Cal Sans (Google, free): Used for display levels. headline-lg 64px/1.12, headline-md 48px/1.0, headline-sm 36px/1.1 deliver the page's confident voice without bold weights. Load from Google Fonts; fall back to system-ui, Helvetica, Arial.
- Satoshi (self-hosted/custom): Used for UI and running copy. headline-xs 18px/1.22 and body-md 15px/1.4 handle captions, inputs, and paragraphs. If Satoshi isn't available, substitute Inter, Manrope, or Plus Jakarta Sans for a geometric, neutral feel.
- Guidance: Keep display weights at 400 as specified; rely on size and spacing, not heavier weights. Maintain generous letter-spacing defaults; do not artificially tighten tracking at display sizes.

## Layout

Spacing follows a measured scale: 6, 18, 32, 48, and 80px. Use 80px for major vertical section rhythm, 48px for intra-section blocks, 32px for grid gaps, and 18px for compact groups or list spacing. On a fluid 12-column grid, set gutters to 32px and keep outer padding to 48px on desktop and 18px on small screens. Align CTAs and inputs to the same baseline to preserve the fast, task-centric scan.

## Elevation & Depth

Shadows are not used. Hierarchy is created with contrast (primary text on neutral), scale (64/48/36 type levels), borders, and whitespace. Prefer 1px borders using the primary color at low opacity for definition, and rely on tonal blocks (brand-fennel or tertiary) when emphasis is required.

## Shapes

Two radii carry the language: 8px corners for cards and panels, and full (9999px) for pills and chips. Use full radius for all buttons and tags so actions read as touch-ready; keep data and content containers at 8px for structure.

## Components

Buttons
- Primary: 40px height, 13px × 10px padding, full radius. Background #9ff25f, text #202020.
- Secondary: 40px height, 13px × 10px padding, full radius. Text #202020 on transparent or neutral backgrounds.
- Link: Text-only, no radius.

Card
- Background #f4f2ec, text #202020, radius 8px, padding 16px. Use for steps, stats, and examples.

### Header Bar
- Left logo, center link to Leaderboard, right auth links and a persistent primary CTA. Keep the CTA in #9ff25f and full radius to mirror hero actions.

### Hero Headline & Highlight
- headline-lg (64px) in #202020 over neutral. Emphasize key phrase with a block highlight in #9ff25f behind the text. Subhead uses body-md.

### Request Composer (Hero Input)
- Wide input card centered below the hero copy. Radius 8px, neutral background, 1px subtle border, body-md placeholder. Pair with a primary pill CTA below.

### Stats Row
- Four cards for tasks, agents, earnings, and completion rate. Use the Card spec; reserve greens (#93cc94 or #9ff25f accents) for positive metrics.

### Category Lanes
- Three compact lists of example bounties. Set list titles in headline-xs (18px) and items in body-md with 18–32px spacing.

### How-It-Works Steps
- Four cards in a responsive grid. Step numeral and title in headline-sm (36px); details in body-md. Use neutral cards with minimal borders; avoid shadows.

### Testimonials
- Quote in body-md, attribution in headline-xs (18px). Keep line length short; use brand greens only for subtle accents or dividers.

### FAQ Accordion
- Section title in headline-sm (36px); each question label in headline-xs (18px). 1px borders separate items; answers in body-md.

### Footer
- Two columns of links plus legal. Maintain neutral background and body-md text with compact 18px spacing.

## Do's and Don'ts

Do
- Use #9ff25f for the primary CTA and text highlights only; keep other accents restrained.
- Set display copy in Cal Sans at 64/48/36px, weight 400; body in Satoshi 15px.
- Keep buttons at 40px height with full radius for consistency across header, hero, and footer.
- Space sections by 80px and inner blocks by 32–48px for a steady rhythm.

Don't
- Add drop shadows; use borders and tone instead.
- Mix additional accent colors in stats or cards without tokens.
- Bold display headings; increase size or spacing if more emphasis is needed.

## Agent Prompt Guide

Quick color reference
- Text: #202020
- Background: #f4f2ec
- Border: #202020 at 12–20% opacity
- Accent/CTA: #9ff25f (support: #93cc94, #299c29)

1) Hero with lime highlight and pill CTA
- Canvas #f4f2ec. H1 in Cal Sans 64px/1.12, weight 400, color #202020.
- Subhead in Satoshi 15px/1.4.
- Add a rectangular highlight behind a key phrase using #9ff25f (4–8px vertical pad, 8px radius).
- Primary button: 40px height, padding 13px 10px, full radius (9999px), background #9ff25f, text #202020.

2) Request Composer bar
- Centered card 800–960px wide on desktop, background #f4f2ec, 8px radius, 1px border in #202020 at 16%.
- Placeholder and typed text in Satoshi 15px; action button directly below using the Primary spec.

3) Stats row
- Four cards using: background #f4f2ec, radius 8px, padding 16px.
- Number in Cal Sans 48px, label in Satoshi 15px. Use #93cc94 bars or dots for emphasis; keep text #202020.

4) How-it-works grid
- 4-column responsive grid (2 on tablet, 1 on mobile) with 32px gaps.
- Each card: 8px radius, padding 16px, neutral background, 1px border (primary at 12–16%).
- Titles in Cal Sans 36px; body in Satoshi 15px.

5) FAQ accordion
- Section title in Cal Sans 36px.
- Each question row: 18px Satoshi label, 32px vertical padding, 1px divider in primary at 12–16%.
- Answers in Satoshi 15px with 18px spacing.

## Similar Brands

- Upwork — Marketplace green accent and pill CTAs; Bounty is warmer with a paper surface and a brighter lime highlight.
- Fiverr — Action-first layout and large numbers; Bounty is lighter, with no shadows and a softer neutral background.
- Toptal — Clear "how it works" steps and trust elements; Bounty uses a friendlier type scale and lime accents instead of blues.
- Gumroad — Warm neutral surfaces and border-light cards; Bounty is more CTA-driven with a recurring lime pill.

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