ATX Youth Media Works is bold, modern, and made for teens. The look leans energetic and a little in-your-face, never corporate or precious. Cyan leads with sunshine yellow for punch, set against warm onyx and a soft off-white so the work always stays the focus. Bebas Neue gives headlines a film-poster feel, and Work Sans keeps everything else clean and easy to read. The result should feel like a real production crew: hands-on, creative, and welcoming to all skill levels.
01 · Color
Color Palette
Cyan leads as the primary, sunshine yellow is the high-energy accent, warm onyx anchors dark sections, and a barely off-white is the base.
Primary, cyan
Ultra dark
#073B47
--color-primary-ultra-dark
Dark
#00A0C0
--color-primary-dark
Base
#00C7EE
--color-primary
Light
#7BE0F5
--color-primary-light
Ultra light
#D9F6FC
--color-primary-ultra-light
Accent, sunshine yellow
Ultra dark
#8A7F00
--color-accent-ultra-dark
Dark
#D4C200
--color-accent-dark
Base
#FDE800
--color-accent
Light
#FFF06B
--color-accent-light
Ultra light
#FFFBCC
--color-accent-ultra-light
Neutrals
Off-white
#F7F7F4
--color-white
Gray 100
#ECEEF1
--color-gray-100
Gray 500
#8A90A2
--color-gray-500
Onyx (gray 800)
#2C2723
--color-gray-800
Soft black
#14110E
--color-black
Surfaces: a barely off-white is the default background (no pure white), a soft light-blue (#EAF8FC) works for alternating sections, and warm onyx anchors full dark sections.
02 · Type
Typography
Bebas Neue, a tall condensed display face, carries headlines with a film-poster feel. Work Sans handles everything readable: subheads, body, captions, and UI. Caveat is a new accent face for this version, a handwritten mark used sparingly for callouts, quotes, and small asides.
H1Bebas Neue · 72px · 4.5rem · 400
Real Gear. Real Skills. Unreal Creativity.
H2Bebas Neue · 50px · 3.125rem · 400
The Weekly Film Crew
H3Work Sans · 28px · 1.75rem · 600
Hands-on production time for teens 15 to 18
H4Work Sans · 22px · 1.375rem · 600
Sessions, instructors, and how to join
BodyWork Sans · 18px · 1.125rem · 400
A weekly meet-up where teens shoot, edit, and create real projects with their peers using pro equipment through Austin Public Access. All skill levels welcome, and you can join anytime in the process.
SmallWork Sans · 14px · 0.875rem · 400
Session 1 runs August 17 to September 14. Session 2 runs October 12 to November 9. $250 per student per 5-week session.
CaptionWork Sans · 12px · 0.75rem · 400
Photo from the Spring Production Camp, March 2026.
AccentCaveat · 34px · 2.125rem · 700
a handwritten touch for callouts, quotes, and small asides
03 · UI
Components
The core interface elements. More UI areas can be added to this guide as the build takes shape.
Buttons
Links
Questions about a session? Get in touch and we will set up a quick call.
Form Fields
Checkboxes & Radios
04 · Photos
Photo Treatment
How the program's real session photos appear on the site. Each treatment has a specific job, so photos stay consistent from page to page.
Film Crew
Hands-on with real gear
Learning the camera, one-on-one.
Card. Used for calls to action, session and course listings, and gallery grids. The photo, badge, and caption travel together as one clickable block.
Between Takes
Production time is social time.
In-content image. Used for full-bleed photos within the body of a page, such as section heroes and breaks, with the caption set over the image.
05 · Layout
Layout Preview
A quick look at the palette and type working together on a page. A dark, onyx-based treatment tends to feel more focused and more youth-oriented, and is a likely direction for the site. This is a rough preview of the feel, not a final design.
The Weekly Film Crew
Real Gear. Real Skills. Unreal Creativity.
Hands-on production time for teens 15 to 18. Shoot, edit, and create real projects with your peers using pro equipment through Austin Public Access.
Session 1 · Aug 17 to Sept 14 · $250
spots fill fast!
Ready to join the crew?
Onyx hero with a cyan call-to-action band and sunshine-yellow accents. The Caveat handwritten note shows the accent typeface used sparingly, for a small aside next to the session chip.
06 · Accessibility
Contrast Check
The key color pairings checked against WCAG contrast guidelines. AA is the standard target; AAA exceeds it.
Aa
Body text on off-white
13.8 : 1
AAA
Aa
White on onyx section
14.8 : 1
AAA
Aa
Button text on cyan
7.9 : 1
AAA
Aa
Button text on yellow
11.8 : 1
AAA
Aa
Link on off-white
5.5 : 1
AA
Aa
Cyan eyebrow on onyx
4.8 : 1
AA
References
Two sites Trina pointed to early on. They informed the energy and clarity we are aiming for, among other inputs. This guide is not a copy of either; it is its own direction.
Campflix
campflix.com
Take: bold, playful, photo-forward energy with a clear path to "get info."
Media Arts Center, Teen Producers
mediaartscenter.org/tpp
Take: how a real youth media program frames sessions, instructors, and student work.