Drie functies: 'primary' voor de merkidentiteit, 'ink' voor lettertypes en oppervlakken, en 'signals' voor tinten en randen. Klik op een hex- of RGB-code om deze te kopiëren.

Primair & merk

Inkt en lettertype

Signalen en oppervlakken

Een seriflettertype voor koppen, een schreefloos lettertype voor al het andere. DM Serif Display zorgt voor warmte en een krachtige uitstraling; Inter is geschikt voor het lezen van langere teksten en voor gebruikersinterfaces, zonder af te leiden.

Twee weegschalen. Artikel is bedoeld voor uitgebreide artikelen, blogberichten en programmapagina’s. Weergave is bedoeld voor hero-secties, landingspagina’s en marketingmomenten waarbij het lettertype een grotere rol moet spelen. De onderstaande lettergroottes vormen de maximale grootte voor desktop — koppen worden weergegeven als clamp() zodat ze op mobiele telefoons kleiner worden weergegeven.

Inter 16 / 600, padding: 1rem 2rem, straal 8px, kleurovergang van 0,18 s. De linkstijlen van Squarespace lopen door in codeblokken, waardoor de ankertekens van knoppen altijd worden ingesteld kleur en text-decoration met !important.

Herbruikbare bouwstenen. Deze komen voor in blogberichten, programmapagina’s en inhoud die op donateurs is gericht. Maak gebruik van een bestaand patroon in plaats van er zelf een te bedenken — het merk blijft consistent door herhaling, niet door vernieuwing.

Beweging is een aanwijzing, geen uitvoering. Alles beweegt langs dezelfde korte curve, en er beweegt niets dat niet hoeft te bewegen.

• Overgangen

  0,18 s tot 0,2 s gemak wat betreft kleur, achtergrond, rand en dekking. Niets dat langer is, niets dat op en neer beweegt.

• Muisaanwijzer op kaart

  De rand krijgt de kleur TCF Cyan met een bijpassende ring van 1px (box-shadow: 0 0 0 1px #00B4DB). Nee transY kaartweergave in het nieuwe systeem — de oude weergaven worden verwijderd naarmate de pagina’s opnieuw worden opgebouwd.

• Met de muis over het grootboek bewegen

  Wanneer u de muisaanwijzer boven een rij houdt, worden de bijbehorende rijen verplaatst naar dekkracht: 0,55, maakt de cursieve zin cyaan en verschuift de pijl 4px. De rij waar de muis overheen beweegt, behoudt zijn volledige dekking.

• Focus

  Elk interactief element krijgt :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Verwijder scherpstelringen nooit zonder ze te vervangen.

• Niet toegestaan

  Geen pulserende, gloeiende, stuiterende, parallax- of automatisch afspelende bewegingen. Geen animaties die zich herhalen terwijl de pagina inactief is.

De website draait op Squarespace 7.1, dus het merendeel van het nieuwe ontwerpwerk wordt geleverd als een op zichzelf staand codeblok dat in een sectie met de Fluid-engine wordt geplaatst. Deze regels zorgen ervoor dat die blokken niet met elkaar of met het platform in conflict komen.

• Klassevoorvoegsel

  Elk nieuw blok maakt gebruik van de tcfx- voorvoegsel. tcf- maakt deel uit van de verouderde aangepaste CSS en zal tot conflicten leiden.

• Alleen reset binnen het bereik

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } en niets breder. Een pagina-brede * Een reset heeft de website al eerder onbruikbaar gemaakt.

• Gebruik overal naamruimten

  Controleer elke regel binnen de hoofdklasse van het blok. Een codeblok moet veilig op elke pagina kunnen worden geplakt zonder bijwerkingen.

• Eerst importeren

  Indien een <style> toepassingen @import Wat lettertypen betreft, moet dit op de eerste regel van die tag staan, anders negeert de browser het.

• Geen reacties

  De HTML- en CSS-code in de productieversie bevatten geen opmerkingen. Documenteer het blok in plaats daarvan in de projectnotities.

• Geen emoji’s als pictogrammen

  Tekst, cijfers of inline SVG. Emoji’s worden niet op alle platforms op dezelfde manier weergegeven en komen informeel over.

• Marineblauw, niet zwart

  Deep Navy wordt overal in de gebruikersinterface gebruikt in plaats van zwart. Puur zwart is voorbehouden aan media.

• Mobile first

  Gebruik de indeling van de telefoon als uitgangspunt en voeg het volgende toe min-width zoekopdrachten naar boven. Stapels met één kolom, clamp() lettertype, verminderde opvulling bij een breedte van minder dan 640px, tikvriendelijke doelgebieden.

• Externe links

  target="_blank" wordt altijd geleverd met rel="noopener noreferrer".

• De tekst is woordelijk overgenomen

  Zorg er bij het herontwerpen van een bestaande pagina voor dat u de koppen, de hoofdtekst, de URL’s en de UTM-parameters exact behoudt. Geef eventuele aanpassingen duidelijk aan in plaats van deze stilletjes door te voeren.

• Houd de H1 aan

  De vernieuwde helden behouden precies één H1-tag met de oorspronkelijke tekst, met het oog op SEO. Vermijd het gebruik van Squarespace’s tekst met vierkante schaal wrapper — de inline-afmeting ervan kan tijdens de uitvoering verdwijnen, waardoor de koptekst wordt ingeklapt.

• Overname van een afdeling

  Om een gedeelte van een blok donker te maken, selecteert u de achtergrondlaag en niet het selectiekader — schilderen .page-section maakt de randen van elke clip-path-scheidingslijn vierkant.

.page-section:has(.tcfx-block) .section-background {
  background: #0F172A !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}