Två sajter.
En backoffice.
Fjällstugor i Stöten och hyreslägenheter i Gnosjö. Olika kunder och olika utseende, byggda på samma plattform med samma backoffice.
- Kunder
- Polarstigen, GnosjöBo Fastigheter
- Sedan
- 2026
- Status
- Pilot
- Vi byggde
- Plattform, CMS, bokning, hyresgästportal
Samma backoffice under båda
- Block-CMS
- Veckobokning
- Hyresavtal
- Hyresgästportal
- Svenska + engelska
Översikt
Polarstigen hyr ut en fjällstuga en vecka i taget. GnosjöBo Fastigheter hyr ut 21 lägenheter i centrala Gnosjö med vanliga hyresavtal. Två verksamheter som inte har mycket gemensamt, och båda är byggda på samma fastighetsplattform, med samma backoffice.
Utmaningen
Polarstigen ville hyra ut sin fjällstuga själva, en vecka i taget och utan förmedling. GnosjöBo Fastigheter behövde en plats för lediga lägenheter, intresseanmälningar och hyresgäster. Två helt olika behov.
Vad vi byggde
En fastighetsplattform med en backoffice för båda: block-CMS, veckobokning, hyresavtal och en hyresgästportal, och varje sajt med sitt eget utseende.
Hur det används i dag
Båda sajternas sidor, bilder och inställningar ligger redan i plattformen, klara att köras från samma backoffice.
Varje sajt har egen domän, egna färger och egna menyer. En ny sajt läggs upp i backoffice, utan ny installation och utan ny kod, och man byter mellan dem i en meny uppe i hörnet.
Polarstigen
Polarstigen hyr ut en nybyggd stuga i Granfjällsbyn i Stöten, 150 meter från liften: tolv bäddar, fem sovrum, fyra badrum och relaxrum med bastu. Uthyrningen sköter de själva, utan förmedling, så sajten är både skyltfönster och bokningsdisk.
Besök polarstigen.se (öppnas i en ny flik)
Gästen väljer ankomstlördag direkt på startsidan och landar i stugans kalender. Man hyr hela veckor, lördag till lördag. Har veckan ett pris ser man totalsumman och bokar direkt, annars blir det en förfrågan som Polarstigen svarar på med ett pris.
Sajten är mörk, med kvällsbilder på stugan och stora foton inifrån, på svenska och engelska.
GnosjöBo
GnosjöBo Fastigheter äger ICA-huset på Köpmansgatan 21 i centrala Gnosjö, med 21 hyreslägenheter och ICA Supermarket i samma fastighet. Lägenheterna renoveras en i taget, oftast när någon flyttar.
Besök gnosjobo.se (öppnas i en ny flik)
På sajten ser man de lediga lägenheterna, filtrerar på antal rum och gör en intresseanmälan. Varje lägenhet har en egen sida med bilder, rum och hyra, och uthyrningspolicyn och allt om tvättstugan, soporna och parkeringen ligger på samma ställe.
Hyresgästerna får en personlig inbjudan till Mina sidor via e-post. Där ser de sitt hyresavtal och sina betalningar, med bankgiro och referens att kopiera, laddar ner avtalet som PDF och gör felanmälningar som de kan följa tills de är åtgärdade. Utseendet är ljust och stramt, och liknar inte Polarstigens alls.
Utseende
Tre sajter, ett skal.
Polarstigen och GnosjöBo har var sin stilmall, Gislatorp bara en rad i databasen. Välj en av dem så byter exemplet utseende, eller klä om hela den här sajten och se hur långt ett tema räcker.
Gäller tills du stänger fliken. Bara du ser det.
Polarstigens stugor: snö, polarnatt och lampljus som lyser upp knapparna.
Kontrast för brödtext: 16,1:1. Dämpad text: 6,8:1.
Veckans leveranser
AktivTre order väntar på packning. Nästa bil går klockan två.
Allt som hör till projektet, på ett ställe.
Sparat
Ändringen syns direkt.Det här ändrades 138 värden
Källa: NIT.Estate src/NitBaseline.Client/src/tenants/polarstigen/polarstigen.css @ 900a2de0
| Namn | Norin IT | Polarstigen |
|---|---|---|
--accent | #35312c | #e9ecf5 |
--accent-foreground | #ede6db | #1b2236 |
--background | #0f0d0b | #f5f7fb |
--border | #75564e | #d9dfeb |
--card | #282420 | #ffffff |
--card-foreground | #ede6db | #121a2e |
--chart-1 | #f97316 | #3b82f6 |
--chart-2 | #86b6dc | #14b8a6 |
--chart-3 | #e8b04a | #f59e0b |
--chart-4 | #7cc48f | #8b5cf6 |
--chart-5 | #c79ab8 | #ec4899 |
--chart-6 | #827b72 | #64748b |
--chart-axis | #c4bbae | #4a5672 |
--chart-cat-1 | #f97316 | #3b82f6 |
--chart-cat-10 | #7cc48f | #8b5cf6 |
--chart-cat-2 | #86b6dc | #14b8a6 |
--chart-cat-3 | #e8b04a | #f59e0b |
--chart-cat-4 | #7cc48f | #8b5cf6 |
--chart-cat-5 | #c79ab8 | #ec4899 |
--chart-cat-6 | #827b72 | #64748b |
--chart-cat-7 | #f97316 | #3b82f6 |
--chart-cat-8 | #86b6dc | #14b8a6 |
--chart-cat-9 | #e8b04a | #f59e0b |
--chart-current | #f97316 | #3571d5 |
--chart-exempt | #6b655e | #939bae |
--chart-grid | #75564e | #d9dfeb |
--chart-negative | #f2735f | #b8322a |
--chart-other | #d0d0d0 | #373737 |
--chart-positive | #7cc48f | #2e7a52 |
--chart-previous | #6d6d6d | #8a8a8a |
--chart-projected | #6e391a | #a2c5fc |
--chart-rank-1 | #422516 | #c6dbfd |
--chart-rank-2 | #5e3119 | #afcdfd |
--chart-rank-3 | #7a3e1c | #99bffc |
--chart-rank-4 | #994b1d | #81b0fb |
--chart-rank-5 | #b7581d | #6ba1fa |
--chart-rank-6 | #d9661b | #5391f8 |
--chart-rank-7 | #f97316 | #3b82f6 |
--chart-ref-line | #c4bbae | #4a5672 |
--chart-seq-1 | #422516 | #c6dbfd |
--chart-seq-2 | #6c381b | #a4c6fd |
--chart-seq-3 | #994b1d | #81b0fb |
--chart-seq-4 | #c75e1c | #609af9 |
--chart-seq-5 | #f97316 | #3b82f6 |
--chart-text | #c4bbae | #4a5672 |
--chart-volume | #86b6dc | #14b8a6 |
--destructive | #f2735f | #b8322a |
--destructive-foreground | #0f0d0b | #ffffff |
--destructive-soft-foreground | #f2735f | #8f2620 |
--foreground | #ede6db | #121a2e |
--info | #86b6dc | #3d558c |
--info-foreground | #0f0d0b | #ffffff |
--info-soft-foreground | #86b6dc | #2c3c60 |
--input | #827b72 | #7f8ba6 |
--muted | #191614 | #e9edf5 |
--muted-foreground | #c4bbae | #4a5672 |
--muted-foreground-subtle | #c4bbae | #5b6681 |
--popover | #282420 | #ffffff |
--popover-foreground | #ede6db | #121a2e |
--primary | #9a3412 | #f2ab3c |
--primary-foreground | #ede6db | #121a2e |
--primary-soft-foreground | #f97316 | #7a4a0e |
--ring | #f97316 | #3d558c |
--secondary | #35312c | #e6ebf5 |
--secondary-foreground | #ede6db | #1b2236 |
--state-tile-bad-bg | #450a0a | #fef2f2 |
--state-tile-bad-foreground | #fca5a5 | #991b1b |
--state-tile-brand-bg | #1e120e | #f5f1ee |
--state-tile-brand-foreground | #f97316 | #7a4a0e |
--state-tile-good-bg | #052e16 | #f0fdf4 |
--state-tile-good-foreground | #86efac | #166534 |
--state-tile-info-bg | #172554 | #eff6ff |
--state-tile-info-foreground | #93c5fd | #1e40af |
--state-tile-neutral-bg | #191614 | #e9edf5 |
--state-tile-neutral-foreground | #c4bbae | #4a5672 |
--state-tile-warning-bg | #451a03 | #fffbeb |
--state-tile-warning-foreground | #fcd34d | #92400e |
--state-tint-bad | #f2735f | #b8322a |
--state-tint-brand | #9a3412 | #f2ab3c |
--state-tint-good | #7cc48f | #2e7a52 |
--state-tint-info | #86b6dc | #3d558c |
--state-tint-neutral | #c4bbae | #4a5672 |
--state-tint-warning | #e8b04a | #b45309 |
--success | #7cc48f | #2e7a52 |
--success-foreground | #0f0d0b | #ffffff |
--success-soft-foreground | #7cc48f | #1f5a3b |
--warning | #e8b04a | #b45309 |
--warning-foreground | #0f0d0b | #ffffff |
--warning-soft-foreground | #e8b04a | #8a3f07 |
--font-family-display | 'Newsreader Display', 'Newsreader Fallback', 'Georgia', serif | 'NI Demo Familjen Grotesk', ui-sans-serif, system-ui, sans-serif |
--font-family-mono | ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', monospace | 'NI Demo DM Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace |
--font-family-sans | 'Inter', 'Inter Fallback', sans-serif | 'NI Demo Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif |
--font-family-special | 'Inter', 'Inter Fallback', sans-serif | 'NI Demo Familjen Grotesk', ui-sans-serif, system-ui, sans-serif |
--radius-alert | 0 | 4px |
--radius-avatar | 0 | 9999px |
--radius-badge | 0 | 999px |
--radius-btn | 0 | 4px |
--radius-btn-pill | 0 | 9999px |
--radius-card | 0 | 4px |
--radius-checkbox | 0 | 2px |
--radius-chip | 0 | 999px |
--radius-chip-pill | 0 | 9999px |
--radius-input | 0 | 4px |
--radius-lg | 0 | 6px |
--radius-md | 0 | 4px |
--radius-modal | 0 | 10px |
--radius-popover | 0 | 6px |
--radius-progress | 0 | 9999px |
--radius-sm | 0 | 2px |
--radius-switch | 0 | 9999px |
--radius-tooltip | 0 | 4px |
--radius-xl | 0 | 10px |
--radius-2xl | 0 | 16px |
--btn-hover-shadow | none | rgba(242, 171, 60, 0.35) 0px 0px 0px 1px, rgba(242, 171, 60, 0.55) 0px 10px 32px -8px |
--duration-fast | 0.2s | 0.12s |
--duration-normal | 0.3s | 0.2s |
--duration-slow | 0.5s | 0.42s |
--gradient-brand | linear-gradient(rgb(154, 52, 18), rgb(154, 52, 18)) | linear-gradient(rgb(242, 171, 60), rgb(242, 171, 60)) |
--hover-lift | 0 | -2px |
--hover-scale | 1 | 1.02 |
--shadow-2xl | rgba(8, 6, 4, 0.65) 0px 32px 64px -20px | rgba(11, 16, 32, 0.4) 0px 40px 80px -20px |
--shadow-glow | rgba(0, 0, 0, 0) 0px 0px 0px 0px | rgba(242, 171, 60, 0.35) 0px 0px 0px 1px, rgba(242, 171, 60, 0.55) 0px 10px 32px -8px |
--shadow-lg | rgba(8, 6, 4, 0.55) 0px 12px 32px -12px | rgba(18, 26, 46, 0.18) 0px 16px 36px -10px |
--shadow-md | none | rgba(18, 26, 46, 0.1) 0px 6px 16px -4px |
--shadow-sm | none | rgba(18, 26, 46, 0.06) 0px 1px 2px 0px |
--shadow-xl | rgba(8, 6, 4, 0.6) 0px 24px 48px -16px | rgba(18, 26, 46, 0.26) 0px 28px 60px -16px |
--norinit-brand-ink | #f97316 | #7a4a0e |
--norinit-brand-hover | #b0400f | #f2ab3c |
--norinit-brand-faint | #9a341226 | #7a4a0e26 |
--norinit-brand-soft | #9a341266 | #7a4a0e66 |
--norinit-brand-strong | #9a3412a6 | #7a4a0ea6 |
--norinit-surface-low | #35312c | #e9edf5 |
--norinit-outline | #aa8984 | #7f8ba6 |
--norinit-outline-dim | #75564e | #d9dfeb |
--norinit-credit-color | #f973168c | #7a4a0e8c |
--norinit-logo-shape | #6e6e6e | #4a5672 |
--norinit-logo-shape-hover | #8a8a8a | #2e3850 |
--norinit-logo-dot | #4d4c4c | #a0a7b7 |
Skillnaden mellan sajterna är tema, menyer och innehåll. Komponenterna och backoffice är desamma.
Backoffice
Plattformen har en backoffice för båda sajterna. Man byter sajt i en meny, och resten är detsamma: sidor, bilder, uthyrning och förfrågningar.
Block på riktig förhandsvisning
Sidorna byggs av block som hero med video, bildgallerier, text med bild och vanliga frågor. Man redigerar dem direkt i sajtens eget utseende och publicerar när de är klara.
Veckor eller hyresavtal
Veckobokning med pris eller på förfrågan för stugan. För lägenheterna intresseanmälningar, hyresavtal, månadshyror, påminnelser och depositioner.
Portal för hyresgäster
Avtal, betalningar, depositioner och felanmälningar på ett ställe. Inloggningen börjar med en personlig inbjudan, och länken gäller i sju dagar.
Svenska och engelska
Varje sida finns på båda språken, med en språkväxlare direkt i redigeraren.
Så byggde vi det
Varje kund ska få en sajt som ser ut som deras egen, utan att vi bygger en ny plattform för varje. Det som skiljer sajterna åt är tema, menyer och innehåll, inte kod.
En plattform, flera sajter
Varje sajt har egen domän, egna färger och egna menyer, med samma backoffice och samma kod. En ny sajt läggs upp i backoffice, utan ny installation.
Innehållet finns också som filer
Varje sida, meny och inställning kan sparas som filer och läsas in igen, och varje ändring går att kontrollera innan den går ut.
Vårt designsystem i botten
Varje sajt är ett tema på samma komponenter som i våra andra system, med tangentbordsnavigering och minskad rörelse inbyggt.
- SvelteKit
- .NET
- TypeScript
- PostgreSQL
- Tailwind CSS
- Docker
- Kubernetes
Galleri
Nyckeltal
- Backoffice för båda sajterna
- 1
- Samma inloggning och samma kod. Man byter sajt i en meny.
- Sorters uthyrning
- 2
- Hela veckor i fjällen, lördag till lördag, och hyresavtal med månadshyra i Gnosjö.
- Nya installationer för en ny sajt
- 0
- En ny sajt läggs upp i backoffice, med egen domän, egna färger och egna menyer.
Har ni ett system som alla väntar på?
Berätta vad ni vill bygga, så tar vi det därifrån.
Nästa projekt
Designsystem
