BravoPet Weather & Care

B Bravo · phonetic

The desk every BravoPet page follows.

A living style guide for a meteorologist’s pet-safety brand. Warm, specific, and built for a phone in a driveway. Sand, blue-black ink, canyon copper, and aspen. Not purple, and not a food brand.

Foundations Imagery
Two dogs running toward the camera on a dirt road, with dry grass and warm light.
Photo · Alvan Nee

Paw Forecast · sample

80205 · Denver

Open until 10:30

Sample morning. Not a live forecast.

Air 61°F

Pavement Low

Wind 6 mph

  • PavementLow
  • ColdLow
  • SmokeLow

Guidance, not veterinary advice.

Field manual v0 DEN B · Bravo Sand / ink / copper / aspen No purple Not pet food

01

Voice and tone

A trusted neighbor who happens to forecast the weather. Praise-first, never baby talk, never a lecture. Name the hazard, the time, and the next action.

Walk before 10:30. After that, hold the back of your hand on the pavement. If you can’t keep it there, neither can their paws.
Paw Forecast · sample
Clipped horses: medium blanket tonight. Unclipped horses with shelter can stay bare. If the coat gets wet, look again.
Blanket Call · sample

Do

Give a clock time and a place. “Shade the rest of the loop” beats “be careful out there.”

Say “good dog” like a person, not a brand mascot.

Cite the threshold when you state a risk, and keep the veterinary disclaimer in the same view.

Don’t

Don’t write “Your fur baby is gonna fry!!!” Alarm is not care.

Don’t write “As per the meteorological assessment, ambulation is contraindicated.” The desk is plain language.

Don’t sell, name, or joke about food, treats, chews, or supplements.

02

Foundations

Tokens live as custom properties in src/styles/02-tokens.css, inside @layer tokens. Components consume the semantic names, never raw hex.

Color

Front Range light on the page, a forecaster’s blue-black ink for type, canyon copper for action, aspen for “go.” Sky is support for cold and links. Heat is only a risk color. Purple is reserved for the example of what not to do.

  • Sand paper--color-paper · #f9f2e9 / #141b24
  • Surface--color-surface
  • Ink--color-ink · #1b2a3a / #f3eee3
  • Canyon copper--color-copper · primary action
  • Aspen--color-aspen · window open
  • Chinook amber--color-amber · caution fill
  • High-country sky--color-sky · links and cold
  • Pavement heat--color-heat · risk only
  • Frost--color-frost
  • Smoke--color-smoke

Do

Use copper for the one action you want. Use aspen only when the window is actually open. Pair every risk color with a word: Low, Moderate, High, Extreme.

Don’t

Don’t introduce purple, violet, or a generic indigo as a brand color. This button meets contrast and is still off-brand.

Type

Newsreader carries headlines and the briefing voice. Atkinson Hyperlegible, from the Braille Institute, carries UI and body copy so a hazard is readable in driveway sun. IBM Plex Mono is the station instrument: ZIP codes, temperatures, eyebrows. Nothing smaller than 12px.

step 5 · Newsreader 600

Walk before it bites.

step 3 · Newsreader 600

Blanket call for the Front Range.

step 1 · Newsreader italic 500

Good dog. Good timing.

step 0 · Atkinson Hyperlegible 400

If you can’t hold the back of your hand on the pavement, it is too hot for paws. Booties or a grass detour, or wait for the next window.

mono · IBM Plex Mono

80205 · 61°F · open until 10:30

Space, radius, elevation

xs · 0.5rem
sm · 0.75rem
md · 1rem
lg · 1.5rem
xl · 2rem
2xl · 3rem
shadow sm
shadow md
shadow lg

Buttons, the theme control, the menu toggle, and tab labels use --radius-button (10px). Credit chips and avatars stay on --radius-xs (2px). Cards keep --radius-md. Page width stops at --container-lg (72rem).

Motion

Durations are 80, 160, 240, and 480ms, with a quick ease-out. Risk meters fill once. An open-window dot breathes. Scroll-driven rules draw in where animation-timeline exists. Theme changes use a view transition when the user has not asked for less motion.

Under prefers-reduced-motion: reduce, durations drop to 0 and decorative animation is removed. The information stays. Surfaces are opaque; if you add translucency, also honor prefers-reduced-transparency.

Depth and motion tokens
Token Use
--duration-fastHover and toggles, 160ms
--duration-baseTheme view transition, 240ms
--duration-slowMeter fill, 480ms
--z-dropdownMobile navigation panel
--z-modalReserved for dialog layering notes. Native dialog uses the top layer.

Icons

One sprite, 24px viewBox, 1.75 stroke, round caps and joins. Weather and animals share the stroke. Decorative icons are aria-hidden. A control that is only an icon still needs a text name.

  • sun
  • moon
  • cloud
  • rain
  • snow
  • snowflake
  • wind
  • storm
  • smoke
  • thermometer
  • droplet
  • hail
  • paw
  • dog
  • horse
  • cat
  • blanket
  • trail
  • qr
  • passport
  • alert
  • info
  • check
  • menu
  • close
  • chevron
  • home
  • search
  • external
  • collar
  • heart
  • flag

03

Imagery

People look for the animal first. Photography is part of the system, in the same way type and copper are. The hero on this page is the pattern: a real outdoor dog, a squared frame with copper corner ticks, and the walk window sitting on the picture.

Art direction

Real, warm, and candid. Outdoors, or a window with weather on the other side. Colorado light when we have it: dry grass, high-country rock, a pasture before dusk. No cheesy studio sets, no costumes, no cartoon filters, and no pictures that make BravoPet look like a food brand.

Do

Show the animal large enough to recognize. Name the place and the hour in the caption. Pair the photo with a walk-window badge when the picture is about timing.

Write alt text that says what is in the frame. If the photo is a placeholder, say so. If the name is already in a heading, the avatar can stay short.

Don’t

Don’t use purple duotones, stock smiles on white seamless, or text baked into the JPEG. Don’t put a sentence on the fur unless it sits on the paper credit chip.

Don’t describe a placeholder as one of the family’s pets. Juniper, Cinder, and Pebble are sample names.

Crops and treatments

The build writes AVIF, WebP, and JPEG at several widths. Pages use picture, srcset, and sizes. The hero image is eager and preloaded. Everything below the fold is lazy. Width and height travel with the file so the layout does not jump.

Crop ratios
Use Ratio Treatment
Hero 3:2, 4:3 from 60rem Cover crop, copper corner ticks, paper credit chip
Photo card 3:2 Same frame, a warm copper wash, badge in the corner
Mosaic 4:5 lead, 3:2 rest One tall tile, the others stack beside it
Avatar 1:1 Squared --radius-xs (2px), tighter than a button
Sample avatar: a golden dog in grass. Not a real BravoPet pet.
Sample avatar: horses grazing. Not a real BravoPet horse.
Sample avatar: an orange tabby at a window. Not a real BravoPet cat.

Avatars are 1:1 cover crops at 2px radius, so a face does not turn into a social-app circle. Buttons are a separate 10px radius.

Photo with a forecast

The picture carries the feeling. The badge carries the decision. Color is never the only signal, and the caption says the photo is a sample.

Two dogs running toward the camera on a dirt road, with dry grass and warm light.

Open until 10:30

80205 · morning window

Dirt road, sample. Not a live forecast. Photo · Alvan Nee

Horses grazing in a green pasture under a bright sky.

Medium blanket

Pasture · tonight

Horses in the same system as dogs. Photo · Pavan Naik

Mosaic

A gallery for a household: dogs first, then another pet at the window. Horses sit in the forecast cards above. On a narrow screen the tiles stack. From 48rem the lead tile is tall and the others sit beside it.

A black dog standing in tall grass, facing the camera.

Tall grass

Photo · Jan Antonin Kolar

A brown dog running across grass in daylight.

Open grass

Photo · Jamie Street

An orange tabby looking out a window in daylight.

Window watch

Photo · Gaelle Marcel

Credits

Placeholders are Unsplash photographs under the Unsplash License, which allows commercial use. The family’s pictures replace them by dropping a file in src/photos/household/. The full record is the credits file.

04

Components

HTML first. JavaScript is for the theme toggle and for opening a dialog. Menus, tabs, and forms work without it.

Buttons and links

Links navigate. Buttons act. A copper button is the one primary action in a view. The amber tick on its leading edge is a legend swatch, not decoration for its own sake.

Don’t

A button pretending to be navigation. Use an anchor.

Walk window, badges, and risk

The signature component. Corner ticks mark it as an instrument, not a marketing card. Status is a word plus a meter, never color alone.

Paw Forecast · sample afternoon

80205 · Denver

Stay in after 11:00

Sample. Not a live forecast.

Air 91°F

Pavement High

Smoke Moderate

  • PavementHigh
  • SmokeModerate
  • Heat stressExtreme
Open Narrow Stay in Cold Smoke Storm Heat

Guidance, not veterinary advice. Stripes on Extreme stay readable if the hue is lost.

Blanket Call · sample

Tonight at the barn

Medium blanket

Clipped horses get a medium blanket. Unclipped horses with shelter can stay bare.

Sample, from extension guidance. Not a guarantee. Illustration is original and geometric, on the same stroke as the icons.

Alerts

These specimens are quiet on purpose. In the product, a warning inserted after load uses role="alert". A status that can wait uses role="status". Don’t put either role on content that is present at first paint.

Window open

Walk before 10:30. Pavement is comfortable right now.

Smoke is drifting in

Shorten the loop if the air looks thick. This is a sample, not today’s air quality.

Narrow window

You have until noon. After that, use grass or booties.

Pavement can burn

Sample: after 11:00 this surface is too hot for paws. Cross in the grass or wait.

Guidance, not veterinary advice.

Forms

Five digits. The live reading is the Paw Forecast stub, not this specimen.

Five digits.

Enter all five digits.

Tabs

A radio group, so it works with no script. Arrow keys move between the labels. The visible panel is the checked choice.

Walk window

Sample morning window for 80205. Open until 10:30, then pavement gets risky.

Medium blanket

Clipped horses tonight. Unclipped horses with a dry coat and shelter can skip it.

South shore

Sample: algae advisory. When in doubt, stay out of the water. Link the land manager, don’t invent a closure.

Dialog

Native dialog. Opening it needs the small script. Closing uses the dialog form method, Escape, or a click on the backdrop. Focus returns to the button that opened it.

Dialog anatomy

This is the static shape, so the guide still shows it with scripts off and in screenshots.

Guidance, not veterinary advice.

Pavement note

If you can’t hold the back of your hand on the surface, it’s too hot for paws. This sample is not a live reading.

Guidance, not veterinary advice.

Table

Illustrative desk thresholds, not the production rules
Desk Signal Sample reading What we say
Paw Forecast Pavement 77°F air, full sun Asphalt can run near 125°F. Say so, and cite the source on the live page.
Blanket Call Cold, dry Unclipped, sheltered Often no blanket. Clipped, thin, or wet horses are a different call.
Trail Desk Water Algae advisory When in doubt, stay out. Link the official notice.

Pet profile

Passport covers dogs, horses, and other pets in one household. These three are samples, not a real family’s records.

Sample avatar: a golden dog in grass. Not a real BravoPet pet.

Sample · Dog

Juniper

Senior · double coat

Chip
On file
Vet
On file
QR
Ready
Sample avatar: horses grazing. Not a real BravoPet horse.

Sample · Horse

Cinder

Clipped · medium blanket

Coggins
On file
Farrier
On file
QR
Ready
Sample avatar: an orange tabby at a window. Not a real BravoPet cat.

Sample · Other

Pebble

Indoor · carrier by the door

Chip
On file
Vet
On file
QR
Ready

Header and footer

The bar at the top of this page is the real header. Below is the product navigation, with routes that are not built yet. On a narrow screen the real header uses a checkbox disclosure, so it works without JavaScript. At 56rem and up the links sit in a row.

BravoPet Weather & Care

The footer on this page is the real footer: disclaimer, trademark line, Denver, and the call-sign note.

05

Accessibility

  • The target is WCAG 2.2 AA. Text contrast is at least 4.5:1 in both themes. Input borders and meter fills are at least 3:1 against the surface they sit on.
  • Risk never depends on color alone. Badges and meters include a word. Extreme adds stripes. Motion is never the only cue.
  • Focus is a 2px ring, offset, using :focus-visible. In forced colors the ring is Highlight. Every control is reachable from the keyboard.
  • The theme control is icon-only and at least 44×44px. It shows the mode you would switch to: a moon in light, a sun in dark. The accessible name is “Switch to dark mode” or “Switch to light mode”, and aria-pressed is true when dark is on. Other controls stay at least 48px on the short side. Body text stays at least 12px, inputs at 16px.
  • Pages reflow at 200% zoom. One h1, a skip link, and landmarks on every page. Photos have alt text. Forms have labels and text errors.
  • prefers-color-scheme sets the first visit. The header toggle stores light or dark in localStorage under bravopet-theme. The icon crossfade is a short rotate and fade, and it is off when motion is reduced.
  • prefers-reduced-motion removes the meter fill, the badge pulse, the scroll-drawn rule, the icon swap, and the theme crossfade.
  • prefers-contrast: more darkens secondary text and thickens borders. forced-colors keeps borders and text, and maps meter fills to CanvasText.
  • The manual theme control and the dialog opener need JavaScript. Color scheme, menu, tabs, and forms do not.
  • No inline scripts and no inline styles. The content security policy is script-src 'self' and style-src 'self'.

06

Name and trademark

“Bravo” is B in the phonetic alphabet, a call-sign sibling of Whiskey Delta. It also reads as “well done.” The logo does not use an exclamation mark.

A live registration, “BRAVO!”, covers animal food. BravoPet is weather, records, and media. It does not sell pet food, treats, chews, or supplements, and pages must not look like they do. Position the desk as pet weather and care.

Health copy is guidance with a cited threshold and a veterinary disclaimer. It is not a diagnosis. Passport worksheets, when they exist, are notes to take to an attorney, not legal documents.

Forecasts and care notes are guidance, not veterinary advice, and not a guarantee. BravoPet does not sell pet food, treats, chews, or supplements.