'/%3E%3C/svg%3E)
Exempelrubrik A
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Midcent design system
The canonical reference for new implementations and for AI agents creating content.
Single source of truth: src/styles/tokens.css (tokens) + src/styles/index.css
(components). Toggle OS dark mode to see the theme flip. This page is noindex, nofollow.
Logo
/logo-white.svg — on dark 
/logo-black.svg — on light Wordmark SVG (300×80 viewBox), sized by CSS height + width:auto
(header 36px, footer 30px). Use white on dark chrome (header/footer), black on
light. Always served locally from public/ — never hot-link from WordPress.
Typography
Display — Roboto Condensed (var(--display), weights 400–700):
all headlines, kickers, tags, nav, buttons. Body — Open Sans (var(--body),
300–400): paragraphs, excerpts. Self-hosted woff2, font-display: swap.
Midcent Hero
--text-4xl Midcent Band title
--text-3xl Midcent Feature title
--text-2xl Midcent Front feature
--text-xl Midcent Card title
--text-lg Midcent Article body
--text-md Midcent Body
--text-base Midcent Small
--text-sm Midcent Label / kicker
--text-xs Body copy in Open Sans — this is how article and excerpt prose reads. Keep line-height ~1.6–1.75 for body.
Semantic colours
Components use these; the dark theme remaps them. Never hardcode hex — reference a token.
--color-bgPage background --color-surfaceCard / panel --color-surface-2Raised / hover --color-textPrimary text --color-text-mutedMuted text --color-accentAccent (links, rules) --color-borderHairline --band-bgDark band bg --band-textDark band text --goldNewsletter gold Brand — category colours
Per-category label colour (front-page tiles / kickers). Data-driven in lib/frontpage.ts.
#3A7355Ekonomi#B14A43Hälsa#345F88Teknik#B0712FFritid#65507FSamhälle#9C4A38Mat & Dryck#327A70Resa#99406AUnderhållningBrand — streaming service colours
Operator badge colours (streaming feed). In lib/categories.ts.
#E50914Netflix#6A0DADHBO Max#1B4FBBDisney+#1A6DB5Amazon Prime#000000Apple TV+#C1143CViaplay#B22222SkyShowtimeSpacing
--space-2--space-4--space-6--space-8--space-12--space-16--space-18Radii & elevation
--radius-sm--radius-md--radius-lg--shadow-sm--shadow-md--shadow-lgImagery
Card/feature images are 3:2; small cards/rails 16:9; hero is full-bleed
(clamp(360px,50vw,680px)). Use the white-caption treatment for lead/feature
headlines (translucent panel straddling the image bottom, var(--color-overlay)). Tag chips
overlay the top-left of card images. Always set a meaningful alt.
Components
ArticleCard — feature (white-caption)
ArticleCard — card
Exempelrubrik B
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
#tag chip Accent link →
Band header (avatar + title + tags + “Se alla”)
Bandrubrik
Se allaLayouts — hub bands
Hubs rotate through these for rhythm: feature-list → triptych → list-feature → rail.
Each band = a subtopic (top tag). Pick by content shape (see usage notes below).
feature-list (1 feature + compact list)
Exempelrubrik 1
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 1
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 2
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 3
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 4
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
list-feature (mirror)
Exempelrubrik 1
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 2
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 3
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 4
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 2
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
triptych (3 cards + index list)
Exempelrubrik 3
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 4
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 5
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
- Exempelrubrik 6 i index-listan
- Exempelrubrik 7 i index-listan
- Exempelrubrik 8 i index-listan
- Exempelrubrik 9 i index-listan
rail (feature + 2 cards + “Mer i ämnet”)
Exempelrubrik 10
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 11
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Exempelrubrik 12
Kort ingress som visar hur brödtexten ser ut i kortet — en eller två meningar.
Layouts — front page
Lead tiles (image + colour label + headline) + brand manifest
Ekonomi Exempel på en ledande rubrik 1
Hälsa Exempel på en ledande rubrik 2
Teknik Exempel på en ledande rubrik 3
Ett män-X media
Midcent — för dig som vuxit upp
Brand manifest card (always-dark band).
Spread (feature + editorial rail)
“Senaste nytt” grid (category kicker + title)
Ekonomi
Exempelrubrik 1 i flödet
Hälsa
Exempelrubrik 2 i flödet
Teknik
Exempelrubrik 3 i flödet
Fritid
Exempelrubrik 4 i flödet
Usage notes (for implementations & AI agents)
- Pick a band layout by content: feature-list / list-feature = one strong story + 4 supporting; triptych = 3 equal stories + a titles index; rail = a feature + 2 cards + a “most read” sidebar. Hubs auto-rotate them for rhythm.
- White-caption is the signature treatment — reserve it for lead/feature headlines, not every card.
- Dark bands (
--band-bg/--band-text) for newsletter, cross-promo and blockquotes — they stay dark in both themes. - Subtopics = tags. Bands are built from the top tags in a category (
class_list), so tag content consistently. - Images: 3:2 for cards/features, set a real
alt, let the responsivesrcsetdo the sizing. - Never hardcode colours, radii or shadows — use the tokens above so light/dark and future rebrands stay coherent.
- Headlines in
--display(Roboto Condensed), body in Open Sans. Don't introduce new fonts.