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

Japandi

Japanese-Scandinavian design system: lots of white space, natural walnut, moss and persimmon tones, hairlines, small type and a light serif. For interiors, furniture makers, ceramics and calm wellness.

View full screen ↗
Thema 10 · Japandi
Eikenhouten bank met een keramische vaas en een droge tak bij een raam aan een Utrechtse gracht

Atelier Hout & Klei · Utrecht

Bank Oudegracht

Massief eiken, geolied. Gemaakt op bestelling in onze werkplaats aan de Vaartsche Rijn. Levertijd zes weken.

€ 1.180

Japandi

Rust door weglaten. Natuurlijke tinten, ruime marges en lijnen zo dun dat je ze pas ziet als je zoekt.

Kleur

  • Achtergrond · rijstpapier#F7F4EF
  • Oppervlak · linnen#EEE8DF
  • Tekst · sumi#2E2B27
  • Gedempt · steen#6B655C
  • Lijn · 0,5 px#D9D2C6
  • Accent · walnoot#6F5B45
  • Accent 2 · mos#9EA28A
  • Signaal · kaki#B0563A

Letter

Sentient 300

Synonym voor tekst, licht en open, met ruimte tussen de regels.

40 · 22 · 15 · 11   regelafstand 1,7

Bediening

Op voorraadHandgemaaktNog 2

Past bij · interieur en meubelmakers · keramiek en ambacht · architectuur · yoga en massage · boetiekhotels

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.
<!-- Japandi · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tjp"><div class="tjp__in">
  <div class="tjp__spine"><span class="tjp__vt">Thema 10 · Japandi</span><span class="tjp__seal" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M19.5 9.5A8 8 0 1 0 17 18"/></svg></span></div>
  <div class="tjp__show">
    <figure class="tjp__fig"><img src="https://neddev.com/lab-media/thm-japandi-1.webp" alt="Eikenhouten bank met een keramische vaas en een droge tak bij een raam aan een Utrechtse gracht" loading="lazy"></figure>
    <div class="tjp__prod">
      <p class="tjp__brand">Atelier Hout &amp; Klei · Utrecht</p>
      <p class="tjp__pt">Bank <em>Oudegracht</em></p>
      <p class="tjp__pd">Massief eiken, geolied. Gemaakt op bestelling in onze werkplaats aan de Vaartsche Rijn. Levertijd zes weken.</p>
      <div class="tjp__pf"><span class="tjp__price">€ 1.180</span><button class="tjp__btn tjp__btn--p" type="button">Bestel op maat</button></div>
    </div>
  </div>
  <div class="tjp__sys">
    <h3 class="tjp__name">Japandi</h3>
    <p class="tjp__mood">Rust door weglaten. Natuurlijke tinten, ruime marges en lijnen zo dun dat je ze pas ziet als je zoekt.</p>
    <div class="tjp__block">
      <p class="tjp__lbl">Kleur</p>
      <ul class="tjp__pal">
        <li style="--c:#F7F4EF"><i></i><span>Achtergrond · rijstpapier</span><code>#F7F4EF</code></li>
        <li style="--c:#EEE8DF"><i></i><span>Oppervlak · linnen</span><code>#EEE8DF</code></li>
        <li style="--c:#2E2B27"><i></i><span>Tekst · sumi</span><code>#2E2B27</code></li>
        <li style="--c:#6B655C"><i></i><span>Gedempt · steen</span><code>#6B655C</code></li>
        <li style="--c:#D9D2C6"><i></i><span>Lijn · 0,5 px</span><code>#D9D2C6</code></li>
        <li style="--c:#6F5B45"><i></i><span>Accent · walnoot</span><code>#6F5B45</code></li>
        <li style="--c:#9EA28A"><i></i><span>Accent 2 · mos</span><code>#9EA28A</code></li>
        <li style="--c:#B0563A"><i></i><span>Signaal · kaki</span><code>#B0563A</code></li>
      </ul>
    </div>
    <div class="tjp__block tjp__type">
      <p class="tjp__lbl">Letter</p>
      <p class="tjp__t1">Sentient 300</p>
      <p class="tjp__t2">Synonym voor tekst, licht en open, met ruimte tussen de regels.</p>
      <p class="tjp__t3">40 · 22 · 15 · 11 &nbsp; regelafstand 1,7</p>
    </div>
    <div class="tjp__block">
      <p class="tjp__lbl">Bediening</p>
      <div class="tjp__btns">
        <button class="tjp__btn tjp__btn--p" type="button">Bestel</button>
        <button class="tjp__btn tjp__btn--s" type="button">Werkplaats bezoeken</button>
        <button class="tjp__btn tjp__btn--g" type="button">Verhaal</button>
        <button class="tjp__btn tjp__btn--p is-hover" type="button">Hover</button>
      </div>
      <div class="tjp__form">
        <input class="tjp__input" type="text" value="Eline Jansen" aria-label="Naam">
        <select class="tjp__sel" aria-label="Houtsoort"><option>Eiken, geolied</option><option>Essen, gezeept</option></select>
      </div>
      <div class="tjp__badges"><span class="tjp__bdg"><i style="background:#9EA28A"></i>Op voorraad</span><span class="tjp__bdg"><i style="background:#6F5B45"></i>Handgemaakt</span><span class="tjp__bdg"><i style="background:#B0563A"></i>Nog 2</span></div>
    </div>
    <p class="tjp__fit">Past bij · interieur en meubelmakers · keramiek en ambacht · architectuur · yoga en massage · boetiekhotels</p>
  </div>
</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 →