Brandbook v1, concept
Blue Rooster bouwt op hetzelfde ontwerp als Shogun (richting B v2): dezelfde templates, componenten en paginaopbouw. Wat verschilt is het merk en de klant. Dit brandbook legt vast hoe Blue Rooster eruitziet en wat er voor dealers anders werkt.
Shogun verkoopt aan de consument, Blue Rooster aan de dealer. Het ontwerp is gedeeld. De keuzes per merk volgen uit wie er koopt en hoe die persoon bestelt.
| Shogun | Blue Rooster | |
|---|---|---|
| Koper | Consument, vooral op mobiel | Dealer en winkelier, bestelt in aantallen |
| Belangrijkste pagina | Homepage en productpagina | Categoriepagina, ingelogd in list view |
| Prijs | Verkoopprijs voor iedereen | Uitgelogd alleen MSRP, ingelogd dealerprijs met staffels |
| Voorraad | Leverbelofte ("vandaag verzonden") | "In stock", "Only 6 in stock", "Available for backorder" of "Out of stock", met de verwachte leverdatum als die bekend is |
| Social proof | Trustpilot-score in de header | Geen reviews |
| Wishlist | Ja | Nee |
| Accentkleur | Shogun Yellow #FFE51E | Rooster Blue #0068B8 |
| Koppenletter | Barlow Semi Condensed | DIN Pro Black |
| Talen | shogun.nl en shogun.shop | EU-store view (Engels) en NL-store view, uitbreidbaar per land |
Bron: bluerooster.eu (oktober 2026) en de redesigncall met Justin van 26 augustus 2026.
Het logo blijft altijd zichtbaar, op elk scherm. In de nieuwe header staat het op Ink: de witte letters met zwarte rand lezen daar het best, en de rode kam en het blauwe lijf van de haan springen eruit.
Primair: op Ink (header, footer)Op wit (facturen, mail, print)
Alleen de haan (favicon, klein)✕Niet: logo op Rooster Blue✕Niet: logo los op een fotoHet neutrale palet komt één op één van Shogun. Het geel van Shogun wordt Rooster Blue, het blauw dat nu al in het Blue Rooster-thema staat. Nieuw zijn de statuskleuren: dealers lezen voorraad af aan kleur, in de kaart, in de list view en straks in quick order.
Koppen in DIN Pro Black, het lettertype dat Blue Rooster nu al gebruikt. De rest in Inter, net als bij Shogun. DIN Pro Black neemt elke plek in waar Shogun Barlow Semi Condensed gebruikt, op dezelfde maten.
Over 2,500 products from around 30 brands, delivered to your store. Your account manager helps with stock questions, backorders and permits.
Twee soorten beeld, net als bij Shogun. Productfoto's vrijstaand op wit, vierkant en met ruimte rondom. Sfeerbeeld uit het veld voor categorieën en banners.
AirsoftHetzelfde geldt voor banners: de huidige homepagebanner heeft "MORE INFO" in het beeld. In het nieuwe ontwerp zijn kop, tekst en knop HTML, zodat dezelfde banner in elke store view werkt.
Productfoto's komen uit Akeneo en staan nu al op wit. In de kaart krijgen ze object-fit: contain met 1rem ruimte rondom, zodat lange geweren en kleine onderdelen naast elkaar in balans blijven.
De componenten van Shogun in Blue Rooster-stijl. Wat er per loginstatus verschilt, zie je met de schakelaar hieronder. Header, productkaarten en list view volgen die stand.
Uitgelogd: alleen MSRP, geen voorraad, geen bestelknop, alleen grid view.Ingelogd: dealerprijs, staffels, voorraad, aantal en bestellen. List view is de standaard.
Opbouw en maten van de Shogun-header. Verschillen: utility bar met klantenservice, quick order (ingelogd) en taal en land. Een bredere zoekbalk, omdat dealers vaak op SKU zoeken. Geen wishlist. Ingelogd staat er een groene stip bij het account, zoals bij Shogun.
| Variant | Achtergrond | Tekst | Rand | Hover |
|---|---|---|---|---|
| Primary | #0068B8 | #FFFFFF | geen | #004B85, omhoog 2px, blauwe schaduw |
| Dark | #1D1C1C | #FFFFFF | geen | #232323, omhoog 2px |
| Outline | #FFFFFF | #1D1C1C | 1.5px #E6E6E6 | rand #0068B8, tekst #004B85 |
| Ghost (op Ink) | transparant | #FFFFFF | 1.5px wit 34% | rand en tekst #1898D8 |
Basis gelijk aan Shogun: Inter 700, .95rem, padding .92rem 1.5rem, radius 13px (rounded-control), ingedrukt scale .985. De bestelknop in kaarten en list view is compacter: 40px hoog, radius 10px.
Blue Choice
| Qty | Price | Save |
|---|---|---|
| 1+ | €1,249.00 | |
| 3+ | €1,199.00 | 4% |
| 6+ | €1,149.00 | 8% |
| Qty | Price | Save |
|---|---|---|
| 1+ | €259.00 | |
| 5+ | €245.00 | 5% |
| 10+ | €235.00 | 9% |
| Qty | Price | Save |
|---|---|---|
| 1+ | €84.50 | |
| 10+ | €79.00 | 7% |
Kaart, hover en beeldverhouding van Shogun. Verschillen: geen sterren en geen wishlist-hartje. Ingelogd staat de bestelregel altijd zichtbaar, niet pas bij hover: dealers bestellen direct vanuit de carrousel. Staffelprijzen klappen uit onder een kleine link, zonder grote tabel. Prijzen en SKU's in dit document zijn voorbeelden.
| SKU | Product | Stock | Dealer price | MSRP | Tiers | Order | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
BIN-MCAR-45-GLD | BintacMCAR 4500PSI | Gold | PCP | In stock | €1,249.00 | €1,699.00 |
|
|||||||||||||
 |
AEA-SFC | AEASF Compact | PCP | Available in 2 of 3 | from €689.00 | €949.00 | per variant | |||||||||||||
| AEA-SFC-635 | .25 / 6.35mm | Only 4 in stock | €689.00 | €949.00 | |||||||||||||||
| AEA-SFC-762 | .30 / 7.62mm | In stock | €699.00 | €959.00 | |||||||||||||||
| AEA-SFC-900 | .357 / 9mm | Out of stock | €719.00 | €979.00 | |||||||||||||||
|
VIC-T5-122 | VictopticsT5 Red Dot Sight 1x22 | Only 7 in stock | €39.95 | €59.95 |
|
|||||||||||||
|
RKS-BP69-CRB | Rokstad6-9" Bipod | Carbon | Swivel Spring Retractable | Available for backorder | €84.50 | €129.00 |
|
|||||||||||||
 |
AIR-KRAIT-MK2 | Airmaks ArmsKrait MKII | Magazine | 5.5mm | In stock | €24.95 | €37.50 | No tiers | |||||||||||||
|
ELK-STK-GENT | Elk RidgeGentleman's Knife | Stockman | Only 3 in stock | €18.50 | €27.95 | No tiers |
Vastgelegd is de stijl: kolommen, sticky kop, statuskleuren, bestelregel. Alleen SKU, beeld en productnaam linken naar de productpagina; de rij zelf is niet klikbaar, zodat aantal en bestelknop niet in de weg zitten. Varianten (zoals kalibers) klappen uit onder het hoofdproduct. Hoe dit technisch werkt en wat het kost, werken we uit in de losse taken.
Blue Choice
Bestseller
New
Productbadges linksboven op het productbeeld, allemaal in Rooster Blue, zoals Shogun ze allemaal in geel heeft. Blue Choice is de Blue Rooster-versie van "Shogun's keuze". Een low-stock-badge is er niet: voorraad staat als eigen regel in de kaart.
Voorraadregel volgens het redesigndocument: meer dan 10 toont "In stock", van 1 tot 10 "Only 6 in stock", op 0 "Available for backorder" als nabestellen kan en anders "Out of stock". Is er een verwachte leverdatum (uit Picqer), dan volgt die erachter: "Out of stock – Expected 12 September". Zonder datum staat er geen verwachting. Niet bestelbaar: geen aantal, alleen een grijze knop "Out of stock".
Dezelfde drie statuskleuren in de terugmelding van quick order (groen, geel, rood, zoals Justin het beschreef). Quick order zelf is een losse feature met een eigen prototype.
De USP's van de huidige site in de USP-balk van Shogun. Iconen in Rooster Blue. Elke sectie opent met kicker, kop in DIN Pro Black en een "View all"-link rechts.
Shogun en Blue Rooster delen de templates. De verschillen zitten in de tokens van tailwind.config.js. Daarvoor is één aanpassing in de Shogun-basis nodig: de accentkleur heet daar nu letterlijk yellow. We hernoemen die naar accent, met een eigen tekstkleur op het accent en een accent voor donkere vlakken. Dan zet elk merk zijn eigen waarden en blijven de templates gelijk.
| Token | Shogun | Blue Rooster | Gebruik |
|---|---|---|---|
| Accent (verschilt per merk) | |||
accent | #FFE51E | #0068B8 | Primaire knop, zoekknop, badges, actieve staat |
accent-hover | #FFEC52 | #004B85 | Hover. Shogun wordt lichter, Blue Rooster donkerder |
accent-fg nieuw | #1D1C1C | #FFFFFF | Tekst op het accent: zwart op geel, wit op blauw |
accent-ondark nieuw | #FFE51E | #1898D8 | Kickers en hover op Ink |
accent-tint nieuw | n.v.t. | #E8F1FA | Lichte vlakken, geselecteerde staffel |
| Status | |||
success | #1F9D4D | #15803D | Op voorraad. Donkerder voor contrast in kleine tekst |
warning nieuw | n.v.t. | #B45309 | Backorder, deels leverbaar |
danger nieuw | n.v.t. | #B91C1C | Niet leverbaar, fout |
| Gedeeld (gelijk) | |||
ink, ink-2, ink-deep | #1D1C1C · #232323 · #141313 | Header, footer, donkere banden | |
surface, line | #F5F5F4 · #E6E6E6 | Vlakken en randen | |
fg, fg-soft | #222020 · #5C5856 | Tekst | |
rounded-control / card / panel | 13px · 18px · 28px | Knoppen, kaarten, grote panelen | |
| Lettertypes | |||
font-display | Barlow Semi Condensed | DIN Pro (Black 900) | Koppen, menu, labels |
font-body | Inter | Inter 400 tot 700 | Het thema laadt nu alleen 400 en 600; 500 en 700 komen erbij |
// app/design/frontend/Vendic/bluerooster/web/tailwind/tailwind.config.js (theme.extend) colors: { accent: { DEFAULT: '#0068B8', hover: '#004B85', fg: '#FFFFFF', ondark: '#1898D8', tint: '#E8F1FA' }, ink: { DEFAULT: '#1D1C1C', 2: '#232323', deep: '#141313' }, surface: { DEFAULT: '#F5F5F4', 2: '#EFEEEC' }, line: { DEFAULT: '#E6E6E6', dark: 'rgba(255,255,255,.12)' }, fg: { DEFAULT: '#222020', soft: '#5C5856', ondark: '#F3F1EF', 'ondark-soft': '#A7A3A0' }, success: '#15803D', warning: '#B45309', danger: '#B91C1C', }, fontFamily: { display: ['"DIN Pro Font"', 'Inter', 'sans-serif'], // existing @font-face name in the Blue Rooster theme body: ['"Inter"', 'system-ui', 'sans-serif'], },
| Variabele | Waarde | Waar het terugkomt |
|---|---|---|
--color-primary | #0068B8 | Standaard Hyvä-knoppen en links in account en checkout |
--color-primary-lighter | #1A7BC6 | Hover van standaardcomponenten |
--color-primary-darker | #004B85 | Blauwe tekst, ingedrukt |
--color-fg / --color-fg-secondary | #222020 / #5C5856 | Tekst |
--color-bg / --color-surface | #FFFFFF / #F5F5F4 | Achtergrond en panelen |
Pagina's die we niet apart ontwerpen, zoals account en checkout, lezen deze variabelen. Zo volgen ze de huisstijl zonder eigen ontwerp.
Twee lijstjes: wat er verandert ten opzichte van de huidige bluerooster.eu, en waar Blue Rooster afwijkt van het Shogun-ontwerp.
Wat we nog nodig hebben of samen moeten beslissen voordat de templates in Blue Rooster-stijl gebouwd worden.
yellow wordt accentAfstemmen met de frontend-ontwikkelaar van Shogun, zodat beide thema's dezelfde templates gebruiken.