Skip to content
DesignMunkDesignMunk Submit a site

Picmal

picmal.app
Convert and compress anything on your Mac—nothing uploads.
Apps & Mobile Software Astro Tailwind Homepage
Share Visit site
picmal.app DESKTOP · 1440
Picmal

AI Breakdown

Design export

---
version: alpha
name: Picmal
description: Convert and compress anything on your Mac—nothing uploads.
colors:
  primary: "#000000"
  secondary: "#1b5bff"
  tertiary: "#0a8fff"
  neutral: "#fbfbfb"
  brand-dodger-blue: "#3e7ff5"
  brand-fly-a-kite: "#c5d8fb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: ui-sans-serif
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.025em
  headline-md:
    fontFamily: ui-sans-serif
    fontSize: 39px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: ui-sans-serif
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.19
    letterSpacing: -0.006em
  headline-xs:
    fontFamily: ui-sans-serif
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: ui-sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.011em
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 58px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 52px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 52px
  button-link:
    textColor: "{colors.secondary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 32px
---

# Picmal: Big Offline Promise, Bright Blue CTAs

## Overview

Picmal's UI is Mac-first, direct, and utility-minded. The mood is serious but friendly: high-contrast text on a paper-white surface, one vivid blue accent, and minimal decoration. Copy does the heavy lifting, with generous type and whitespace to keep scanning fast. When tokens don't cover a case, prefer clarity over flourish, using system typography, tall tap targets, and restrained color.

## Colors

- **primary (#000000):** Core text, icons, and strong headings.
- **secondary (#1b5bff):** Links and secondary emphasis; utility CTAs in navigation.
- **tertiary (#0a8fff):** Primary action fill for buttons and key prompts.
- **neutral (#fbfbfb):** Page background, cards, and neutral surfaces.
- **brand-dodger-blue (#3e7ff5):** Supplemental blue for states, subtle gradients, or charts when needed.
- **brand-fly-a-kite (#c5d8fb):** Very light blue tint for badges, info notes, or section accents.
- **surface ({colors.neutral} → #fbfbfb):** Alias of neutral; use for containers and cards.
- **on-surface ({colors.primary} → #000000):** Alias of primary; use for text on light surfaces.

## Typography

All type uses a system UI sans declared as ui-sans-serif with tight, confident headings at weight 600 and readable body at 20px/1.6. Because no web font source is provided, rely on the platform's system stack (e.g., San Francisco on macOS, Segoe UI on Windows). Obtainable substitutes with similar tone: Inter (Google), Source Sans 3 (Google), and IBM Plex Sans (Google).
- Headline LG: 48px, 600, -0.025em, 1.12 — hero and primary section intros.
- Headline MD: 39px, 600, -0.015em, 1.21 — secondary section headings.
- Headline SM: 31px, 600, -0.006em, 1.19 — feature headings and card titles.
- Headline XS: 25px, 600, 1.2 — subheads and callouts.
- Body MD: 20px, 400, -0.011em, 1.6 — paragraphs, FAQs, pricing details.

## Layout

Spacing follows an 8–80px scale for crisp rhythm: 8, 16, 32, 58, 80. Use xl (80px) for major section top/bottom padding, lg (58px) for intra-section breathing room, and md (32px) for gutters and card padding. Small elements and inline groups use sm (16px) and xs (8px). Content reads best in a single central column with optional two-column splits for features and FAQs.

## Elevation & Depth

Depth is almost flat. Use the sm measured shadow as a 1px keyline (oklab(0 0 0 / 0.1) 0 0 0 1px) to separate cards and inputs from the background. Medium and larger shadows are none; hierarchy is handled by size, weight, and whitespace rather than blur. Light blue tints can introduce section contrast when needed.

## Shapes

Rounded corners are consistent at 8px (rounded.sm) for interactive elements and cards. Text links and button-link variants remain square (0px) to read as inline text. Don't mix radii on adjacent components; the single 8px language is the visual cue for clickability.

## Components

Buttons and cards are the core primitives.
- Button Primary: #0a8fff background, #ffffff text, 52px tall, 8px radius, 8px 16px padding. Use for buy/download CTAs.
- Button Secondary: #fbfbfb background, #000000 text, 52px tall, 8px radius. Pair with the primary in hero and pricing.
- Button Link: #1b5bff text, 0px radius. Inline, never the main CTA.
- Card: #fbfbfb background, #000000 text, 8px radius, 32px padding, optional 1px keyline via the sm shadow.

### Top Navigation
Single-row nav with text links and a right-aligned CTA. Use Body MD for links, and a primary or secondary button at 52px height for "Buy for Mac". Spacing: sm (16px) between items.

### Hero Block
Headline LG (48px/600) over Body MD explainer, followed by a primary action (#0a8fff) and a secondary button. Vertical stack uses md (32px) gaps; section padding xl (80px).

### Changelog Badge
A compact pill above the hero using Body MD at reduced opacity or the brand-fly-a-kite tint (#c5d8fb) for background, with link color #1b5bff.

### Testimonial Stack
Quotes set in Body MD with author lines beneath. Use a card container with md (32px) padding and the sm keyline rather than shadows. Separate items by lg (58px).

### Feature Grid
Series of Headline SM (31px) titles with Body MD descriptions. Two-column on wide screens with md (32px) column gap and sm (16px) row gaps.

### Pricing Selector
Card with Headline SM title, segmented count control (1/2/5/10), price in Headline MD, and a primary CTA at 52px height. Use md (32px) internal padding and the sm keyline.

### Integration Badges
Inline row for Finder, Shortcuts, and Raycast. Each item uses Body MD text with icon and xs (8px) gaps; row spacing sm (16px).

### FAQ Accordion
Headlines XS (25px) as toggles; Body MD for answers. Containers use the card keyline with 8px radius and md (32px) internal padding.

### Newsletter Subscribe (Footer)
Single input + primary button at 52px height, placed inside a card container using md (32px) padding and the sm keyline.

## Do's and Don'ts

- Do set primary CTAs with #0a8fff at 52px height and 8px radius; pair them with a neutral secondary.
- Do keep text #000000 on #fbfbfb for maximum legibility; reserve blues for actions and links.
- Do use the sm keyline (1px) for separation; avoid drop shadows beyond what's tokenized.
- Do space major sections with 80px top/bottom and 32px internal gaps.
- Don't introduce new blues; stick to #0a8fff, #1b5bff, #3e7ff5, and #c5d8fb.
- Don't shrink body text below 20px or mix corner radii other than 8px and 0px.

## Agent Prompt Guide

Quick color reference — Text: #000000, Background: #fbfbfb, Border/Keyline: oklab(0 0 0 / 0.1) 0 0 0 1px, Accent/CTA: #0a8fff (primary), Link: #1b5bff.

1) Build the hero
- Background #fbfbfb, container max-width 800px, centered with 80px top/bottom padding.
- H1: ui-sans-serif, 48px, 600, line-height 1.12, letter-spacing -0.025em, color #000000.
- Paragraph: ui-sans-serif, 20px, 400, line-height 1.6, letter-spacing -0.011em, color #000000, margin-top 16px.
- Primary button: 52px height, 8px radius, 8px 16px padding, background #0a8fff, text #ffffff, margin-right 16px.
- Secondary button: 52px height, 8px radius, 8px 16px padding, background #fbfbfb, text #000000, box-shadow: oklab(0 0 0 / 0.1) 0 0 0 1px.

2) Two-column feature grid
- Section padding: 58px top/bottom; grid gap 32px (columns) and 16px (rows).
- Each item: title set in ui-sans-serif 31px/600/1.19/-0.006em, body 20px/400/1.6.
- Icons or labels may use #3e7ff5; links use #1b5bff.

3) Pricing card with segmented control
- Card: background #fbfbfb; box-shadow: oklab(0 0 0 / 0.1) 0 0 0 1px; radius 8px; padding 32px.
- Price: ui-sans-serif 39px, 600, line-height 1.21, letter-spacing -0.015em, color #000000.
- Segmented control buttons: 32px height, radius 8px; selected uses #0a8fff text on #c5d8fb or a 1px keyline for unselected.
- CTA: primary button spec above.

4) Testimonial stack
- Container max-width 820px with 58px vertical padding; each quote in 20px/1.6 with author on the next line in 20px/600.
- Separate items by 32px; wrap the whole block in a card frame using the 1px keyline and 8px radius if needed.

5) Footer subscribe row
- Card with 32px padding, radius 8px, keyline.
- Input height 52px on #fbfbfb with 1px keyline, text #000000; button uses primary spec.
- Spacing between input and button: 16px; outer section padding: 58px.

## Similar Brands

- Raycast — Mac-centric utility site with system typography and a blue accent; Raycast is darker and more developer-oriented.
- CleanShot X — Light, crisp marketing with tall buttons and minimal shadows; uses more screenshots and micro-illustrations.
- Setapp — Mac software marketplace with clean system type; broader color palette and denser card grids.
- 1Password — Blue-led CTAs and generous whitespace; heavier illustration and a deeper component library than this single-product page.

More like this

Browse Apps & Mobile →
letsjive.io
Letsjive Apps & Mobile
Letsjive
Don’t make connecting awkward—Jive makes it easy to connect and follow up.
Homepage · 23 minutes ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 5 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 17 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 18 hours ago