Netherlands Institute at Athens

Nederlands Instituut AtheneΟλλανδικό Ινστιτούτο Αθηνών

Proposal for review · 20 October 2026

House style for nia.gr: colour and type

The colours and typefaces proposed for the new nia.gr. It keeps what makes NIA recognisable, the navy, the sand and the lion, and fixes what fails today: low contrast, links marked by colour alone, and an unclear typeface.

Each section below shows it at work and, where something changes, sets it beside today’s site. Once it is approved, the next step is to create a couple of different page designs and layouts so you can pickout what works best.

In short

  • The navy stays exactly as it is

    The header navy and the menu-bar navy keep their exact values, so the logo files, letterheads and printed material stay valid. Only the two sands move, slightly warmer, by less than the eye can tell side by side.

  • Every text is easy to read

    Five of the eleven contrast checks under Colour fail on today’s site, among them the footer links (2.35:1) and links that only their colour tells apart from the text. In the proposal all eleven pass WCAG AA, the level the Dutch accessibility rules most likely require, and links are always underlined.

  • Typefaces chosen for Greek and for reading

    Commissioner, by the Greek type designer Kostas Bartsokas, for names, headings and menus; Piazzolla for reading, with every polytonic letter, a true italic and figures that line up. Body text grows from 14 to 18 px. Both are free and will be served from nia.gr itself.

  • The name in the visitor’s language

    Today the header reads “The Netherlands Institute at Athens” on the Dutch and Greek pages too. The proposal sets the name in the page’s language, and at large sizes one capital per square, as on Attic inscriptions.

Today and proposed

Top: today’s nia.grBottom: proposedΔE OK: colour distance; about 0.02 is just noticeable side by side.

Today: nameEnglish on every page, Helvetica or Arial

The Netherlands Institute at Athens

Proposed: nameIn the page language, one capital per square as in the hero

Today: headings and textHelvetica or Arial, 14 px

News & events · Νέα & εκδηλώσεις

Under the aegis of the Institute, scholars and students from the Netherlands conduct archaeological research in Greece.

Proposed: headings and textCommissioner + Piazzolla, 18 px

News & events · Νέα & εκδηλώσεις

Under the aegis of the Institute, scholars and students from the Netherlands conduct archaeological research in Greece.

Colour

Palette

Select a swatch to copy its hex value. “Was” compares it with today’s colour in the same role.

Tints and shades

Generated in OKLCH at the token’s hue; the sand ramp turns warmer as it darkens so it does not go olive. Framed steps are the palette’s own tokens. Each step is labelled in white, ink or navy-deep, whichever reads best, or in black where none of them reaches 4.5:1, with its contrast ratio.

How the colours relate

Each colour is placed by hue (angle) and chroma (distance from the centre) in OKLCH. The dashed line points to navy’s exact complement.

Proportions

Roughly how much of a typical page each colour covers. Today a grey page frames white boxes; the proposal is a white page, with navy at the top and the bottom.

Contrast, today and proposed

The colours a visitor meets on every page, today’s taken from the live CSS, all computed in this page with the WCAG 2.1 formula. Text needs 4.5:1. Field borders and focus rings need 3:1, and so do links that only their colour tells apart from the text around them.

Every text colour of the proposal against every background

AAA 7:1 or moreAA 4.5:1, enough for body textLarge only 3:1, enough for text from 24 px (19 px bold), borders and focus ringsFail below 3:1, struck through

Rules

Type

Typefaces

Fonts load from Google Fonts in this preview only. The production theme self-hosts subsetted files and makes no requests to third parties.

Today and proposed

What visitors see today, and what changes.

AspectTodayProposed
TypefacesHelvetica or Arial, whichever the device hasThe theme asks for Roboto, but its @import sits after the first rule, so browsers ignore it.Commissioner for names, headings, menus and labels; Piazzolla for readingChosen, and the same on every device.
Body text14 px, line-height 1.4318–19 px, line-height 1.6Piazzolla’s lower-case letters are small for their size, so it is set larger.
GreekWhatever the device hasFull Greek in both facesCommissioner was drawn by a Greek type designer.
Classical GreekNo polytonic faceLetters in one word can come from different fonts.Piazzolla has all 233 polytonic lettersA quotation stays in one face, even if its language tag is missing.
The name“The Netherlands Institute at Athens” on every language versionIn the page languageAt large sizes one capital per square, as on Attic inscriptions.
Fonts loadedNoneAbout 117 KB, from nia.gr itselfNo requests to Google or any other third party.

Specimen

In the footsteps of the Mycenean tekton. Reconstructing the facade of the Treasury of Atreus

Classical Greek

Νέστορός εἰμι εὔποτον ποτήριον· ὃς δ’ ἂν τοῦδε πίῃσι ποτηρίου, αὐτίκα κεῖνον ἵμερος αἱρήσει καλλιστεφάνου Ἀφροδίτης.

“I am Nestor’s cup, good to drink from. Whoever drinks from this cup, desire for fair-crowned Aphrodite will seize him at once.”

The inscription on the “Cup of Nestor”, a drinking cup found at Pithekoussai (Ischia), 8th century BC. The text is normalised; readings of the damaged letters vary.

Type scale

Greek capitals

Stored textCapitals with lang="el"Capitals without it
ΕκδηλώσειςΕκδηλώσειςCorrect: tonos droppedΕκδηλώσειςWrong: accent kept
Ολλανδικό Ινστιτούτο ΑθηνώνΟλλανδικό Ινστιτούτο ΑθηνώνCorrectΟλλανδικό Ινστιτούτο ΑθηνώνWrong
29 Μαΐου29 ΜαΐουCorrect: dialytika kept29 ΜαΐουWrong: accent stacked
Αθήνα ή ΧαλκίδαΑθήνα ή ΧαλκίδαCorrect: standalone Ή keeps its accentΑθήνα ή ΧαλκίδαWrong

Dates, times and numbers

Based on browser locale data (en-GB, nl-NL, el-GR, time zone Europe/Athens), with these house-style overrides: Greek uses the 24-hour clock (hourCycle “h23”); English drops the comma after the weekday and closes up the range dash; Dutch writes times as 18.00 uur (to confirm with a native speaker). Greek month headings use the nominative, dates the genitive.

FormatEnglishDutchGreek
Long dateThursday 29 October 2026donderdag 29 oktober 2026Πέμπτη 29 Οκτωβρίου 2026
Short date29 Oct 202629 okt 202629 Οκτ 2026
Month headingOctober 2026oktober 2026Οκτώβριος 2026
Range12–14 November 202612–14 november 202612–14 Νοεμβρίου 2026
Deadline1 February 2027 at 23:591 februari 2027 om 23.59 uur1 Φεβρουαρίου 2027 στις 23:59
Money€700 · €1,234.50€ 700 · € 1.234,50700 € · 1.234,50 €
Ordinal20th lecture20e lezing20η διάλεξη
JournalPharos XXIII.2 (2017) · Pharos XXIV (2018–2020)

16:00–19:30
18:00–20:00
11:10–13:30
09:00–17:00

In use

A few pieces of the site in the proposed colours and type, to judge them at work. These are not page designs; those come in the next round. The language switch in the header sample changes every sample.

Today and proposed, side by side

The same header, event, open call, panel and footer, at small size: today’s colours and type on the left, the proposal on the right.

Today’s nia.gr
Proposed
  • Header and menu. Unchanged: the navy band, the menu-bar navy and the lion on its sand tile.
  • Page. Today a grey page frames white boxes. The proposal is a white page, with pale blue-grey panels for contact and information.
  • Text. An ink tinted towards navy instead of flat grey, set in Piazzolla at 18 px instead of Helvetica or Arial at 14 px.
  • Links. Today Bootstrap’s default blue without an underline; in the proposal a deeper blue on navy’s hue, always underlined.
  • Footer. Navy-deep like the menu bar, with sand-light links (12.17:1) instead of blue ones (2.35:1).
  • Name. In the page language instead of English everywhere.
  • Deadlines. New: an orange badge that always carries a word, with the date repeated in the text.

Buttons

Text link

Event teaser, with a long real title

Open call with deadline badge and audience label

Machine-translated note, next to an info panel

Header with language switch and menu, and the footer

·

Focus ring, shown as if focused (press Tab anywhere to see the real one)

A focused link
A focused link

Lockups

The lion stays exactly as drawn. On white and on navy it sits on its sand tile; on sand the ground is the tile. On white and on navy it can also drop the tile: on white it is navy and white only, and on navy the mark turns sand and the lion’s head becomes the navy ground. The name is set in Commissioner. “NIA” never stands alone next to the mark, because the Norwegian Institute at Athens is also NIA.

Today the header shows the English name on every language version, including Greek, set in Helvetica or Arial in “wheat”, a browser colour name warmer than NIA’s sands.

Small sizes

The mark alone as favicon and avatar, with or without its tile. Below 32 px the eye and mouth merge, but the crescent and head still read.

With the sand tile

Without the tile

Cleaner, but it needs a second colour: in a dark browser tab the navy lion almost disappears (1.12:1), so the favicon file switches to the sand lion there, as in the navy lockup without the tile. The tile works on both without a switch.

Tokens

The proposal as CSS custom properties, ready for the Drupal theme. Templates use only the role names, so a later change of colour touches this block and nothing else.


    

  







  
Other directions

  

    
Four directions were drawn up, each with a palette and a type set, and any palette can be combined with any type set. The proposal takes palette A and type B. The others are kept in an archive, to borrow from or to fall back on.

    

      

        
Palettes

        
    
          
  • B · Inscription. A navy-deep header bar, a cool marble-grey page with stone panels, and navy links with a bronze underline. The tile becomes the fuller sand, a visible change.
    • 
          
  • C · Dutch grid. Navy as large flat fields, body text in navy-deep, one sand counter-field per page and a stronger Dutch orange.
    • 
          
  • D · Athens daylight. A white header under a thin navy strip, pale sky-blue bands, and sand tiles that cast a blue noon shadow.
    • 
        

      

      

        
Type

        
    
          
  • A · Commissioner. One flared sans for everything, with Gentium Book Plus for classical Greek.
    • 
          
  • C · Sofia Sans. One grotesk family in three widths, with GFS Didot for classical Greek.
    • 
          
  • D · Commissioner light. Commissioner at light weights for large headings, labels in spaced capitals, GFS Didot for classical Greek.
    • 
        

      

    

    
Compare all directions

    
Opens the archive: the earlier interactive page, where any palette can be combined with any type set, and with today’s site.