Skip to content
sysout.dev

Treeger - Brand Guidelines

Naming, icon, wordmark, palette, typography, accessibility, and asset guidance for the Treeger brand.

Name

Treeger = tree + manager.

  • tree - the file-tree structure everything in the app operates on

  • -ger - from "manager," meaning arrange, pin, and own the view

  • Always lowercase in product UI: treeger

  • No color split between "tree" and "ger"; the app is a single name

Icon

A lowercase "t" construction:

  • Vertical stem

  • Crossbar starts at the stem and extends right only

  • Stem continues down and curves into a short tail at the bottom, also to the right

The current app icon is the typographic mark from docs/assets/treeger-icon.svg. The Android adaptive icon uses the same geometry split into background and foreground vector resources.

Wordmark

  • Typeface: Merriweather Bold

  • Always lowercase, single word, single color

  • Georgia is an acceptable fallback where Merriweather is not available

Palette Source Of Truth

The implementation in app/src/main/java/dev/sysout/treeger/ui/theme/Theme.kt is the app source of truth for active theme tokens. The docs below record the intended palette values and should stay in sync with the code.

Production Color System

treeger uses one quiet neutral foundation with selectable Canopy and Bloom identity colors reserved for brand and interaction landmarks.

Light Foundation

Token Hex Use

Canvas

#F8F7F3

Large app background

Surface

#FCFCFA

Contained content and temporary overlays

Surface variant

#EFF0EC

Inputs and quiet containers

Primary ink

#182129

Titles and body content

Secondary ink

#5D686F

Metadata and supporting text

Dark Foundation

Token Hex Use

Canvas

#10161C

Large app background

Surface

#172029

Contained content and temporary overlays

Surface variant

#202A33

Inputs and quiet containers

Primary ink

#F2F1EC

Titles and body content

Secondary ink

#C2C8CC

Metadata and supporting text

Canopy Identity

Token Hex Use

Navy

#0A2947

Light-mode primary actions, selection, and focus

Dark primary

#A9C9E2

Accessible dark-mode expression of Canopy navy

Ochre

#8B5E3C

Restrained light-mode secondary accent

Dark ochre

#D7AB86

Accessible dark-mode secondary accent

Cream

#F3E4C9

Brand and marketing tint; not an app-wide surface

Sage

#D3D4C0

Brand and marketing tint; not body text

Bloom Identity

Token Hex Use

Berry

#B72550

Light-mode primary actions, selection, and focus

Dark primary

#FFB1C2

Accessible dark-mode expression of Bloom berry

Rose

#9D3B58

Restrained light-mode secondary accent

Dark rose

#E8B5C1

Accessible dark-mode secondary accent

Pale rose

#F8E8EC

Selected containers and identity tint

Error, warning, success, and informational colors are semantic. They do not change meaning between Canopy and Bloom.

Historical Palettes

Ember remains documented in older mock assets, but is not a production identity. Once the app moved to neutral surfaces, Ember overlapped Canopy’s warm earthy role.

Typography (In App)

  • Wordmark and selected display titles: Merriweather Bold or platform serif fallback

  • Filenames, body text, controls, menus, metadata: bundled IBM Plex Sans

  • The app includes Regular, Medium, and SemiBold weights under the SIL Open Font License 1.1. Material typography roles use the closest bundled weight rather than synthesizing a style.

Asset Files

File Purpose

treeger-icon.svg

App icon mark, standalone tile

treeger-lockup.svg

Icon + wordmark combined

treeger-wordmark.svg

Wordmark alone

SVGs reference Merriweather by font-family. A viewer without the font installed will fall back to Georgia/serif.

Store Asset Notes

For Google Play, prepare:

  • 512 x 512 high-res icon derived from treeger-icon.svg

  • Feature graphic

  • Phone screenshots for light and dark mode

  • Short and full descriptions that describe file management plainly

Avoid promising edit operations until copy/move/rename/delete are actually in the app.