NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Swiss International

Zwitsers designsysteem naar de Internationale Typografische Stijl: zichtbaar 12-koloms raster, links uitgelijnde grotesk, rood en zwart, nul radius en harde lijnen. Voor architecten, cultuurinstellingen en B2B die helderheid willen tonen.

Bekijk op volledig scherm ↗

Thema 09

Internationale
Typografische Stijl

Raster 12 kolommen
Goot 24 px · Radius 0

Swiss.

Inhoud eerst, ornament nooit. Het raster bepaalt waar alles staat, rood bepaalt waar je kijkt.

01Kleur

Achtergrond--tsw-bg#FFFFFF
Oppervlak--tsw-surface#F0F0EE
Tekst--tsw-ink#111111
Gedempt--tsw-muted#6A6A6A
Lijn--tsw-line#111111
Accent · signaalrood--tsw-accent#E3000F
Accent 2 · donkerrood--tsw-accent-2#8C000A
Signaal · let op--tsw-signal#FFC400

Rotterdamse
Bouwlezingen

04

Wonen boven
de winkel

DatumDo 12.11.2026

Tijd20.00 uur

PlaatsSchouwburgplein 25, Rotterdam

SprekerIr. Marleen Tjoa

Nog 46 plaatsen

02Letter · Satoshi

Aa 900

  1. 96Display, 900, spatie −4%
  2. 36Kop, 700, spatie −2%
  3. 17Tekst, 400, regel 1,5
  4. 12Label, 500, kapitaal

03Bediening

04Badges en kaart

NieuwLezingUitverkochtGewijzigd

03

Hergebruik van beton in de Merwe-Vierhavens

15.10.2026 · Terugkijken

Past bijArchitecten en stedenbouw · musea en cultuur · ingenieursbureaus · B2B en industrie · uitgeverijen

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Geen JavaScript nodig.
<!-- Swiss International · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tsw"><div class="tsw__in">
  <div class="tsw__head">
    <div class="tsw__meta">
      <p>Thema 09</p>
      <p>Internationale<br>Typografische Stijl</p>
      <p>Raster 12 kolommen<br>Goot 24 px · Radius 0</p>
    </div>
    <h3 class="tsw__name">Swiss<span>.</span></h3>
    <p class="tsw__mood">Inhoud eerst, ornament nooit. Het raster bepaalt waar alles staat, rood bepaalt waar je kijkt.</p>
  </div>
  <div class="tsw__mid">
    <div class="tsw__pal">
      <p class="tsw__sec"><b>01</b>Kleur</p>
      <table class="tsw__tbl">
        <tr><td><i style="--c:#FFFFFF"></i></td><td>Achtergrond</td><td>--tsw-bg</td><td>#FFFFFF</td></tr>
        <tr><td><i style="--c:#F0F0EE"></i></td><td>Oppervlak</td><td>--tsw-surface</td><td>#F0F0EE</td></tr>
        <tr><td><i style="--c:#111111"></i></td><td>Tekst</td><td>--tsw-ink</td><td>#111111</td></tr>
        <tr><td><i style="--c:#6A6A6A"></i></td><td>Gedempt</td><td>--tsw-muted</td><td>#6A6A6A</td></tr>
        <tr><td><i style="--c:#111111"></i></td><td>Lijn</td><td>--tsw-line</td><td>#111111</td></tr>
        <tr><td><i style="--c:#E3000F"></i></td><td>Accent · signaalrood</td><td>--tsw-accent</td><td>#E3000F</td></tr>
        <tr><td><i style="--c:#8C000A"></i></td><td>Accent 2 · donkerrood</td><td>--tsw-accent-2</td><td>#8C000A</td></tr>
        <tr><td><i style="--c:#FFC400"></i></td><td>Signaal · let op</td><td>--tsw-signal</td><td>#FFC400</td></tr>
      </table>
    </div>
    <div class="tsw__poster">
      <div class="tsw__pt">
        <p class="tsw__p-org">Rotterdamse<br>Bouwlezingen</p>
        <p class="tsw__p-nr">04</p>
      </div>
      <p class="tsw__p-title">Wonen boven<br>de winkel</p>
      <div class="tsw__p-grid">
        <p><b>Datum</b>Do 12.11.2026</p>
        <p><b>Tijd</b>20.00 uur</p>
        <p><b>Plaats</b>Schouwburgplein 25, Rotterdam</p>
        <p><b>Spreker</b>Ir. Marleen Tjoa</p>
      </div>
      <div class="tsw__p-foot"><button class="tsw__btn tsw__btn--inv" type="button">Reserveer · € 12,50</button><span>Nog 46 plaatsen</span></div>
    </div>
  </div>
  <div class="tsw__low">
    <div class="tsw__type">
      <p class="tsw__sec"><b>02</b>Letter · Satoshi</p>
      <p class="tsw__t1">Aa 900</p>
      <ol class="tsw__scale">
        <li><span>96</span>Display, 900, spatie −4%</li>
        <li><span>36</span>Kop, 700, spatie −2%</li>
        <li><span>17</span>Tekst, 400, regel 1,5</li>
        <li><span>12</span>Label, 500, kapitaal</li>
      </ol>
    </div>
    <div class="tsw__ui">
      <p class="tsw__sec"><b>03</b>Bediening</p>
      <div class="tsw__btns">
        <button class="tsw__btn tsw__btn--p" type="button">Aanmelden</button>
        <button class="tsw__btn tsw__btn--s" type="button">Programma</button>
        <button class="tsw__btn tsw__btn--g" type="button">Archief →</button>
        <button class="tsw__btn tsw__btn--p is-hover" type="button">Hover</button>
      </div>
      <div class="tsw__form">
        <label class="tsw__field"><span>Naam</span><input class="tsw__input" type="text" value="Pieter Smit"></label>
        <label class="tsw__field"><span>Lezing</span><select class="tsw__sel"><option>04 · Wonen boven de winkel</option><option>05 · Hout in de hoogte</option></select></label>
      </div>
    </div>
    <div class="tsw__side">
      <p class="tsw__sec"><b>04</b>Badges en kaart</p>
      <div class="tsw__badges"><span class="tsw__bdg tsw__bdg--r">Nieuw</span><span class="tsw__bdg">Lezing</span><span class="tsw__bdg tsw__bdg--k">Uitverkocht</span><span class="tsw__bdg tsw__bdg--y">Gewijzigd</span></div>
      <div class="tsw__card"><p class="tsw__card-n">03</p><p class="tsw__card-t">Hergebruik van beton in de Merwe-Vierhavens</p><p class="tsw__card-m">15.10.2026 · Terugkijken</p></div>
    </div>
  </div>
  <p class="tsw__fit"><b>Past bij</b><span>Architecten en stedenbouw · musea en cultuur · ingenieursbureaus · B2B en industrie · uitgeverijen</span></p>
</div></div>
</div>

Meer uit thema's

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →