Value Map
ÅRET · SAMÄGANDE APPENProdukter och tjänster
- Digital plattform med rollbaserad behörighet.
- Moduler för bokning, ekonomi och beslut.
- Krönika och bibliotek.
- Årlig tryck‑on‑demand‑bok.
- Trial innan betalning.
Designsystem
Årets visuella identitet. Varmvit, skogsgrön, mässing.
Layout & respons
Sajten ligger inom en .page-frame: samma maxbredd i header, huvudinnehåll och footer, centrerad när fönstret blir vidare än begränsningen. Ramen är ett fjortonkolumnsrutnät(linje 1–15 för spårindelning), med lika gutter mellan kolumner och symmetrisk yttre padding (padding-inline) som yttermarginal — samma upplägg som ÅRET:s layout guide i Figma. Sidinnehåll delar oftast den vänstra “kärnan” vid kolumn 5; olika sidor väljer höger ändpunkt för att inte låsa allt till en enda läsbrevsbredd.
Token
--page-max-width: 72rem — yttre maxbredd på ramen
--layout-columns: 14 och --layout-gutter (column-gap mellan kolumnerna)
Justera i :root i app/globals.css. Som standard ligger sidinnehåll i .page-frame-content: vid lg blir zon grid-column: 5 / 10(spår 5–9 i fjortonkolumnsrastret). För verktygsytor och listor ska sidan sätta data-layout-content-wide="1" på rot så ramen spänner över alla kolumner och en inner-shell (.layout-shell-wide eller .layout-shell-standard) styr läsbredd — samma sätt som historik och ekonomishell. Undantaget kalenderläget är data-page-frame-wide="1". Under lg täcker .page-frame-content alla kolumner som vanlig responsiv rutnätsfallback.
Innehållsbredder (tre nivåer)
Centrerade pelare inuti .page-frame. Välj en nivå per sida eller sektion så desktop inte blandar många olika max-w-*.
--layout-content-standard: 48rem — klasserna .layout-shell-standard, .layout-editorial-column, .layout-task-detail-shell (från lg) för texter, formulär och detaljer.--layout-content-wide: 70rem — .layout-shell-wide för listor och täta ytor (Att göra, historiklistor, personlistor med mera).--page-max-width: 72rem — ytterram; hela rasterytor med data-page-frame-wide / schema..layout-shell-economy använder samma maxbredd som den breda pelaren (--layout-content-wide, 70rem) så horisontella undermenyer syns utan att förlita sig på sidscroll.grid-column (5 / 12, 5 / 15, …) efter behov. Klassen .layout-content-wide sätter 5 / 15 vid lg för bredare innehåll.CSS: repeat(14, minmax(0, 1fr)) + column-gap: var(--layout-gutter) på .page-frame. Inline-nav placeras med grid-column: 5 / 13 och är en flex-rad med jämnt gap-x mellan etiketterna (inte en länk per kolumnspår), se components/layout/Nav.tsx. Rader som ska fylla hela bredden i ramen använder .page-frame-full (grid-column: 1 / -1).
Horisontella raderföljer samma tänkta skikt: tunn linje under topp, avdelare mellan filter och lista, mellan uppgiftsrader, före avsnitt som "KLART". Komponenterna sätter hairlines lokalt, inte en global radrastermotor.
Schematisk yta
Fjorton ljusare staplar och kolumn 5–9 (som noll‑index 4–8) lite starkare för att visa kärndan för typiskt sidinnehåll. Endast referens figur, inte dekor i produktion.
.page-frame har display: grid, horizontal margin-inline: auto, max-width: var(--page-max-width) och sammanhållande yttre padding-inline: clamp(1rem, 5%, 2.5rem).
Under ~448px (28rem)sänks basstorleken något (17px) för att undvika att lång text känns trång på små mobiler. Huvudnav (Att göra, …) döljs där och ersätts av en "Meny"-knytning som öppnar en sidopanel; inställningar når du alltid från ikon i headern.
| Brytpunkt | Beteende |
|---|---|
| < 640px | Tätare .page-frame-padding; meny som drawer. |
| lg (≥1024px) | Fullt fjortonkolumnsupplägg i header och huvudinnehåll; inline‑nav börjar vid kolumn 5 med jämnt mellanrum mellan länkar, inställningsikon vid kolumn 13. |
På sidor med långa tabeller eller filter används ofta overflow-x-auto på lokal nivå så att innehållet kan rullas utan att bryta hela rastret.
Färger
Background
#faf7f0Varmvit
Foreground
#141210Ink — 17:1
Accent
#1f2e22Skogsgrön
Accent foreground
#faf7f0
Brass
#9a7a3aMässing
Brass soft
#c2a87c
Muted
#ede9df
Muted foreground
#5a50437.2:1
Secondary
#ede4cf
Border
#c2b596Hairline
Destructive
#8c2e1a
Typografi
Big Caslon — Rubriker
Futura BT — Brödtext
Familjen har ägt huset i tre generationer. Med gemensamma spelregler, transparenta beslut och en gemensam kassa kan samägandet fungera — oavsett hur livet förändras.
Small text — muted. Bokningsperioden börjar första maj och avslutas sista september. Delägare bokar via plattformen.
Inställningar — typografi-token
Delnamn under Inställningar (och demo) använder variabler i :root i app/globals.css så samma nivå kan justeras på ett ställe. Jämför med heroEditorialInputClassName (stor onboarding-rad under rubrik) och moduleFieldInputClassName (kompakt modul/inset, text-sm): delnamn ligger däremellan som primär inställningsrad (settingsDelNamnValueClassName i lib/settings-del-namn-field-classes.ts).
Utility-klasser
Form — hero editorial input
Rubriker i Big Caslon (foreground) förblir stegets fråga; själva värdet ligger ett steg ned i tonalitet (text-muted-foreground), så steget läses fort som "titel ≠ svar". Vid fokus går värdetexten tillbaka till full kontrast för tydlig redigering. Placeholder förblir ljusare än ifyllt tecken. Kontrasten för muted ≠ mörkvit bakgrund dokumenteras under Tillgänglighet.
Steg 1 / 3
Demonstration (read‑only): tabba till ett riktigt fält för focus-visible:text-foreground.
Form — modulfält
Sekundära textrader i ModuleInset eller liknande: tyngd mellan compact Input och hero‑editorial. Fullerad ram, sandad yta (bg-secondary/), ingen serif.
Kontrast & tillgänglighet
Foreground på Background
17:1 — WCAG AAA
Muted foreground på Background
7.2:1 — WCAG AA. Samma token som hero editorial värdetext i stor serif (onboarding).
Accent foreground på Accent
Skogsgrön — WCAG AA+
Knappar & länkar
Tre knappnivåer i Futura — Hero, Solid, Text — plus länkar och chips. CTA:erna ska kännas som hotellbrevpapper: lugna, klassiska, med rörelse i hover snarare än färg. Kompakta verktygsknappar (tabeller, små kontroller): @/components/ui/button är ett sekundärspråk avsett för täta ytor — se filkommentaren där.
Hero-CTA — flow-knappar (onboarding, dialoger)
.cta-hero — Futura uppercase Medium (500), ~14px; minsta höjd ~44px, padding för hover-yta, rundade hörn (0.375rem); utan ram (bredvid moduler med border). Etikett med cta-hero__label. Pil 1cap och translateY(calc((1cap - 1em) * var(--cta-hero-arrow-shift))) så stammen linjerar i versalbandet (standardfaktor 0.42).
Inline tillbaka — textlänk med chevron
Till exempel startsidanBackNavLink — samma stroke-chevron som i onboarding (BackArrowIcon), inte typsnitts- eller Unicode-pilar. Framåt i hero-flöden: CtaArrow ovan.
Solid-CTA — formulär, primärval
.cta-solid — primär knapp i app-flöden: samma yta som .cta-landing-primary (accent-bakgrund, mässingsram, accent-foreground text, kvadratiska hörn, Futura caps). För tabellrader eller små ytor där Tailwind sänker text/padding: lägg till .cta-solid--compact så min-höjd från flödes-CTA inte tvingar knappen hög.
Text-CTA — sekundära actions
.cta-text — underline-on-hover, foreground/70.
Landning — Alternativ C (skogsgrön + mässingsram)
.cta-landing-primary delar stilregler med .cta-solid; på landningssidan används varianten med pil (cta-landing-primary__label). .cta-landing-secondary — sekundär med hairline mot ink, för marknadslandningens hjälteyta.
Eyebrow-länk — mini-tillägg
Mässing, underline, lättviktig. Används för optionella tillägg i flöden.
Kategori- och persontaggar
CategoryTag och PersonTag— punkt + versaler; "väntar" med läsbar sekundär ton (text-muted-foreground). På data-on-accentärvs ljusa prickar för kontrast mot skogsgrön accentyta.
Disabled states
Hero = opacity 25%, Solid = opacity 50%. Båda får cursor-not-allowed.
Komponenter
En moduli ÅRET är en kantad inställningsyta med tunna linjer mellan rader: vänster etikett (caps, mässing via .module-row-label), höger kontroll på en fast kolumn‑bredd. Använd ModuleStack, ModuleRow, ModuleInset för nästlad innehåll (underlinerad text, lista) och ModuleNumericStepper för stegaren.
Importer: @/components/module (undantag: interaktiva exemplar nedan hämtas från module-pattern-demo för att inte blanda use client och statisk dokumentation.)
Interaktiv lista (onboarding‑mönster)
I onboarding omges steg för flera hus och andelarsinställningar av samma byggstenar så yttre ram och delningar följer wireframes.
Komponenter
Tabell för hypoteser (smärta → lättnad → validering) och kort för värdeerbjudande/kund, med serif‑rubriker och caps‑meta.
| Pain | Relief | Ska valideras | |
|---|---|---|---|
| Beslutsparalys | → | Röstningsmodul | Hur ofta blockeras beslut? |
| Ekonomisk asymmetri | → | Gemensam kassa och spårning | Vem betalar vad i dag? |
| Ojämn insats | → | Att-göra-/arbetslogg | Syns obalansen eller ignoreras den? |
| Bokningskonflikter | → | Bokning med regler | Vilka veckor är "heta"? |
| Utträdesprocesser | → | Förköpsmall + värderingsformel | Har någon velat kliva av? Hur gick det? |
| Historia som försvinner | → | Krönika och tryck‑on‑demand‑bok | Finns behovet eller hittar jag på det? |
Produkter och tjänster
Kunders uppdrag