Tennessee Orange · accent only

★ PMS 151, the official UT primary. Steps 700+ pass AA as text on white.

Limestone · the structural neutral — surfaces & dark bands

★ UT "Limestone" (CMYK 5 5 10 0), extended to a full ramp. 75 is the big-surface tint (100 reads strong across a whole band), 200 the default border, 900 the dark stone bands, 950 the ink for headings-on-accent and hovers. Adopted in v0.3, replacing the legacy site's cool Slate family.

Smokey · text and neutral surfaces

★ UT "Smokey" gray. Body text is gray-800; muted text gray-600.

Globe · links only

★ UT secondary "Globe." Links are Globe 600 on every property and theme — historically, links are blue. 5.9:1 on white; Globe 300 is the link color on the dark bands. Globe is reserved for links; eyebrows use the accent hue (see the note below).

Semantic roles

Components never reference the scales above — they use roles. Themes override only the accent group.

Buttons

Badges & tags

Forms

Alerts

Cards

People

Heike Jagode

Interim Director of ICL

Jack Dongarra

Research Professor Emeritus

Piotr Luszczek

Research Associate Professor

AA

Ahmad Abdelfattah

Research Assistant Professor

The signature name style — first name Merriweather bold, last name Proxima Nova caps — comes from the PAPI team grid and works anywhere names appear (team grids, bylines, directory listings). Wrap photos in .icl-person__photo-frame for the duotone treatment — a CSS gradient map that renders the photo as accent ink on warm white and returns it to full color on hover (demo photos load live from icl.utk.edu). Tune per use via --icl-duotone-ink-mix, --icl-duotone-contrast, and --icl-duotone-paper. When no photo is available, use the initials block (.icl-person__photo.icl-person__initials) as the fallback, shown last.

Stats

Tabs

Tables

Publication list

Code

git clone https://bitbucket.org/icl/magma.git
cd magma && mkdir build && cd build
cmake -DMAGMA_ENABLE_CUDA=ON ..
make -j

Navigation & footer

The sticky navbar at the top of this page and the footer below are the live components: limestone-900 stone surfaces with the accent keyline. On project sites the brand slot reads ICL | Project Name — see the project template.

The active link carries a keyline-colored underline that lands exactly on the navbar's bottom keyline. Add data-scrollspy to the .icl-navbar__nav and that highlight follows the page as you scroll — js/icl.js moves aria-current="page" to the link whose in-page section is under the navbar. It's opt-in, so multi-page sites that set the current page server-side are left alone. Anchor jumps clear the sticky navbar via scroll-padding-top.

Hero backgrounds

A framework for hero and feature-band backgrounds, in the manner of the ACS NUCL fx panels: base color, an optional photo layer, and the signature effect, layered under the content. The suite composes with .icl-background-fx — the band still picks scanlines or grid on its own — and adds only the photo machinery. Three surfaces, all band classes the system already has (plus one new one): dark stone (.icl-section--inverse / .icl-hero), light limestone (.icl-section--sunken), and the new accent band .icl-section--accent — Tennessee Orange at lab level, each project its own hue. The photo (--icl-hero-image) anchors right and masks out toward the content side, so it cross-fades against the pattern and the heading sits on calm base color. The pattern also rides over the photo — the suite re-draws the line layer above the image with the adaptive contrast blends: scanlines color-burn on light and accent bands (etched into the image's darks, clear of its highlights), the grid color-dodges on stone (lit out of the highlights, absent from the blacks). The texture keys itself to the image, so it is strongest where the photo's tonality matches the band — and fades out where it doesn't; for a tonally mismatched photo, set --icl-hero-overlay-blend to the even-handed multiply (light bands) or screen (stone) on that band. The whole treatment is width-adaptive: each band is a size query container, and at 48rem of container width the overlay steps up to the feature-strength inks (scanline-strong / grid-inverse-strong) and the photo gets the long eased cross-fade; below that, a panel is card-scale — quiet inks, compressed fade. Browsers without container queries get the quiet treatment everywhere. Type is part of the formula: titles wear the display voice — Rift, uppercase — sized by the same threshold (card scale below, hero scale above), and body copy runs semibold, one step up; a heading carrying .icl-display keeps its own scale. .icl-hero-bg

Add .icl-hero-bg--duotone and the photo takes the people-photo gradient map at band scale: grayscale, then blended into the band's own hue — ink-print multiply on light limestone, a screened [surface → warm white] map on stone and accent bands, with the printed lines showing through the image. Tune with --icl-hero-duotone-contrast / --icl-hero-duotone-paper; reposition with --icl-hero-position, re-shape the cross-fade with --icl-hero-mask, set the pattern overlay's reach with --icl-hero-overlay-mask, or flip the whole composition with .icl-hero-bg--flip. On accent bands, eyebrow and link text drop to on-accent (their usual hues fail against the accent itself) — keep inline links off accent bands and let buttons carry the CTA; accent-filled buttons there wear a white outline, since their fill matches the band, and secondary (outline) buttons drop their text and border to on-accent. A hero can also carry a content image — a publication cover, a screenshot — in the body slot: .icl-hero__media wraps an .icl-hero__thumb image with the body copy to its right. And the suite works with no photo at all — leave --icl-hero-image unset and the band's own motif carries the background.

Click any panel to see the same composition at hero scale. Nothing but the width changes between the card and the modal — the container query does the rest: the cards sit below the 48rem threshold (quiet card treatment), the modal above it (feature strength, long cross-fade).

Open the hero builder → — fill in your own eyebrow, headline, copy, buttons, and photos; preview all eight variations live (photo, duotone, and plain motif-only); and copy the markup for any of them.

Text halo

Hero text carries a soft halo in the band's own base color (--icl-grid-fade): where copy crosses into the photo, the bloom lifts it off the image; over the flat band color it disappears, because it is the same color as what sits behind it — no new color enters the system, and the demo panels above all wear it. Three knobs shape it (defaults 0.4 / 2 / 1): --icl-hero-halo (size — scales every blur radius; 0 is the opt-out), --icl-hero-halo-spread (reach of the outer bloom layers — text-shadow has no true spread, so this is the layered equivalent), and --icl-hero-halo-opacity (bloom color strength, 0–1). A raised card sitting on a hero band should set --icl-hero-halo: 0 — the band-colored bloom would show against the card's white.

Collage feature

A staggered three-image collage beside a headline and body copy — adapted from the UT System homepage's "How UT Impacts Your Life" section. Each image sits in an .icl-frame: the frame owns its aspect ratio (--icl-frame-ratio) and the real image rides behind as a cover background (--icl-frame-image), so a source of any dimensions fills the slot without distorting the composition. The demo sources below are deliberately mismatched — a wide image in the portrait slot, a square in the wide slot — to show the frames holding shape. .icl-collage