Colors

Semantic tokens. Hex updates with the active palette or style.

Background--bg

Surface--surface

Text--text

Muted--muted

Border--border

Border strong--border-strong

Accent--accent

Accent hover--accent-hover

Link--link

Preview stage--stage

Hover--hover

Info--info

Success--success

Warning--warning

Danger--danger

Success bg--success-bg

Warning bg--warning-bg

Danger bg--danger-bg

Info bg--info-bg

On inverse muted--on-inverse-muted

Typography

Instrument Sans. Roles share size, weight, and line-height tokens.

Display · 36 / 700 Display

Title · 28 / 700 Title

Heading · 19 / 600 Heading

Body · 15 / 400 Body copy for long-form and marketing prose.

Label · 14 / 500 Field label

UI · 13 / 600 Button / UI

Caption · 12 / 400 Help and privacy notes

Meta · 11 / 400 Caption / meta

Spacing

Scale from --space-1 to --space-8.

1 · 4px

2 · 8px

3 · 12px

4 · 16px

5 · 24px

6 · 32px

7 · 48px

8 · 64px

Radius & shadow

Controls use --radius. Cards and frames use --radius-lg. Shadow is for raised surfaces only.

Control · 6px

Card · 10px

Raised surface

Focus

2px accent ring with 3px offset on interactive controls.

Focused control

Links

Inline and navigation links with variants and interaction states. Workspace chrome uses .header-link, aliased to nav styles.

Variants

Inline link Nav link Muted link Accent link

States (forced for demo)

Default Hover Visited Focus Disabled

In sentence

Review the terms of service before uploading, or return to the homepage blocks.

Buttons

Primary actions fill the sidebar width; secondary actions sit in toolbars. Use .primary-button--inline for marketing CTAs.

Primary

Primary disabled

Secondary

Open result ↗

Primary inline

Start processing

Forms

Site forms, workspace controls, and file upload.

Site form

Default

Name

Email

Password

At least 8 characters.

Plan

Contact preference Email No updates

Message

I agree to the terms

Error

Email

Enter a valid email address.

Disabled

Company

Workspace controls

Select

Mode

Choose how the image should be processed.

Text

Target language (2 letters)

ISO 639-1 language code.

Range

Scale 4×

1× — original size · 10× — ten times larger.

Checkbox

Enhance facesRestore details in portraits.

Upload

Image

Drop your image here or click to choose a file

JPG, PNG, WebP · up to 10 MB

photo.png · 1.2 MB

Alerts

Notices, inline errors, loading, and disabled controls.

Session notice

Results stay available in this browser session for one hour.

Processing complete

Your image is ready. Open the result or start another task.

Provider delay

The upstream model is slower than usual. Keep this page open.

Processing failed

The task timed out. Submit the image again.

Inline error

Choose an image.

Loading

Processing your image.
You can leave this page open.

Disabled fieldset

Mode

Badges

Compact status labels for processing tasks.

Default Queued Processing Done Failed

Table

Simple data table for task lists and history.

Task	Mode	Status	Updated
photo-01.png	Upscale	Done	2 min ago
cover.webp	Smart crop	Processing	Just now
scan.jpg	Improve	Queued	4 min ago
banner.png	Convert to SFW	Failed	12 min ago

Empty

Empty state for lists and pages with no data yet.

No tasks yet

When you process an image, recent tasks will appear here for this session.

Start a task

Layout

Public site shell: container, header, and footer. Workspace keeps its own app header.

Container

Centered content up to 1120px with horizontal padding from the spacing scale.

Site header

Site footer

Content

Long-form text for service pages such as Terms of Service.

Terms of Service

These terms describe how BunnyHopOps provides image processing tools. By using the service you agree to the conditions below.

1. Acceptable use

You may upload images you own or are authorized to process. Do not submit content that is illegal or that you do not have rights to.

Storage and retention

Uploaded files and results are kept for a limited time so you can download them in your session. After that window they are removed automatically.

Keep copies of important results on your own device.
Do not rely on temporary storage as a permanent archive.
Read the privacy notice for details about providers.

If you need help, contact support with the task identifier shown in your session.

Page blocks

Homepage and landing scaffolds. Legal pages use Content / .prose.

Hero

BunnyHopOps

Image tools that stay out of the way

Upscale, crop, and clean images with a calm workspace built for operators.

Start processing Read the terms

Feature row

Multiple modes

Upscale, smart crop, improve, translate, and SFW conversion in one place.

Session-safe results

Originals and outputs stay available in your browser session for a limited time.

Operator-first UI

Clear controls, quiet status, and previews that match the same stage size.

Section

Built for repeatable image work

BunnyHopOps is a focused processing desk: pick a mode, drop a file, and review the result beside the original.

Open the workspace

Steps

Step 01
Choose a mode

Select upscale, crop, improve, translate, or convert to SFW.
Step 02
Upload an image

Drop a JPG, PNG, or WebP up to 10 MB into the workspace.
Step 03
Review the result

Compare original and output, then open the processed file.

CTA banner