Brand

F-05H is the official Jingle brand direction.

The final mark is the command capsule looking right, ready to act. It is not a mascot portrait; it is a desktop command entry with a little life while staying firmly a tool.

Final mark

A command companion ready to move.

The dark rounded tile carries desktop app stability. The light capsule means command input and search. The green status dot means ready. The upper-right signal arc makes the mark feel responsive rather than static.

Command entry

It should first read as a place to search, input, and run.

Ready to act

The gaze moves right without becoming an exaggerated face.

Desktop feel

The mark is tuned for Dock, menu bar, website, and developer docs.

Assets

One mark works across real product states.

The official set covers desktop app icon, web logo, favicon, small sizes, light and dark use, flat, mono, full lockup, apparel, and merchandise previews.

Desktop app icon

Readable in the Dock, with a dark green tile and light command capsule.

JingleCommand everything

Web logo

Pairs with the Jingle wordmark in navigation and docs while staying product-like.

Favicon

Small sizes keep the capsule, search read, and green dot while reducing detail.

Light / dark

The main icon does not split into two identities; its own tile works on both backgrounds.

Flat mark

For diagrams, compact UI, and surfaces that need lower rendering complexity.

Monochrome mark

For print, embossing, partner placements, and minimal UI contexts.

Full lockup

For launch graphics, brand pages, partner pages, and full brand presence.

Apparel

Works best as a small badge rather than an oversized decorative graphic.

Merch

Fits stickers, mugs, tote bags, and lightweight team material.

Design tokens

Website tokens and brand assets stay from the same source.

The website background, panels, accents, focus ring, icon shadow, and brand previews use the same color and radius system so pages do not drift apart.

brand ink

#111816

background

#f7f4ec

panel

#fffdf7

cream

#fffff6

green

#28c97b

gold

#e5bf62

muted

#66706b

line

#dfe7dc

Radius

icon 25.5px / card 8px

Icon shadow

0 24px 38px rgba(17, 24, 22, 0.22)

Core asset paths

/brand/jingle-mark.svg
/brand/favicon.svg
/brand/jingle-lockup-light.svg

CSS variables

--background: #f7f4ec

--foreground: #111816

--muted: #66706b

--panel: #fffdf7

--soft: #edf3eb

--line: #dfe7dc

--gold: #e5bf62

--green: #28c97b

--green-dark: #1c7f61

--brand-cream: #fffff6

--brand-ink: #111816

--brand-shadow-icon: 0 24px 38px rgba(17, 24, 22, 0.22)

--radius-card: 8px

Downloads

Official asset list

Use SVG for design and web surfaces. Use PNG for app icons, favicons, small previews, documentation screenshots, and external material.