Internal design notes

ITI Website Design Notes

Why the ITI website looks the way it does: the reasoning behind the seals, the typeface, the colors, the frames, and the quiet Renaissance feeling that runs through every page. A companion to the Website Archive.

The guiding idea

Precious without shouting

One sentence stands behind every decision on this site.

Precious without shouting. ITI is a small university with a great inheritance. The design should feel like a well-made book or a Renaissance study: valuable, calm, and confident, never loud, never selling.
Old sources, living community. Everything visual balances two poles: the seriousness of a 2000-year tradition (serif type, seals, muted gold, frescoes) and the warmth of a real campus (photographs of actual students, meals, hikes, liturgies).
Beauty as argument. A university that teaches that truth, goodness, and beauty belong together must show it. The design itself is part of the message.

The core message

Sicut cervus ad fontes: the site is built around a thirst

“As a deer longs for sources of water, so my soul longs for you, O God.” – Psalm 42. The motto of the university is also the brief for the website.

The verse is the message. Everything ITI does answers a thirst: for truth, for God, for a life that holds together. The website does not invent a message; it makes this one visible. The verse opens the homepage, the deer stands in the crest, and every page should feel like an answer to that longing.
Speak to the longing, not the market. A prospective student rarely arrives comparing credit points. They arrive thirsty: searching for depth, orientation, community, God. Structure and wording address that Sehnsucht first; features and figures serve it, never replace it.
Clear, clean, simple. Whoever is thirsty should not have to fight through clutter to reach the water. Few elements, generous space, one thought per section, no competing calls to action. Simplicity here is not a style choice; it is hospitality toward the seeker.

Structure

Answer questions in the order they arise

Every page is built as a conversation: it answers the visitor’s questions in the sequence they naturally come up, and never earlier or later. Most visible on the program pages.

1 · What is this? The seal and a short mission statement open the page: one image, one paragraph, the soul of the program.
2 · The facts at a glance. Degree, duration, credits, language: the quick facts band answers the reflex questions before they become doubts.
3 · What is it really, and is it for me? The essence of the program and the people it is made for: honest sentences a student can recognize themselves in.
4 · What will I learn, and how? Curriculum and the seminar method: the sources on the table, a dozen students around it.
5 · What does it have to do with my life? Formation, vocation, what graduates become: why this matters beyond the degree.
6 · The concrete details. Requirements, catalogs, policies: for those who are already leaning in.
7 · What does it cost? Tuition, the automatic scholarship, housing: money questions answered plainly, late enough not to frighten, early enough not to hide.
8 · How do I apply? The four application steps and one deadline close the page: the door, clearly marked, after every question is answered.
Then: stories. Once the path is clear, testimonials carry the rest: graduates and students who walked it, with names and faces. People trust people, not paragraphs.
Then: the remaining questions. Whatever prospective students keep asking (visas, families, English level, daily rhythm) belongs on the page as an FAQ, phrased exactly as the questions are asked.

The first screen

The hero: open doors, the cross, and a thirst

The first thing every visitor sees is one photograph and four lines of text. Nothing on this screen is accidental.

Two open doors. The royal doors of the iconostasis stand open and frame the view: an invitation into the center. Read together, the two wings also carry the two lungs of the Church, East and West, that breathe together at ITI.
The cross before the altar. In the middle stands Christ on the cross, and behind him the raised altar: the visual definition of theology at ITI. The eye is led past the cross to the altar, upward: study that ends in worship.
Prayed, not only thought. The photograph is taken during the liturgy, with the celebrant at the altar. It says at first glance that theology here is not only heard intellectually; it is received in depth, in prayer.
The great seal as a mark of worth. The white line-art seal floats above the name like an emboss on a document: an element of quality and Wertigkeit, the institution vouching for the page.
The name, large and plain. “Catholic University ITI” answers the visitor’s first two questions immediately: where am I, and what is this.
Then the motto. Directly under the name follows the core line of the whole site: Psalm 42, sicut cervus ad fontes. It is the emotional heart of ITI: the longing for God is what moves people here, and what explains why everyone at ITI does what they do. The first screen ends not with a slogan but with that thirst.

Identity

The program seals

Each program carries its own seal, drawn in one engraved line style so they read as a family. Every symbol is chosen, nothing is decoration.

The morning star

The morning star stands for orientation and clarity: the year in which a student finds direction and hears their own vocation.
The cross inside the star: the orientation is not vague self-discovery. The center that gives clarity is Christ; the star is built around the cross.
A rising star also marks a beginning: Studium Generale is the entry year, the first light before the full day of studies.

The seven liberal arts, ordered to God

The seal takes up the classical image of the liberal arts: the circle of disciplines that has ordered Western education since antiquity.
The cross in the middle makes the Catholic difference visible: at ITI the arts are not an end in themselves. Every discipline points to and is ordered toward God at the center.
The wreath form recalls academic laurel and the completeness of a rounded education.

The deer at the stream

The deer longing for fresh water renders Psalm 42, the motto of the whole university: “As the deer longs for streams of water, so my soul longs for you, O God.”
Theology at ITI is exactly this: drinking from the sources: Scripture, the Fathers, St Thomas, read at the stream itself, not from cisterns of summaries.
Because the deer is also the central figure of the university crest, the core theology degree visibly carries the identity of the whole school.

Rings, flower, heart

The interlocking rings stand for unity and the unbreakable bond of marriage: two lives joined into one.
The flower growing from them is the fruit that grows out of that bond: children, family, new life.
The heart stands for self-giving love: the love of the spouses that mirrors the love of God for his people, which is the theological heart of the program.

The oil lamp

The flame is the fire we have received: the Holy Spirit, the faith handed down and kindled in the student.
The rays going out are what is handed on: the licentiate is the teaching degree, its whole purpose is transmission.
The vessel is the person of the teacher: the one who receives the fire, carries it, and passes it on without it diminishing.

Keys and crown

The keys are derived from the ITI crest itself, which carries the papal keys: the doctorate is the summit of the house, so it bears the marks of the house.
The crown expresses the deep bond with papal teaching: ITI was founded by a pope, and its highest degree stands consciously under the magisterium, not beside it.
Keys also mean authority to open: the doctor of theology is entrusted with opening the tradition for others.

Typography

The typeface: EB Garamond

One family for everything, from hero headlines to footnotes.

In use since the 1500s. Claude Garamond cut these letterforms in Renaissance Paris; they have set books continuously for almost five centuries. A university that reads five-century-old texts should write in letters of the same lineage.
The typeface of the sources. Many of the very editions ITI students read, from patristic collections to Thomas editions, are set in Garamond or its descendants. The website looks like the books on the seminar table.
Renaissance humanism. Garamond belongs to the tradition that believed faith and learning, beauty and rigor, belong together: exactly ITI’s claim.
Quiet authority. It reads effortlessly at text sizes and turns elegant at display sizes, without ever being fashionable. It will not look dated in ten years because it has not looked dated in five hundred.
One family only. No second typeface competes. Hierarchy comes from size, weight, italics, and small caps: the classical book-design toolkit.
Self-hosted. Since 20 July the fonts are served from ITI’s own server: no Google Fonts, no third-party requests, cleaner privacy.

Color

Parchment, night-blue, old gold

A small, muted palette. Nothing fluorescent, nothing that could not exist in a fresco.

#263d55

Navy is the working color: headings, buttons, the header. Deep and trustworthy like an academic gown or a night sky, serious without the coldness of black.

#8a6940

Old gold is the accent: kickers, numbers, dates, links. Deliberately muted and brownish, the gold of illuminated manuscripts and liturgical vestments, not the yellow gold of advertising. Used sparingly so it stays precious.

#fffaf1

Warm ivory instead of pure white for light text and surfaces: the tone of paper and parchment. The whole site feels printed rather than backlit.

#7b3336

Crest red appears only in tiny doses: small text links and the conference category. It comes straight from the university crest, so even the smallest link carries the institution’s mark.

Images

The white matte frame

Almost every content image sits in the same frame: a white matte, a hairline border, a soft shadow.

With the matte: a mounted print

Without: just a photo on a website

Museum language. The matte says: this image is worth framing. It turns snapshots into exhibits and treats campus life with the same dignity as art.
Unity from variety. Photos come from many years, cameras, and qualities. One consistent frame makes them a collection instead of a jumble.
Print feeling. Together with the ivory background and Garamond, framed images make pages read like a fine printed brochure rather than a feed.

Invitations

The call-to-action sections

The invitations at the bottom of pages carry the site’s Renaissance feeling most explicitly.

Visit ITI in Trumau

Come and see.

The best way to know whether ITI is your place is to come to Trumau, meet the community, step into the chapel, and see how study, prayer, and friendship belong together.

Apply NowPlan a Visit

An invitation, not a sales pitch. The headline is biblical (“Come and See”, John 1:39), the tone personal. Where other sites push (“Apply now! Deadline soon!”), ITI invites.
A parchment card on a living photo. The invitation sits as a warm parchment plate over a campus photograph, with opposite corners rounded like an old passe-partout: a card you receive, not a banner you scroll past.
The crest crowns the card. The university symbol stands quietly above the words like a blind emboss on good stationery: ownership without a logo shouting.
Centered symmetry. Kicker, headline, sentence, two buttons: the composition of a title page. Renaissance balance instead of marketing asymmetry.
Ultra-valuable, never self-important. Generous whitespace, one gold kicker, muted buttons. The quality is meant to be felt, not announced.

Structure

Layout principles

Whitespace is the luxury. Sections breathe with large paddings. Emptiness signals confidence; cramming signals doubt.
One readable column. Body text is capped near 60–70 characters per line, the measure of a well-set book. Wide screens get wider margins, not wider paragraphs.
Scannability through structure, not noise. Numbered reasons with the number inside the headline, month bands in the event list, date pills, category dots: a reader who only skims still leaves with the full picture.
Centered section headings act like chapter titles in a book and give the long homepage a calm rhythm.
Soft alternation. Where sections need separation, a whisper of gold tint or a hairline suffices: never heavy boxes or hard color blocks.
Bigger type on laptops. Since 20 July the base size rises to 18.5px on 900–1919px viewports: reading comfort on a 14” MacBook, unchanged elegance on large monitors.

Photography

Imagery

Real campus, real people. Nearly every photo shows actual ITI life: seminars under the cherry tree, the courtyard feast, the ball, graduation caps in the air. No stock photography: authenticity is the strongest recruiting argument.
Sacred art for sacred claims. Where the site speaks of God and tradition, it shows frescoes, the sanctuary, liturgy: images with 500 years of visual authority.
The Baroque ceiling fresco as hero background places the visitor physically under heaven: the site literally opens with the communion of saints overhead.
Watercolor and engraving accents (the JP2 watercolor, the 1672 Schloss engraving, line-art seals) bridge photography and tradition in the same muted palette.

Movement

Motion

One shared motion language. Sections fade up gently on scroll, numbers count up once, arrows slide in on hover: the same easing and restraint everywhere.
Motion reveals, never performs. Nothing bounces, spins, or loops. Movement only confirms: you arrived here, this is clickable.
Respect for the reader. All motion is skipped for users with reduced-motion preferences; the site is fully readable with animations off.

As of 20 July 2026 · Companion pages: Website Archive · Live site