Grade 13 · a vocational technology learning center, by urbanicity

newSchoolWorks.com › VoTechWorks › Style guide

Brand · Style guide

How VoTechWorks looks, and why.

One school, one museum, one voice. This page is the reference for anyone making a page, a panel, a poster or a post for VoTechWorks: the marks, the colours, the type, the components, and the four image registers. It reads its examples from the live site, so what you see here is what is in use.

4marks

11colours

2typefaces

4image registers

6char codes

1 · Identity wordmark, mark, hard hat, icons

Wordmark · 600 / 1200 px

Mark · 256 px

Hard hat · alpha 480 px

Letters tile · 360 px

App icon · 16 – 512 px + maskable

Share image · 1200 × 630

Naming. The school is written VoTechWorks — one word, capital V, T and W — in running text; the wordmark itself sets voTechWorks. Its tagline is Grade 13 · a vocational technology learning center, by urbanicity. The parent is always newSchoolWorks.com — the .com name, one word, and always a link. The museum is the Museum of VoTech. The domain in copy is votechworks.com; the API lives at newschoolworks.online.

Do

Use the wordmark on cream or white at 300 px wide (72 px icon under 560 px). Put the mark on navy. Keep clear space equal to the hard hat's height on every side. Use the letters tile for square avatars.

Don't

Recolour the marks, outline them, or set them on photographs. Never split the school name ("Vo Tech Works", "VoTech Works"). Never write "New School Works" or "newschoolworks" — it is newSchoolWorks.com. No drop shadows on any mark.

2 · Colour brand, sectors, states

Navy#1F3A7Athe brand ground: theme colour, logo tile, poster background, panel borders

Safety orange#F29B1Dthe accent: nav group labels, section rules, lights "under way", art palette

Teal#1C7A8Clinks, kickers, stat numbers, hover; the second art accent

Cream#F4EBDDpage background and the art ground; never pure white behind art

Ink#292522body text, rules, footer border (#23241f for display headings)

Olive#536541brand tagline, table heads and chips on #EEF0E3

Enrol red#C0282Done job: the Enroll-free link and the struck price

Review amber#B35A00the professional-review notice, on #FFF1E6

Gold#C9A24Bpreview banners and the museum spine gold, on #FFF6D6

Caution yellow#FFD200the under-construction bar only, with #1b1b1b stripes

Built green#1b9a4adevelopment lights: built; #F2A91D under way; #c9c3b8 not started

Sector hues colour the section rules and card tops of the catalogue — one per trade family, read live from votech.sector.hue. Body text stays ink on cream: every pairing on this page passes WCAG AA, and a sector hue is never used for running text.

AGR#16a085Agriculture, Environment & Public Service

BLD#c0392bBuilding & Construction

BUS#2c3e50Business & Cross-Cutting

HLT#27ae60Health & Personal Services

HOS#e67e22Hospitality, Food & Tourism

MFG#7f8c8dManufacturing & Marine

TEC#8e44adTechnology & Design

TRN#2980b9Transportation

3 · Type Archivo · IM Fell English · PT Mono

Archivo (500–900) does all the work — display, labels, body, numbers. IM Fell English italic is reserved for the lede under a heading and for the museum's wall-text voice; it is never used for UI. PT Mono marks codes, keys, slugs and API routes. Both web fonts load from Google Fonts in the shell; do not add a third face.

Kicker
.kickfont:800 11px Archivo; letter-spacing:.3em; uppercase; teal

Developers · Curriculum API v1

Display
h1font:900 clamp(1.8rem,4.5vw,2.8rem)/1.08 Archivo; #23241f

The whole curriculum, as JSON.

Lede
.ledeIM Fell English italic 17px/1.6; #3d3833; max 760px

Every object in the city is the last link in a chain of trades.

Section
h2.secfont:800 12px Archivo; letter-spacing:.26em; uppercase; 6px left rule in the section hue

Building & Construction

Card title
.card h3font:900 16px Archivo

Welding

Body
pArchivo 500 12.5–14px / 1.6; #4c4d44

Hand, power, computer. The tool wall runs left to right through time.

Label
th, .chip, .st spanArchivo 700–800 9.5–11px; letter-spacing .12–.18em; uppercase

Median annual pay

Number
.st bfont:900 19px Archivo; teal

1,800 h

4 · Components as the shell draws them

Welding

BLD · 9–12 months

Programme card: sector hue on top, name, span, a line of what the work is, the credentials it prepares for.

AWS SENSE · NCCER Welding

Lights

development progress

Five dots per programme — Plan, Lessons, Practice, Resources, Review — green built, amber under way, grey not started. Live from the tables, with labels on the programme page.

PlanCourses, lessons and assessments written for this tradeLessons82 of 82 lesson pages writtenPractice653 practice questionsResources118 reference entries (study list)Review0 lesson pages reviewed by a licensed professional

Review notice

wherever curriculum is unverified

Draft pending review

This material awaits verification by a licensed professional in the trade or the certifying body.

Stats, chips and tables

90programs

1,800clock hours

FREE*tuition

NCCEROSHA 10Grade 13

Course	Hours	Assessment
Universal Core: Safety, Math, Communication & Career	148	Safety and Regulatory Knowledge Exam (75%)

Prices are shown struck through in enrol red with FREE* beside them while tuition is free; the asterisk always resolves to the offer line on the tuition page. Buttons are Archivo 800, uppercase, letter-spaced, navy on cream or cream on navy; the only red control is Enroll free.

5 · Imagery four registers, one house

The house brief (from votech-art.php): museum exhibit graphic art, crisp and professional — precise technical illustration, cutaways and documentary realism, never cartoon. Palette anchored on navy, safety orange and teal over warm cream. Workers are real tradespeople of varied ages, sexes and backgrounds, doing the work correctly and wearing the right PPE; period scenes are historically accurate. The image fills the frame — no gallery wall, no frame, no drop shadow. No text of any kind in generated art: titles, captions and QR codes are set in layout afterwards. Leave calm negative space along one edge for the title.

Register	Size	Where it lives	Rule of thumb
Programme catalogue	1600 × 1066 (3:2)	/images/catalog/<slug>.jpg · votech.program.image_path	One per programme: the trade at work, mid-task, three-quarter view. Same crop and light across all 90 so the catalogue reads as a set.
Museum panel art	1536 × 1024 landscape or 1024 × 1536 portrait	/images/art/<code>_<stamp>.jpg · votech_museum.panel.art_path	Hero art for a 48 × 36 in (or 36 × 48) aluminium panel, by series: A a working tradesperson, B a chain of scenes, C a cutaway, D an object biography, E a maritime scene, F background for a chart, G a portrait in oils, H a safety scene, K the skill a credential certifies.
Gallery views	1536 × 1024 (3:2)	votech_museum.gallery.image_path + gallery_image	The room itself: one hero per gallery on the illustrated brief, plus extra views on the photographic brief (24 mm, f/8, skylight and track light, real materials, candid people).
Career posters	784 × 1168 (2:3)	votech.program_poster · held until approved	Navy ground, gold display headline "Become a …", tagline "Tuition-Free at VoTechWorks", four white bands — What They Do, By the Numbers (BLS, with the dataset year), The Path to Certification, Why VoTechWorks — and a gold call-to-action bar with the domain. Verified data only.

Catalogue

**Cosmetology**/images/catalog/cosmetology.jpg

**Pharmacy Technician**/images/catalog/pharmacy-tech.jpg

Museum panels

**Series A · Welder**spine code FF9K7Z · panel

**Series A · Electrician**spine code W8BU9V · panel

**Series A · Line Cook**spine code 8CRYB3 · panel

**Series A · Surveyor**spine code 7GK29J · panel

Galleries

**G1 · The Chain of Trades**hero, illustrated brief

**G3 · Fire & Metal**hero, illustrated brief

**G2 · The tool wall, whole**view, photographic brief

**G2 · The hand-tool bench**view, photographic brief

**G2 · The power-tool era**view, photographic brief

**Overview poster** — the eleven galleries as laid out on the walk, G1 to G11.

Career posters

Pharmacy Technician poster — **Pharmacy Technician**approved poster

Phlebotomy Technician poster — **Phlebotomy Technician**approved poster

6 · Codes & QR six characters, always

Every code the estate issues is six alphanumeric characters — never a bare number: panel spine codes, art register codes, QR codes, intake keys, API keys. The alphabet drops the look-alikes (no 0/O, no 1/I). The QR on a panel's spine sits in the gold band and resolves to the panel's page; the code is printed beside it in PT Mono so it can be typed.

VT8KJ2object accession · the same shape everywhere

7 · Voice how we write

Do

Short declarative sentences. Plain trade language: clock hours, credential, externship, the exam by its real name. Name the certifying body. Say what is draft and what is verified. "Tuition-free until certification is funded." Numbers carry their source and year (BLS OEWS, 2025).

Don't

No superlatives, no "world-class", no exclamation marks. Never promise a licence a certificate cannot give. Never call the school "New School Works" or a program "course" (a programme holds courses; a course holds lessons). No clock-based greetings anywhere on the estate.

8 · Assets download

File	Size	Use
vtw-wordmark-1200.png / 600	1200 × 298 / 600 × 149	headers, print, partners
vtw-mark.png	256 × 241	the mark alone, on navy
vtw-hardhat-alpha.png	480 × 397, transparent	the hat as a device
vtw-letters.png	360 × 360, transparent	square avatars, footer
vtw-icon-512.png · maskable · 192 · 180 · 48 · 32 · 16	512 → 16	favicons, home screen, manifest
vtw-share-1200.png	1200 × 630	Open Graph / social share
vtw-logo.png	1600 × 617	full lock-up, print
Curriculum API	JSON	every image URL above is also served in the API: programmes, galleries, panels, series

Style guide VTW-STYLE-GUIDE-V1 · reads live from the site · questions to newSchoolWorks.com.