NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Swiss International

Swiss design system after the International Typographic Style: visible 12-column grid, flush-left grotesque, red and black, zero radius and hard rules. For architects, cultural institutions and B2B that want to show clarity.

View full screen ↗

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

How to use it

  1. Paste the HTML where the themes should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. No JavaScript needed.
<!-- 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>

More themes

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →