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

Earthy Natural

Organic design system built on sand, clay and sage, with organic rounded shapes and a single electric teal accent for actions. For farm shops, eco brands, food and lifestyle.

View full screen ↗

Thema 08 · organisch en digitaal

Earthy Natural

Grond onder de nagels, cijfers op orde. Warme aardetinten dragen alles, teal wijst waar je bestelt.

Achtergrond · zand#EFE6D8
Oppervlak#F8F3EA
Tekst · aarde#2F2A24
Gedempt#6B6257
Lijn#D8CBB6
Accent · teal#00877F
Accent 2 · klei#B5653F
Signaal · salie#7D8F6A
Houten kist met bieten, boerenkool, wortels en pompoenen op een boerentafel

Boerderij De Hooge Weide · Twello

Groentekist week 42

  • Bieten met loof
  • Boerenkool
  • Winterpeen
  • Flespompoen
  • Salie, vers gesneden
€ 24,50ophalen vrijdag 16:00 tot 18:30

Letters · zaadzakje

Oogst van deze week

Zodiak voor koppen, Manrope voor alles wat je moet kunnen lezen: van herkomst tot houdbaarheid.

Kop
Zodiak 700 · 40
Intro
Zodiak 400 · 22
Tekst
Manrope 400 · 16
Label
Manrope 700 · 12

Knoppen en invoer

Labels en kaart

Op voorraadBiologischSeizoenNieuw
Abonnement zonder vastzittenElke week of om de week, stopzetten wanneer je wilt.

Past bij boerderijwinkels en groentetassen · eco- en zero-waste-merken · bakkerijen en lunchrooms · tuincentra · natuurlijke verzorging

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.
<!-- Earthy Natural · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tea"><div class="tea__in">
  <div class="tea__top">
    <div class="tea__intro">
      <p class="tea__eye">Thema 08 · organisch en digitaal</p>
      <h3 class="tea__name">Earthy <i>Natural</i></h3>
      <p class="tea__mood">Grond onder de nagels, cijfers op orde. Warme aardetinten dragen alles, teal wijst waar je bestelt.</p>
      <div class="tea__stones">
        <div class="tea__st" style="--c:#EFE6D8;--r:58% 42% 46% 54% / 52% 48% 52% 48%"><i></i><b>Achtergrond · zand</b><code>#EFE6D8</code></div>
        <div class="tea__st" style="--c:#F8F3EA;--r:44% 56% 60% 40% / 50% 44% 56% 50%"><i></i><b>Oppervlak</b><code>#F8F3EA</code></div>
        <div class="tea__st" style="--c:#2F2A24;--r:50% 50% 40% 60% / 60% 46% 54% 40%"><i></i><b>Tekst · aarde</b><code>#2F2A24</code></div>
        <div class="tea__st" style="--c:#6B6257;--r:62% 38% 52% 48% / 44% 58% 42% 56%"><i></i><b>Gedempt</b><code>#6B6257</code></div>
        <div class="tea__st" style="--c:#D8CBB6;--r:40% 60% 46% 54% / 56% 42% 58% 44%"><i></i><b>Lijn</b><code>#D8CBB6</code></div>
        <div class="tea__st" style="--c:#00877F;--r:54% 46% 58% 42% / 46% 56% 44% 54%"><i></i><b>Accent · teal</b><code>#00877F</code></div>
        <div class="tea__st" style="--c:#B5653F;--r:46% 54% 42% 58% / 58% 40% 60% 42%"><i></i><b>Accent 2 · klei</b><code>#B5653F</code></div>
        <div class="tea__st" style="--c:#7D8F6A;--r:56% 44% 50% 50% / 42% 60% 40% 58%"><i></i><b>Signaal · salie</b><code>#7D8F6A</code></div>
      </div>
    </div>
    <div class="tea__hero">
      <img class="tea__img" src="https://neddev.com/lab-media/thm-earthy-1.webp" alt="Houten kist met bieten, boerenkool, wortels en pompoenen op een boerentafel" loading="lazy">
      <div class="tea__hcard">
        <p class="tea__hloc">Boerderij De Hooge Weide · Twello</p>
        <p class="tea__ht">Groentekist week 42</p>
        <ul class="tea__hlist"><li>Bieten met loof</li><li>Boerenkool</li><li>Winterpeen</li><li>Flespompoen</li><li>Salie, vers gesneden</li></ul>
        <div class="tea__hfoot"><span><b>€ 24,50</b><small>ophalen vrijdag 16:00 tot 18:30</small></span><button class="tea__btn tea__btn--p" type="button">Bestel kist</button></div>
      </div>
    </div>
  </div>
  <div class="tea__row">
    <div class="tea__pack">
      <p class="tea__lbl">Letters · zaadzakje</p>
      <p class="tea__t1">Oogst van deze week</p>
      <p class="tea__t2">Zodiak voor koppen, Manrope voor alles wat je moet kunnen lezen: van herkomst tot houdbaarheid.</p>
      <dl class="tea__specs"><div><dt>Kop</dt><dd>Zodiak 700 · 40</dd></div><div><dt>Intro</dt><dd>Zodiak 400 · 22</dd></div><div><dt>Tekst</dt><dd>Manrope 400 · 16</dd></div><div><dt>Label</dt><dd>Manrope 700 · 12</dd></div></dl>
    </div>
    <div class="tea__ui">
      <p class="tea__lbl">Knoppen en invoer</p>
      <div class="tea__btns">
        <button class="tea__btn tea__btn--p" type="button">In mandje</button>
        <button class="tea__btn tea__btn--s" type="button">Bekijk oogst</button>
        <button class="tea__btn tea__btn--g" type="button">Recepten</button>
        <button class="tea__btn tea__btn--p is-hover" type="button">Hover</button>
      </div>
      <div class="tea__form">
        <label class="tea__field"><span>Postcode</span><input class="tea__input" type="text" value="7391 AB"></label>
        <label class="tea__field"><span>Ophaalpunt</span><select class="tea__sel"><option>Boerderijwinkel Twello</option><option>Markt Deventer · za</option></select></label>
      </div>
    </div>
    <div class="tea__side">
      <p class="tea__lbl">Labels en kaart</p>
      <div class="tea__badges"><span class="tea__bdg tea__bdg--s">Op voorraad</span><span class="tea__bdg tea__bdg--c">Biologisch</span><span class="tea__bdg">Seizoen</span><span class="tea__bdg tea__bdg--t">Nieuw</span></div>
      <div class="tea__card">
        <span class="tea__card-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V10"/><path d="M12 13c-4 0-6-3-6-7 4 0 6 3 6 7z"/><path d="M12 11c0-3.5 2-6 6-6 0 3.5-2 6-6 6z"/></svg></span>
        <span><b>Abonnement zonder vastzitten</b><small>Elke week of om de week, stopzetten wanneer je wilt.</small></span>
      </div>
    </div>
  </div>
  <p class="tea__fit"><b>Past bij</b> boerderijwinkels en groentetassen · eco- en zero-waste-merken · bakkerijen en lunchrooms · tuincentra · natuurlijke verzorging</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 →