Brand and style guide

Brand

The name and the mark.

The theme is called Nocturne: warm ivory ink on plum-black paper, accents like printed inks and an editorial serif. Surfaces are solid with hairline edges. No glass, blur or glow blobs.

Purr Room

The wordmark, and the lockup from the app’s header: mark, a quarter of its width as a gap, then the name.

How to write it

Purr Room. Two words, both capitalised.
Display use. In the wordmark, the app’s header and page titles, set the second word in italic: Purr Room.
Running text. Plain Purr Room, with no italic or bold.
The subscription. Purr Room Plus the first time, then Plus.
The web address is the only lowercase form: purr-room.aimantas.com.
Never PurrRoom, Purr room, Purr-Room, or capitals outside a small-caps label.

The cat mark

A cat face in one line, eyes closed. It is the app’s own drawing converted to SVG: a box 100 wide by 87 high, stroked at 6% of the width with round caps and joins (1.8 pt at the app’s 30 pt size). Ink on room or card.

Clear space and size

Keep a quarter of the mark’s width clear on every side. Beside the name the gap is that same quarter: 8 pt next to a 30 pt mark in the app.

64, 32 and 20 px. The mark is never drawn smaller than 20 px wide.

App icon

The sleeping cat between sound waves. Use the artwork as supplied. On the web, round the corners at 22% of the width; iOS applies its own mask.

64, 32 and 24 px. Below 24 px, use the name alone.

Do and don’t

Do pair the mark and the name in ink, on room or card.
Do use the mark alone in ink, at 20 px or larger.
Do use the app icon as supplied, with rounded corners.
Don’t fill the face, add whiskers or redraw it.
Don’t tint it, glow it or stretch it. Colour belongs to sounds.
Don’t italicise the first word, join the words or set the name in sans.

Colour

Ivory ink on plum-black paper.

Warm neutrals for the room, cards and text. Accents work like printed inks: one per sound family, pink for a loved sound and gold for Plus. Text is ink, muted or faint; accents mark a family or a state, never a paragraph.

Each ratio is the WCAG 2.2 contrast against the room and against a card, computed from the hex values at build time and rounded down to one decimal. AAA is 7:1 or more and AA 4.5:1, both fine for any text. Large is 3:1: enough for text from 24 px (18.7 px bold) and for the edges of controls. Below 3:1 is decoration only. Ratios are for flat colour; the film grain averages out to the room colour.

Surfaces

Room #0E0C12
Color.room --room
Page and screen background: the paper. Film grain sits on it.
On room
Same colour
On card
1.1:1 Decoration
Surface #1B1822
Color.surface --card
Cards and grouped lists.
On room
1.1:1 Decoration
On card
Same colour
Surface high #27232F
Color.surfaceHigh --raised
Glyph tiles, the mini player and pressed fills.
On room
1.2:1 Decoration
On card
1.1:1 Decoration
Line #37313F
Color.line --line
Hairlines, card borders and idle rings. Decoration only.
On room
1.5:1 Decoration
On card
1.3:1 Decoration

Text

Ink #F4EFE8
Color.ink --ink
Titles, names, primary text and the primary button.
On room
16.9:1 AAA
On card
15.2:1 AAA
Muted #B4ADB9
Color.muted --muted
Body copy, subtitles and idle glyphs.
On room
8.9:1 AAA
On card
8.0:1 AAA
Faint #8C8592
Color.faint --faint
Captions, specs and counts. Not on raised tiles.
On room
5.4:1 AA
On card
4.9:1 AA

Accents

Calm #AFA2DE
Color.calm --calm
Calm family. Lilac.
On room
8.3:1 AAA
On card
7.5:1 AAA
Hunt #E4A96E
Color.hunt --play
Attract and play family. Apricot.
On room
9.4:1 AAA
On card
8.4:1 AAA
Ultra #86BCD8
Color.ultra --band
Cat-only band. Steel blue.
On room
9.4:1 AAA
On card
8.4:1 AAA
Good #E0909F
Color.good --good
The Loves it rating and heart counts.
On room
8.0:1 AAA
On card
7.2:1 AAA
Plus #D9BA7C
Color.plus --plus
Purr Room Plus and nothing else. Antique gold.
On room
10.4:1 AAA
On card
9.3:1 AAA
Bad #5E5866
Color.bad --bad
Defined in the theme, not used on screen. Never for text.
On room
2.8:1 Decoration
On card
2.5:1 Decoration

Sound tones

Each sound has its own shade inside its family, so overlapping traces in the pulse line and the hearing map stay apart. While a sound plays, its tone colours its glyph, its row and the play button. The first sound in each family uses the family colour itself.

Calm

Purr #AFA2DE
Room 8.3:1 AAA Card 7.5:1 AAA
Kitten Lullaby #9CAEE0
Room 8.8:1 AAA Card 7.9:1 AAA
Mother’s Heartbeat #CF9AC6
Room 8.4:1 AAA Card 7.5:1 AAA
Soft Hush #C2BAD8
Room 10.4:1 AAA Card 9.4:1 AAA

Attract and play

Trill Call #E4A96E
Room 9.4:1 AAA Card 8.4:1 AAA
Birdsong #E6C27F
Room 11.4:1 AAA Card 10.3:1 AAA
Pspsps #E19A86
Room 8.4:1 AAA Card 7.6:1 AAA
Mouse in Leaves #D6B496
Room 10.0:1 AAA Card 9.0:1 AAA

Real recordings

Sparrows #E8B98F
Room 10.8:1 AAA Card 9.8:1 AAA
Paper Bag #D9A982
Room 9.2:1 AAA Card 8.2:1 AAA
Food Can #E6BE9C
Room 11.3:1 AAA Card 10.1:1 AAA
Zebra Finch #EFCB9E
Room 12.6:1 AAA Card 11.4:1 AAA
Leaf Rustle #CDB487
Room 9.6:1 AAA Card 8.7:1 AAA
House Fly #C4B29A
Room 9.4:1 AAA Card 8.4:1 AAA
Cricket #D6C38E
Room 11.1:1 AAA Card 10.0:1 AAA
Mouse Squeaks #E2A693
Room 9.3:1 AAA Card 8.4:1 AAA

Cat-only band

Ultra Squeaks #86BCD8
Room 9.4:1 AAA Card 8.4:1 AAA
Ultra Cricket #9FCBDF
Room 11.1:1 AAA Card 10.0:1 AAA
Ultra Rustle #A7B6E2
Room 9.6:1 AAA Card 8.6:1 AAA

Purr Room Plus

Plus gold, #D9BA7C

Gold means Plus and nothing else: the Plus badge, the lock on locked sounds and mixes, the paywall’s eyebrow, the Plus button in the app’s header and the gold tier on this site. Never use it for warnings or general highlights.

Room 10.4:1 AAA Card 9.3:1 AAA

Pairs that matter

Primary button label: room on ink16.9:1 AAA
Body on a card: muted on card8.0:1 AAA
Specs on a card: faint on card4.9:1 AA
Specs on a raised tile: faint on raised. Use muted there.4.3:1 Large
Muted on raised7.0:1 AAA
Selected Loves it chip: room on good8.0:1 AAA
Hairline on room. Never the only edge that shows a control.1.5:1 Decoration

Type

A serif for names, a sans for controls.

Titles, sound names, cat names and mixes use the serif. Buttons, labels, body text and specs use the system sans. Italic in the serif marks the one phrase a heading turns on.

Display serif

New York in the app, semibold by default. Newsreader on the web: SIL Open Font License, subset to Latin, one weight (500) in roman and italic. Browsers don’t synthesise bold from it.

UI sans

SF Pro in the app: semibold for controls and labels, regular for body text. The system sans on the web, which is SF Pro on Apple devices. Specs, levels and counts use tabular figures.

App type scale

Sizes at the default text size. Every style scales with Dynamic Type.

Page titleNew York semibold, 40 pt
Purr Room
Section titleNew York semibold, 26 pt
Calm
Row and card titleNew York semibold, 19 pt
Mother’s Heartbeat
BodySF Pro regular, 17 pt
Sliding notes an octave above the human voice over a soft purr bed.
EyebrowSF Pro semibold, 13 pt, small caps, tracking 0.8
Now playing
Caption and specSF Pro regular, 12 pt, faint
26 Hz pulse · 180 to 700 Hz

Web scale

h152 px on a phone, 93 px at 1280 px wide
h238 px to 61 px
h323 px to 27 px
Body17 px, 16 px under 520 px wide
Eyebrow12 px semibold capitals

Headings grow smoothly with the window between those sizes.

Eyebrows

The app lowercases the label and sets true small caps. The web uses 12 px capitals with wide tracking, because system fonts on Windows and Android have no real small caps. Write the source in sentence case either way.

Italic emphasis

One italic phrase per heading, on the words that carry it. No bold, underline or colour for emphasis in a title.

Spacing, radius and motion

An 8 point rhythm and quiet motion.

Spacing

8 pt steps with a 4 pt half step. Screen edges and the play card’s padding are 20, sound rows 16 by 14, and sections sit 32 apart.

xxs4
xs8
s12
m16
l20
xl24
section32

Radius

Continuous corners in the app; plain rounded corners at the same radius on the web.

tile 16
card 20
hero 26
Capsule: buttons, badges, chips
Circle: icon buttons, the play disc

Glyph tiles round at 30% of their size: 13 at 44.

Motion

quick Press statessmooth, 0.2 s
standard The play card opening, the mini player, getting startedsmooth, 0.35 s
Primary pressscale 0.96, opacity 0.85
Icon pressscale 0.92
Row and tile pressscale 0.985, opacity 0.8

Smooth is a spring with no bounce. Live art (glyphs, rings, the pulse line) moves only while a sound plays and holds still under Reduce Motion. On the web, presses use 200 ms ease out and switch off with reduced motion.

Components

Buttons you can hit, cards like paper.

Drawn here in HTML and CSS at the app’s sizes. A dashed outline shows the 48 pt hit area where the visible shape is smaller. On this site every button and button-like link is at least 48 px tall.

Buttons

Primary

56 pt tall ivory capsule with room text
SF Pro semibold 17 pt, 26 pt side padding
One per context: the main action

Primary, compact

44 pt visible inside a 48 pt hit area
SF Pro semibold 15 pt, 18 pt side padding
For tight rows and cards

Secondary

40 pt visible inside a 48 pt hit area
Hairline capsule; a tinted one uses its tint at 50% for the edge
SF Pro semibold 15 pt, 16 pt side padding, raised fill while pressed

Icon

44 pt circle inside a 48 pt hit area
Symbol at 40% of the circle; hairline outline, or filled ink
Always carries an accessibility label

Ring play button

88 pt, growing with Dynamic Type up to 120
An ivory disc at 56% inside three engraved rings
Rings breathe in the playing sound’s tone; the outer ring counts down the sleep timer

Cards

Room card

Card fill, 1 pt line border, radius 20
A faint top highlight, like the edge of thick paper
20 pt padding; no blur and no glow

Toned card

While active, the border takes the first sound’s tone at 1.2 pt
Mix tiles: 140 by 90, radius 16, 12 padding
One dot per sound, in its tone

Sound rows

Purr26 Hz pulse · 180 to 700 Hz

Mother’s Heartbeatlub-dub · 130 bpm

Steady low pulse for kittens, new arrivals and car rides.

60

Loves itMehNope

Ultra Squeaks0.3 to 1.5 kHz above the floor plus

Idle. A 44 pt glyph tile on raised, the name in the serif at 19 pt, the spec in faint at 12 pt and an outlined play circle. The whole row is the button.
Playing. The sound’s tone takes over: a 2.5 pt bar on the left, a 6% wash, the glyph and a filled stop circle. The row opens to show the note, the level and the rating.
Locked. The name in muted, the glyph in faint and the Plus badge where the play circle was.
Rating chips. 30 pt capsules inside a 48 pt hit area. A selected Loves it fills with good and its label turns room.

Eyebrow and Plus badge

Eyebrow

SF Pro semibold 13 pt, small caps, tracking 0.8
Muted by default; the playing sound’s tone, or gold for Plus
Names a section or a state in two or three words

Plus badge

A lock and “plus” in small caps, 12 pt, tracking 0.6
Gold text in a gold hairline capsule at 45%
The word and the lock carry the meaning, not the colour

Voice and copy

Plain, short, concrete.

Write like a careful friend who knows cats and sound: what to do, what will happen and when to stop. Every claim has to be true of the app as built.

Say what it does. “Sounds fade out when the time is up.” Not “Drift off with an immersive sleep experience.”
Short labels, real verbs. Play, Stop, Save current, Restore purchases. Sentence case, and no full stop on a button.
No filler labels. If a line doesn’t help someone choose or act, cut it. The play card’s “generated live on this phone” is going: it describes the engine, not the cat.
No dashes. No em or en dashes anywhere. Use a full stop, a comma or a colon. Ranges use “to”: 180 to 700 Hz.

Numbers with units. Digits and a space before the unit: 26 Hz, 130 bpm, 18.5 kHz. A middle dot separates specs: lub-dub · 130 bpm.
Talk about the cat. “Watch your cat.” “Stop if ears flatten, the tail lashes or they hide.”
Safety in plain words. Start near silent. Keep the cat-only band short and quiet. Purr Room is for comfort and play and doesn’t replace a vet.
Honest status. “Coming soon to the App Store” until the listing is live. No prices or store links before Apple shows them. Curly apostrophes and quotes, and contractions are welcome.

Accessibility

Easy to hit, easy to read, still when asked.

48 pt targetsEverything tappable has a hit area of at least 48 by 48 pt in the app and 48 px on the web, above Apple’s 44 pt minimum. A smaller visible shape is fine inside it.
ContrastText is 4.5:1 or more on its background. Ink, muted and faint pass on room and card; faint on raised doesn’t (4.3:1 Large). Large text and control edges need 3:1. Line and bad are decoration.
Dynamic TypeUse text styles, never fixed sizes. The play card, the hearing map and getting started restack at accessibility sizes. A sound name may shrink to 85% before it truncates; titles wrap instead.
Reduce MotionAnything that moves by itself holds still: glyphs, rings and the pulse line. On the web, press and hover animation switches off.
VoiceOverLabel controls with the action: “Play Purr”, “Stop all sounds”, “Get Purr Room Plus”. Hide decoration: the mark, the glyphs and the grain.
Not colour aloneLocked sounds show a lock and the word plus, playing rows add a bar and a stop symbol, and ratings are words.