Progress LabBrand guidelines · 2.1

Brand
guidelines.

Identity, words
and everyday use.

Version 2.1 · 10 September 2026

progresslabontario.com

Progress LabBrand guidelines · 2.1

A working identity.

The mark, the words and the details that make Progress Lab recognizable.

Use this book alongside the editable Figma master and asset package. The toolkit contains vector artwork, templates and the source values used throughout.

A recognizable identity

The flask, custom wordmark, bold type and orange establish the identity. Violet adds a supporting accent.

A practical toolkit

Start with the usage rules, then choose the right artwork or template for the job. Each application shows how the same system fits a different format.

Progress LabBrand guidelines · 2.1

Training, made clear.

Coach-led training with people who help each other make progress.

Purpose

Give people a place to train hard and feel supported.

Who we are speaking to

People of all training levels who want coaching, encouragement and a challenge.

GroundedDirectEncouragingAttentive

Make the next step clear

Give each message one job. Name the action and put it where people can find it.

Show people helping people

Show a coaching cue, shared effort or encouragement between sets.

Welcome every starting point

Offer support and a challenge without pressure or judgment.

Keep it real

Use actual classes, people and details. Leave out promises we cannot support.

Progress LabBrand guidelines · 2.1

One identity. Useful formats.

Primary reversed · black backgrounds

One color · economical reproduction

Wordmark · when the symbol appears nearby

Symbol · avatars, favicon and small spaces

ONT · compact location lockup

Ontario · spelled-out location lockup

Progress LabBrand guidelines · 2.1

A place within the brand.

City tags identify a location. They do not limit who belongs.

Progress Lab

Use the main logo for the website and messages from Progress Lab as a whole.

Progress Lab ONT

Use ONT on local apparel, gear and event material when the Ontario connection is clear.

Progress Lab Ontario

Use Ontario for signs and local information when the full city name helps. Give the full address separately for directions.

Use the supplied lockup

Use the supplied logo and city tag together. Keep their lettering, size and spacing unchanged. Never add a city to the flask alone. Use one logo per placement. Do not combine ONT and Ontario or repeat the city below the logo.

Give the city room

Leave at least H/4 around the whole logo, including the tag. H is the flask’s full height, including its bubbles. Start at 200 px / 45 mm wide; proof the tag at the final size. If it is too small, switch to the main logo.

Use the supplied ONT or Ontario file. Ask Progress Lab for artwork before adding another city.

Progress LabBrand guidelines · 2.1

The flask can stand alone.

Keep H/4 clear on every side.

When to use it

Use the flask alone when the name Progress Lab is already nearby, such as a social profile, website or branded shirt. Otherwise, use the full logo.

Good uses

Avatars and favicons; apparel chest or sleeve marks; gear; small, repeated brand touches.

Keep the silhouette exact

Preserve the supplied geometry and bubble spacing. Do not rotate, crop, stretch, shadow, redraw, or recolor individual parts.

Size and location

Minimum 24 px or 6 mm. Use at least a 36 px square for a 24 px-high flask with clear space. Proof a manual 16 px favicon when a platform forces it below the general minimum. A city tag never attaches to the flask alone; use a full location lockup.

Choose the supplied orange, black, white or violet symbol for adequate separation from the background. Proof minimum sizes in the final medium.

Progress LabBrand guidelines · 2.1

Give the mark room.

H/4H/4
H = symbol height

At least one quarter of the symbol height on every side of the full lockup. The symbol height is H; minimum clear space is H/4.

Measure from the outermost artwork, including the bubbles. Keep type, trim edges, seams and other marks outside this area.

The diagram shows the minimum. More open space is welcome.

Primary lockup144 px / 32 mm
Symbol24 px / 6 mm
Wordmark120 px / 28 mm
Location lockup200 px / 45 mm

Starting sizes: symbol height, other artwork widths. Check the smallest bubbles and counters on the actual substrate. Embroidery, textured paper and small vinyl may need a larger size; request a vendor proof.

Progress LabBrand guidelines · 2.1

Place it with care.

Keep its proportions.

Never stretch or compress the artwork.

Keep the edges clean.

No shadows, outlines or extra effects.

Keep it level.

Align the mark with the layout.

CLASS SCHEDULE

Protect the clear space.

Type and partner marks sit outside it.

Use one primary mark per face. Place it on a quiet, high-contrast field; never across faces, hands or busy equipment. For partner layouts, respect both brands’ clear-space rules.

Progress LabBrand guidelines · 2.1

Black. White. Orange. Violet.

Black

#080808RGB 8 / 8 / 8

Primary text, dark fields and one-color artwork

White

#FFFFFFRGB 255 / 255 / 255

Open space and reversed text

Orange

#FF350DRGB 255 / 53 / 13

Primary brand accent; signature flask and key actions

Violet

#B19AFFRGB 177 / 154 / 255

Secondary accent; supporting panels, details and apparel options

80% neutrals
15% orange

5% violet. These proportions are a starting point across a composition, not a quota. A violet garment or supporting panel can carry more color. The primary logo retains orange.

Progress LabBrand guidelines · 2.1

Color that people can read.

AaBlack on white
20.03:1 · passes normal text
AaBlack on orange
5.50:1 · passes normal text
AaBlack on violet
8.52:1 · passes normal text
AaWhite on black
20.03:1 · passes normal text

Use black text on both accents

White on orange is 3.64:1 and fails ordinary text. White on violet is 2.35:1 and fails even large text. Reserve brand colors for roles with enough contrast.

Separate brand and interface colors

Only black, white, orange and violet belong to the identity palette. Gray surfaces, secondary text and error colors belong to the interface system at /brand/interface.

Print needs a physical proof

Digital masters use sRGB. Convert with the printer’s ICC profile for the stock and process. No CMYK recipe or Pantone match is approved. Require a physical proof; screens cannot certify ink, dye or thread.

No Pantone or CMYK value has been approved. Color management depends on the printer, stock, ink and lighting.

WCAG 2.2: at least 4.5:1 for normal text; 3:1 for large text. Ratios calculated from the sRGB values above. These checks do not certify an entire interface.

Progress LabBrand guidelines · 2.1

Two type families. Clear jobs.

ABC Diatype Extended

SHOW UP.
TRAIN TOGETHER.

Ultra for short display and section headlines.

ABC Diatype Plus Variable

What to expect
at your first class.

Wear clothes you can move in, bring water, and arrive a few minutes early. A coach will help you get oriented.

Regular for reading. Medium for controls and emphasis.

The logo is custom outlined artwork. Do not typeset a replacement. Set short display and section headlines in Extended Ultra and all caps. Keep body copy, practical subheads, interface text and email service headings in sentence case.

Progress LabBrand guidelines · 2.1

Set type for the task.

RoleDesktop / mobileLine heightWeight / tracking
Display80 / 40 px0.98Ultra / −0.02em
Heading40 / 28 px1.08Bold / −0.01em
Body18 / 16 px1.5Regular / 0
Label14 / 14 px1.4Medium / 0
Email body16 / 16 px1.5Arial Regular / 0

Headline casing

Main display and section headlines use Extended Ultra in all caps. Keep them short, break lines deliberately and never stretch the type.

Web and social

Keep reading text at 16–18 px on web. For a 1080 px social post, begin around 40 px for supporting copy and check it at phone size.

Email

Use Arial, Helvetica, sans-serif at 16 px with 24 px leading. Keep service headings in sentence case so the message works without a custom font.

Print

Begin at 10–12 pt for reading text and 8 pt for notes. Proof at actual size, on the intended stock and with the intended printing process.

Responsive behavior: shrink display type to 40 px, headings to 28 px, and margins to 24 px; let text reflow. Do not shrink an entire desktop layout to fit a phone.

Progress LabBrand guidelines · 2.1

Build from a few alignments.

123456789101112

COACH-LED
TRAINING.

Progress Lab

Fictional concept photograph of an athlete pushing a sled while a training partner encourages her.
12 columns
24 px gutters
64 px margins
1440 px max content

On a phone

Use four columns, 16 px gutters and 24 px side margins. Stack text before supporting imagery. Keep the main action close to its explanation.

Spacing and graphic language

Use 4, 8, 12, 16, 24, 32, 48, 64 and 96 px steps. Use straight rules, flat color fields and square corners. Icons use a consistent 2 px stroke; avoid decorative badges.

Fixed: logo geometry, type roles, palette values, readable contrast and clear space. Flexible: crop, accent area, column span and pacing.

Progress LabBrand guidelines · 2.1

Show effort and support.

Fictional concept photograph of an athlete pushing a sled while a training partner encourages her.
Close to the work
Fictional concept photograph of two athletes exchanging a fist tap beside kettlebells after a hard interval.
Between efforts

Stay close to the work

Use hard directional light, deep readable blacks and an active camera angle. Keep the room compact, clean and recognizably functional.

Make the relationship visible

Pair demanding exercise with coaching, encouragement or shared recovery. Keep faces, hands, grips, feet and equipment contact legible.

Protect the image

Preserve the 3:2 master. Review every crop for the action and relationship it keeps. Do not use a crop to conceal a known defect.

Label the source truthfully

These photographic references show fictional people and settings. Use real Progress Lab photographs when identifying members, coaches or the gym.

Progress LabBrand guidelines · 2.1

Use charcoal as a second voice.

Fictional charcoal concept of a sled athlete driving forward with a supporter beside her.
Expressive charcoal
Fictional rendered charcoal concept of two athletes carrying kettlebells through the gym.
Rendered charcoal

Expressive charcoal

Use large black masses, broad chalk highlights, broken edges and one restrained orange gesture. Simplify the room and internal anatomy.

Rendered charcoal

Add tactile cloth, hand, face and equipment detail. Keep the background subordinate and the movement easy to read.

Use it sparingly

Illustration supports photography; one strong image is usually enough.

Keep the composition intact

Preserve faces, hands and equipment relationships. The scenes are illustrations of training, not portraits of specific members or coaches.

Progress LabBrand guidelines · 2.1

Draw in the same language.

Choose a treatment and replace the bracketed details. Attach the matching charcoal image as the style reference.

Expressive charcoal

For movement, effort and a strong silhouette.

Create an original charcoal illustration of [SUBJECT AND ACTION] in [SETTING]. Use the attached charcoal image as the visual reference. Work on almost-black paper with broad, torn-edged white charcoal strokes, rubbed tonal planes, erased highlights and spare chalk dust. Build the scene from roughly 25 major marks; let large black areas remain open. Keep a precise structure beneath the loose drawing. Make hands, grips, joints and contact with the ground credible. Use a low, close viewpoint and a clear diagonal through the action. Reduce secondary figures and background objects to a few readable shapes. Add one short, dry orange pastel stroke, guided by Progress Lab orange #FF350D. Keep the rest black and white. Avoid fine muscle detail, crosshatching, photographic texture, airbrushed shading and glossy comic-book anatomy. Leave [LEFT / RIGHT / TOP] quiet for a headline added separately. Format: [ASPECT RATIO]. No lettering, logo, border or collage.

Rendered charcoal

For human connection, quieter effort and tactile detail.

Create an original charcoal illustration of [SUBJECT AND ACTION] in [SETTING]. Use the attached charcoal image as the visual reference. Draw with white chalk and willow charcoal on almost-black textured paper. Use broad dark masses, broken contours, erased highlights and selective detail in faces, hands, clothing and equipment. Direct a hard light across the main subject; keep shadows deep and the important relationships easy to read. Show credible anatomy, natural posture and clear contact between hands and objects. Let the setting recede into black with a few useful structural lines. Add one restrained, rough orange pastel accent, guided by Progress Lab orange #FF350D. Keep the rest black and white. Avoid smooth airbrushing, glossy highlights, comic-book muscles, dense engraving and a uniform photo-filter effect. Leave [LEFT / RIGHT / TOP] quiet for a headline added separately. Format: [ASPECT RATIO]. No lettering, logo, border or collage.

Copy these prompts and download the style references at progresslabontario.com/brand#image-prompts. The same text is included in source/image-prompts.json.

Progress LabBrand guidelines · 2.1

Start with an image.

Fictional charcoal concept of a sled athlete driving forward with a supporter beside her.

Attach your source image first and a charcoal reference second.

Turn an existing image into charcoal

Transform the FIRST attached image into a charcoal illustration using the SECOND attached image only as the visual style reference. Preserve the source composition, subject count, identities, facial features, body proportions, poses, clothing, object geometry and spatial relationships. Do not add people, equipment or scenery. Keep meaningful hands, grips and points of contact visible. Use almost-black paper, broad white chalk shapes, broken charcoal edges, rubbed shadows and erased highlights. Choose [EXPRESSIVE: sparse, forceful marks / RENDERED: selective tactile detail]. Simplify background detail without changing the place or hiding important content. Add at most one small, rough orange pastel accent, guided by #FF350D; do not recolor skin. Preserve the original aspect ratio and framing unless I specify a crop. Render it as a drawing rather than a charcoal filter on a photograph. Do not invent or redraw brand lettering or logos; leave a clean area for exact artwork to be placed afterward.

Review the result at its intended size. Check faces, hands, anatomy, equipment and contrast. Keep the original image, add exact logo and type artwork separately, and use the source file to match brand colors in the final layout.

Progress LabBrand guidelines · 2.1

Sound like the Lab.

Warm. Clear. Community first.

Unlock your potential.

Coach-led strength and hybrid training.

Say what the training is.

Join the movement.

Purchase a membership.

Name the action.

Submit

Send my question

Say what the form sends.

Invalid email.

Enter an email address like name@example.com.

Show how to fix it.

KeepMember · membership · first class · coach-led training · in the Lab

Say what people need. Show them the next step. Make them feel welcome. Leave out transformation promises, manufactured urgency and language that shames people. Use member stories and results only when they are real, accurate and approved for the intended use.

Progress LabBrand guidelines · 2.1

Same voice. Different moment.

MomentHow we soundExample
Considering a membershipSpecific, confident, and low pressure.Choose a membership that fits how often you want to train.
Preparing for a first classReassuring and practical.Arrive 10–15 minutes early. Bring water and wear comfortable training clothes and shoes.
Finishing a purchase or reservationBrief, warm, and certain.Your membership is confirmed. Choose your first class below.
Something blocks an actionCalm, direct, and helpful.We couldn’t send your message. Try again or email hello@progresslabontario.com.
Returning after time awayWelcoming and matter of fact.We’d love to see you in the Lab. Choose a class when you’re ready.

Sample copy. Confirmation language belongs only after a verified successful action. Before sending, read the full message aloud and remove any line that adds hype without useful information.

Progress LabBrand guidelines · 2.1

Make the next step obvious.

Purchase a membershipView the class scheduleView the class scheduleSending…

Keep controls usable

Targets are at least 44 × 44 px. Inputs have persistent labels. Underline text links. Use a two-color focus ring that remains visible on every brand field.

name@example.com
Use the address where you want a reply.
name@

Enter an email address like name@example.com.

Name the action

View memberships opens the options. Purchase [plan name] opens checkout.

Confirm what happened

Confirm success, then give the next step.

Help people recover

Say what went wrong and how to fix it.

Find reusable controls at /brand/interface. Status colors explain what happened. Respect reduced-motion preferences and keep content visible.

Progress LabBrand guidelines · 2.1

Membership comes first.

Desktop website layout example with membership actions and a real Progress Lab group photograph
Desktop
Mobile website layout example with membership actions and a real Progress Lab group photograph
Mobile

One primary action

View memberships opens the comparison. Each plan has a purchase link to its actual PushPress destination. The class schedule and first-class pass offer secondary ways to explore.

One shared system

The website uses the same typography, palette, imagery and interface components as this guide. Editable React source lives in source/website; reusable controls and portable tokens live in source/interface.

These examples show the shared type, image and membership rules. Editable website layouts are included in source/website.

Progress LabBrand guidelines · 2.1

Email, written for the moment.

Editable emails use tables, inline styles, a 600 px layout and Arial fallbacks.

Progress LabBrand guidelines · 2.1

A useful reason to return.

Use the first-class follow-up after an attended class. For outreach, offer a useful next step without assuming why someone has been away. These templates describe messages, not automation settings.

Progress LabBrand guidelines · 2.1

Leave room for the real details.

Editable 1080 × 1350 SVG templates. Bracketed fields are sample content, not member stories or scheduled announcements. Test each post at phone size before export.

Progress LabBrand guidelines · 2.1

Apparel, as one collection.

Generated presentation concept

Generated presentation concept. Exact artwork is supplied separately.

Front: 90 mm wide

Primary one-color mark.

Back: 280 mm wide

Existing outlined statement. Violet ink on black is part of the same system.

Use black, white and violet blanks. Confirm garment, ink, underbase, placement and smallest detail with the decorator. Flat art sets the dimensions; mockups do not certify a manufactured result.

Progress LabBrand guidelines · 2.1

Extend the same rules.

Generated presentation concept

Cap · 50 mm mark

Use the symbol or a supplier-tested lockup. Do not redraw details to compensate for coarse stitching.

Bottle · 38 mm mark

Keep the mark away from seams and curvature. Confirm usable area on the actual vessel.

Cup · 55 mm mark

Use the one-color master. Request a proof for handle position and wrap alignment.

Towel · 180 mm mark

Check contrast against the fabric. A woven label or print may reproduce detail better than embroidery.

Duffel · 160 mm mark

Keep the artwork clear of pockets, seams and straps. Confirm dimensions after selecting a blank.

Presentation mockup with starting artwork widths. Confirm the blank, printable area and reproduction method with the supplier; review the mark on a physical sample.

Progress LabBrand guidelines · 2.1

A clear arrival.

Generated presentation concept
Progress Lab entrance artworkCome in. Check in at the front. We’ll help you find your class. Come in.Check in at the front.We’ll help you findyour class. 1910 S Archibald Ave, Unit I, Ontario, CA 91761

Entrance panel · 600 × 400 mm

An editable starting size. Measure the actual site, mounting zone, sightline and any landlord requirements before fabrication.

Use a stable, readable field

Choose the approved reversed or one-color artwork. Keep the mark clear of door hardware and edges. Use the vendor proof to check contrast and installation scale.

Generated entrance concept, not a photograph of an installed Progress Lab sign. Use the supplied vector artwork; do not trace lettering from this rendering.

Progress LabBrand guidelines · 2.1

Useful things to keep in the room.

Progress Lab gym sign artworkTrain hard. Help each other. Keep the floor clear. Put equipment back. Ask a coach if you need help. TRAIN HARD.HELP EACHOTHER. Keep the floor clear. Put equipmentback. Ask a coach if you need help. Ontario, California
Progress Lab membership card frontChoose and purchase a membership at progresslabontario.com. Visit us at 1910 S Archibald Ave, Unit I, Ontario, CA 91761. MEMBERSHIPSChoose and purchase a membership atprogresslabontario.com. Visit us at 1910 S ArchibaldAve, Unit I, Ontario, CA 91761.
Progress Lab membership card backPurchase a membership. https://progresslabontario.com PURCHASE AMEMBERSHIPprogresslabontario.comhello@progresslabontario.com1910 S Archibald Ave, Unit I, Ontario, CA 91761

In-gym sign

A3 · 297 × 420 mm. Keep the instruction short and visible where it is needed.

Membership card

A6 landscape · 148 × 105 mm trim. Add 3 mm bleed and keep important content 5 mm inside trim. The card names the location and membership destination without inventing an offer.

Before print

Confirm stock, finish, bleed and output profile with the printer. Proof actual size. Live text remains editable; install licensed fonts or use the outlined production variant.

Confirm print color, stock and final dimensions with the printer. Measure the site before making installation artwork.

Progress LabBrand guidelines · 2.1

Find the right file.

ForUseWhy
Web & developerslogos/*.svg
source/system.json		Scalable, outlined marks and shared values.
Emaillogos/*@2x.png
templates/emails/*.html		Transparent raster logos, live text, inline CSS.
Social & campaignstemplates/social/*.svg
photography/web · illustrations/web		Editable layouts plus lighter image copies.
Apparel & signagetemplates/print/*.svgArtwork at stated dimensions, with production notes.
DesignersEditable Figma master
source/brand-book.html		Native layouts, components, styles and live text.
Owners & vendorsprogress-lab-brand-book-v2.pdf
README.md · asset-index.csv		Shareable instructions and an inventory of the package.

The package excludes font binaries and the source writing book. Full-size PNG image masters, compressed web copies and source/imagery.json keep P5–P10 and C4–C9 labeled as generated, fictional concepts.

Progress LabBrand guidelines · 2.1

Make it well.

Choose the right file

Use PNG for everyday apps, SVG for design and print, and the supplied templates to start a new layout.

Check the details

Replace bracketed text. Check names, dates, prices and links. Read the final message at the size people will see it.

Keep the artwork intact

Use the supplied logo. Keep its proportions, clear space and colors. Do not redraw or retype it.

Size it for the job

Use the dimensions on the flat artwork. Measure the garment, card or sign before placing the design.

Check a physical sample

Ask the printer to check stock, ink or thread, smallest details and placement. Match color on the material you will use.

Open the Progress Lab Figma project

progresslabontario.com
hello@progresslabontario.com