# UTIMCO Layout Templates

Last updated: 2026-05-05
Companion to brand-tokens.md. Use these templates as starting structures for common deliverables.

## Universal rules

All layouts pull from the tokens defined in brand-tokens.md.
Default text color is Dark Blue #113856 on light backgrounds, White on dark.
Default body face is Aptos Regular at 15/21.
Logo placement follows the clear-space rule (the height of the diamond keystone).
Sentence case for headings.
Maintain WCAG AA contrast on every text-over-color or text-over-image pairing.

## One-pager (US Letter, 8.5 x 11)

Grid. 6 columns, 0.5 inch margins, 0.25 inch gutters.

Structure (top to bottom).
Header band. Primary lockup top-left, optional eyebrow text top-right (e.g. category, date). 1 inch tall.
Hero block. Display L headline, two columns, 1 inch from header.
Body region. 6 columns of body copy with subheads (H3) every 3 to 5 paragraphs. Optional pull quote in Aptos Serif Italic.
Data block. Up to 3 stat cards across, each with a Display L number in Aqua and a one-line caption in Caption.
Footer. Hairline rule in Gray 200, then institutional descriptor (TextLine.svg or text) and contact line at 9pt.

Color treatment. Default is white background, Dark Blue type, Aqua and Dark Teal for accent. Reverse variant: Dark Blue background, White type, Green and Aqua for accent.

## Flyer (US Letter, 8.5 x 11, single-sided event or program)

Grid. 4 columns, 0.5 inch margins.

Structure.
Top third. Hero image with masked logo overlay (use inlinelogo+whiteMask.svg) or solid Dark Blue panel with Display XL eyebrow.
Middle third. Display L headline plus a single sentence subhead in H4.
Bottom third. Two columns: left for date/time/location, right for the call to action. Footer band in Gray 200 with descriptor.

Optional accent. Diamond decorative element (flat-diamond or split-diamond) in the corner at 10 percent opacity, never overlapping text.

## Social tile, square (1080 x 1080, Instagram, LinkedIn)

Safe zone. 80px margin all sides.

Structure.
Logo top-left at 120px wide.
Headline in Display L (80/88), 3 lines max, centered or left-aligned.
Optional eyebrow above headline in Eyebrow style (11pt, +8% tracking, all caps).
Bottom band at 80px tall in Aqua or Green with caption-style attribution or call to action.

Color recipes (rotate so feed reads as varied):
Recipe A: White ground, Dark Blue type, Aqua bottom band.
Recipe B: Dark Blue ground, White type, Aqua keyline.
Recipe C: Aqua ground, White type, Dark Teal bottom band.
Recipe D: Photography with masked logo and white scrim, Display L headline in White.

## Social tile, story (1080 x 1920, Instagram and LinkedIn stories)

Safe zone. 120px top, 220px bottom (avoid UI overlap), 60px sides.

Structure.
Logo top-center at 140px wide.
Headline starts at the visual third (640px from top), Display L.
Bottom third reserved for image, supporting graphic, or call to action.

## Social tile, landscape (1200 x 630, LinkedIn link share, OG image)

Safe zone. 60px margin all sides.

Structure.
Two-column layout. Left 60% for headline and supporting line, right 40% for imagery, decorative diamond, or stat card.
Logo bottom-left, descriptor (TextLine.svg) bottom-right.

## Wireframe template, desktop (1440 x 900)

Grid. 12 columns, 96px margins, 24px gutters.

Sections (from top).
Header. 80px tall. Logo left, primary nav center or right, utility nav far right.
Hero. 600px tall. Display L or XL headline left, optional supporting visual or stat right.
Section blocks. 400 to 600px tall each. Alternate full-bleed Dark Blue panels with white ground sections to create rhythm.
Footer. 400px tall. Multi-column with sitemap, descriptor, contact, and social.

Wireframe fidelity. Use Gray 200 for image placeholders, Gray 300 for button strokes, hairline 1px borders. Keep typography in actual Aptos so content hierarchy is honest.

## Wireframe template, mobile (390 x 844, iPhone 15 reference)

Grid. 4 columns, 24px margins, 16px gutters.

Sections.
Top app bar. 60px tall. Hamburger left, logo center at 100px wide, utility right.
Hero. 480px tall. Display L compressed (use 56pt H1 instead of 80pt), single column.
Section blocks. Full-bleed cards stacked vertically.
Footer. Stacked links, descriptor at bottom.

Touch targets minimum 44 x 44px. Stack buttons vertically on screens narrower than 480px.

## Web mockup template

Inherit the wireframe structure but apply full color, type, and imagery. Provide a desktop frame and a mobile frame side by side for handoff. Use real or representative copy, not lorem ipsum.

Recommended page archetypes for UTIMCO:
Home. Hero with mission statement, three stat cards, two stories of impact, recent news.
About. Leadership bios in two-column grid, board of directors list, governance docs.
Performance. Charts and tables with the brand color palette applied to data series.
Stewardship. Stories of impact with named individuals and institutions.
News. List view with date, title, eyebrow category, hero image.

Chart palette assignment (in order). Dark Blue, Aqua, Dark Teal, Green, UT Burnt Orange, A&M Maroon, Mid Blue. Use UT and A&M only when the chart explicitly compares the two systems.

## Letterhead and stationery

See `20260501 UTIMCO Paper System.pdf` (on file with the design lead) for current paper specs.

## Email signature

See `20260428 UTIMCO Email Signatures.pdf` (on file with the design lead).

## Presentation (PowerPoint)

The contractor delivered the approved PPT template. The skill should refer authors to that file rather than produce slides from scratch. If a one-off slide is needed, use 16:9 (1920 x 1080), Display L headline at top-left, body content in 12-column grid below, logo bottom-right at 120px wide.

## Document conventions

File naming: YYYY-MM-DD-descriptive-name.ext for all working drafts.
Final PDFs: YYYYMMDD UTIMCO Document Name.pdf to match the existing folder convention.
Working files maintained by the design lead; contact for access.