Tiltshift Design System
Een modulair design systeem gebaseerd op atomic design principes voor digitale transformatie projecten.
Kernprincipes
Architecture
Atomic Design
Componenten zijn opgebouwd vanuit de kleinste onderdelen (atomen) naar complexe interfaces (organismen).
Styling
Design Tokens
Centrale waardes voor kleuren, spacing, typography en andere designbeslissingen.
Experience
Responsive
Alle componenten werken perfect op desktop, tablet en mobiele apparaten.
Accessibility
Toegankelijk
Gebouwd volgens WCAG richtlijnen met focus op inclusief design.
Begin direct met het Tiltshift Design System
1. CSS Bestanden
Voeg alle CSS bestanden toe aan je HTML:
<link rel="stylesheet" href="https://cdn.tiltshift.nl/tiltshift-tokens.css">
<link rel="stylesheet" href="https://cdn.tiltshift.nl/tiltshift-base.css">
<link rel="stylesheet" href="https://cdn.tiltshift.nl/tiltshift-atomic.css">
<link rel="stylesheet" href="https://cdn.tiltshift.nl/tiltshift-components.css">
<link rel="stylesheet" href="https://cdn.tiltshift.nl/tiltshift-utilities.css">
<link rel="stylesheet" href="https://cdn.tiltshift.nl/tiltshift-themes.css">
2. Gebruik Components
Begin met atomic klassen en componenten:
<button class="ts-button ts-button--primary">
Primaire actie
</button>
<div class="a-flex a-gap-3">
<span class="a-tag">Tag</span>
</div>
3. Style Modifiers
Pas de hele huisstijl aan met één class:
<!-- Normale stijl -->
<body>
<!-- Gedurfde variant -->
<body class="ts-style-gedurfd">
<!-- Moderne variant -->
<body class="ts-style-modern">
Het Tiltshift merk
Het Tiltshift Logo
Het Tiltshift-logo laat zien wat we doen: we helpen organisaties om net even anders te kijken. Tiltshift betekent letterlijk: de lens kantelen, spelen met perspectief. Dat is precies wat we doen bij digitale transformatie: het is geen revolutie, maar een andere invalshoek kiezen.
Merkwaarden
Waarde
Durven Doen
Gedoe komt er toch. Het begint met doen. Iemand moet het doen. Daar zijn wij voor.
Waarde
Eerlijk Er Zijn
Er zijn is het halve werk. Betrokken zijn is alles. Eerlijk zijn is een teken van betrokkenheid.
Waarde
In Beweging
Waar dingen vast zitten, is beweging stap één. Pas als dingen in beweging zijn kun je (bij)sturen. Rust roest.
Taglines
Tagline
Voelbaar Anders
Geen kille analyses van de zijlijn, maar verandering van binnenuit. Dat is voelbaar anders.
Tagline
We Doen Het Echt
Geen agile in name only. De mens écht centraal. Open samenwerken. We doen het echt, samen met de mensen die het moeten doen.
Tagline
Maak Het Echt
Niet blijven praten en filosoferen. We maken dingen echt. Dat levert hele andere gesprekken op.
Tagline
Aan de slag
Overeind. Mouwen omhoog. Aan de slag. Niet lullen maar poetsen.
Beeldgebruik
Fotografie Richtlijnen
We gebruiken authentieke fotografie die de werkelijkheid van digitale transformatie laat zien. Geen geposeerde stockfoto's, maar echte mensen in echte werksituaties.
Beeld
Mensen aan het werk
We tonen mensen in hun natuurlijke werkomgeving. Bezig met echte taken, niet kijkend naar de camera.
Beeld
Zwart-wit fotografie
Krachtige zwart-wit beelden met grote korrel voor een rauwe, authentieke uitstraling.
Beeld
Niet geposeerd
Spontane momenten vastgelegd. Geen geforceerde lachjes, maar oprechte interacties.
Favicon
Voor een consistente merkbeleving over alle digitale kanalen gebruikt het design system de Tiltshift favicon.
<!-- Favicon implementatie -->
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.tiltshift.nl/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.tiltshift.nl/assets/favicon/favicon-16x16.png">
<link rel="shortcut icon" href="https://cdn.tiltshift.nl/assets/favicon/favicon.ico">
De favicon bestanden zijn beschikbaar in /assets/favicon/
Kleuren
Onze kleurenpalet is direct en krachtig - net als onze aanpak.
#E64544
#1E59A6
#1D1621
#FFFFFF
Entity Patterns
Het Tiltshift Design System kent vier core entiteiten:
People
Team members, medewerkers, contactpersonen
people-card(molecule)people-grid(organism)
Projects
Projecten, case studies, portfolio items
project-card(molecule)project-grid(organism)
Organizations
Opdrachtgevers, partners, stakeholders
organization-card(molecule)organization-grid(organism)
Subjects
Onderwerpen, diensten, expertise gebieden
subject-card(molecule)subject-grid(organism)
Neem contact op
Tijdens een vrijblijvend intake- en adviesgesprek bespreken we jouw situatie en hoe we daarbij kunnen helpen.