Store Easy
“Zip it. Seal it. Store it.”
Ziplock & storage bags
3 sizes — Small, Medium, Large
@storeeasy.lk
Internal reference — not linked from the site
Design System
Every colour, size and component the Store Easy site is built from. This page renders from the same stylesheets as the shop, so what you see here is exactly what ships.
Three ranges, one system
Store Easy sells under three names. They share a layout, type scale and spacing system — only the accent colour changes, so the site reads as one shop.
Throw Easy
“Made from 100% recycled plastic.”
Garbage bags
6 sizes — Small through XXXL
@throweasy
Tubby
“Seal it. Dispose it. Done.”
Diaper disposal bags
2 pack sizes — 10 and 30
@tubbybaby
Colour
Primary, accent and background were supplied by Store Easy. The secondary green is our proposal — it carries the recycled-plastic story behind both Throw Easy and Tubby.
…
Primary — Store Easy Blue
Buttons, links, active states, header
6.1:1 on white — passes AA for text
--se-blue-500
…
Secondary — Eco Green
Recycled claims, in-stock, Throw Easy range
6.5:1 with white text — passes AA
--se-green-500
…
Accent — Store Easy Yellow
Offer badges and highlight blocks — as a fill only
1.5:1 on white — never use as text or icons
--se-yellow-500
…
Tubby Purple
Tubby product range only
5.8:1 on white — passes AA
--se-purple-500
One rule about the yellow.
At 1.5:1 against white it is invisible to anyone with reduced vision, so it never
becomes text, an icon or a thin line on white. As a solid block with near-black
text on top it reads at 12.6:1 — one of the strongest pairings in the palette.
Neutrals — cooled toward the brand blue
…
Headings
…
Body text
…
Muted text
…
Borders
…
Dividers
…
Page tint
…
Background
Typography
Eight sizes, no more. Each step scales smoothly between phone and desktop, so nothing needs a separate mobile size. Resize this window to watch them move.
…
· h1 · 800
Zip it. Seal it. Store it.
…
· h2 · 800
Made in Sri Lanka, sold at Keells
…
· h3 · 700
Throw Easy Garbage Bags
…
· h4 · 700
Choose your size
…
· lede · 400
Strong, resealable bags for everyday kitchen storage.
…
· body · 400
Body copy sits at sixteen pixels with generous line height, held to roughly sixty-five characters per line — the width most people read comfortably.
…
· small · 400
Delivery is calculated at checkout.
…
· label · 700
100% RECYCLED PLASTIC
Layout
Content never runs wider than the container below, on any screen. The dashed
box is the real .se-container — it is the same element
wrapping every section on this page.
gutter
max-width …
gutter
| Container | Width | Used for |
|---|---|---|
| Default | … | Every page section — the global cap |
| Narrow | … | Cart, checkout, account, login, the policy pages |
| Text | … | Blog posts — a single column of running prose |
Breakpoints — designed phone-first
| Name | From | Product grid | Notes |
|---|---|---|---|
| Base | 320px | 1 column | Sticky Add to Cart bar |
| sm | 480px | 2 columns | Large phones |
| md | 768px | 2 columns | Menu still a drawer |
| lg | 1024px | 3 columns | Full navigation appears |
| xl | 1280px | 4 columns | Product grid reaches four across |
| xxl | 1440px | 4 columns | Container reaches its cap |
Spacing — every gap is a multiple of 4px
…
· Icon to label
…
· Inside a badge
…
· Card padding
…
· Between cards
…
· Heading to content
…
· Section padding, mobile
…
· Section padding, desktop
Components
Live elements, not screenshots. Every interactive element is at least 44 pixels tall so it can be tapped accurately on a phone.
Buttons
Badges
100% Recycled
Save 15%
In Stock
Out of Stock
Form field
Each pack contains 25 bags.
Notices
Made from 100% recycled plastic.
Free delivery on orders over LKR 5,000.
Product cards — one component, three ranges
product photo
100% Recycled
product photo
product photo