Room 03 · Independent fashion house · Concept
Salkem
Linen, loudly.
Salkem, a fictional linen and wool label. A lookbook that turns like a magazine spread, with garments drawn as technical flats and a simulated checkout.
Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.
01 The brief
- The brand
- Salkem is a fictional independent fashion house making seasonal linen and wool collections in small runs. Its tagline is "Linen, loudly."
- The problem
- Shoppers who buy from independent labels want to understand a collection and place an order. The site presents one collection of twelve pieces like a lookbook and completes a simulated purchase.
02 The idea
A lookbook spread that turns
- What you see
- Two facing pages are divided by one black rule. The lead image sits on the left, a ruled list of pieces on the right, each with compact colour and size controls. Turning the spread changes the frame, and every piece is one click from the basket.
- How it works
- The turn is a clip-path reveal. Garments are drawn as inline SVG technical flats with dashed stitch lines, since product photographs do not exist. The basket is kept in the browser's localStorage.
03 Design system
- Bone#F3F0EA groundPage and default control face.
- Ink#0B0B0B inkText, rules, outlines and focus rings.
- Acid Lime#D4F23A accentSelected or current item and the primary action. Always a fill, never text.
- Warm Grey#5E5B55 mutedSecondary text and captions.
- Plate #E6E1D6. The paper behind a garment flat.
- Proof Red #9B1C1C. Field errors only.
- Type
- Bodoni Moda
Headlines, medium weight and tightly tracked, with italic for the spread heading and footer name. - Jost
All reading and controls.
- Bodoni Moda
- Edges
- Radius 0 on every control and plate. No shadows, gradients or cards; containment is a 1px ink rule or a 1.5px outline. Disabled controls switch to a dashed outline.
- Motion
- Animation is limited to the spread turn, and it respects reduced motion.
04 Process
Pre-production
Pre-production set the thesis (a collection read like a magazine), the route list and the known risks, including that stock imagery could only stand in for campaign and product photography.
Build
The site was built from a written plan: data and basket logic first, then the spread, product pages and the three-step checkout.
Finish review
Impeccable finish-review rounds compared the finished build with the direction and design system.
Fixes
Material findings were fixed, then the pages were checked again.
05 Technology and accessibility
- Stack
- Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
- Particular to this site
- Clip-path spread transition
- SVG technical flats of each garment
- Basket in localStorage
- Three-step checkout simulation
- Access
- Skip links and labelled regions
- Colour and size options expose pressed state; unavailable options use aria-disabled and a dashed outline
- Form errors use aria-invalid and aria-describedby
- Cart and checkout changes are announced through status and live regions
- Reduced-motion styles limit the spread turn
- Tests
- Covered by its own Playwright end-to-end spec and a unit test file for its logic.
06 Honest notes
Salkem is a fictional brand and a concept project by Artlogic. Prices are examples in euros, stock states are invented and no payment is taken.
The basket is saved in the visitor's own browser so it survives a reload. The checkout and contact forms are demos and send nothing to a server.
Garments appear as drawn technical flats because there are no product photographs. The few photographs are free Unsplash stock of fabric and texture, with no models, and are stand-ins to be replaced by generated campaign and product images. Some are off-palette, which is a known limit.
07 See it
Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.