Foundation

Designsystemets atomära lager — typografi, färger, fonts, spacing, elevations, charts. Alla patterns lever på cdn.futur.se/design-system/foundation/ och följer samma struktur: design.md, pattern.html, pattern.css, index.html.

format_size

Typography scale

42 utility-klasser i sex grupper: display, headline, title, body, label, code. Fluid scaling mellan mobil och desktop.

arrow_forward Öppna text_fields

Fonts

Global font-loading. Tre familjer: Gilroy (4 vikter), Inter (3 vikter), Roboto Mono (2 vikter). Importeras en gång på sida-nivå.

arrow_forward Öppna palette

Colors

Brand primitives + theme tokens. Key-färger, accent, neutral, signal, tonal, gradients, opacity. Theme-växling via toggle.

arrow_forward Öppna show_chart

Chart colors

10 färger för data-visualisering. Mappar till befintliga primitives. Index 1–4 flippar mellan light och dark theme för bättre kontrast.

arrow_forward Öppna layers

Elevations

Box-shadow och surface-depth i två lager. Layer 1 är råa shadow-stacks. Layer 2 är semantiska tokens som växlar light/dark.

arrow_forward Öppna straighten

Spacing

16 spacing-primitives från 0 till 240 px. Plus semantiska gap-aliases och focus-outline-tokens. Theme-oberoende.

arrow_forward Öppna rounded_corner

Shapes

Border-radius-skala. Sju primitives från sharp corners till pill. Plus semantiska aliases för buttons och contextual menus.

arrow_forward Öppna grid_on

Grid

12-kolumns layout-system med fluid sidmarginaler och gutters. Mobile-first med fyra breakpoints. Resize fönstret för att se kolumner skala live.

arrow_forward Öppna emoji_symbols

Icons

235 ikoner kuraterade i Figma — 228 Material Symbols + 7 Futur custom (24/48). Plus separat flaggpaket (250 st, 20×15) för fond-/landsinformation.

arrow_forward Öppna workspace_premium

Logos

Futurs varumärkes-assets — full logotyp, symbol, app-ikon, favicons. SVG och PNG. Fade och tagline-lockup pending från Figma.

arrow_forward Öppna aspect_ratio

Image formats

Fyra bildformat — portrait (3:4), landscape (4:3), square (1:1), 16:9. Reusable placeholder-SVG:er. 20 px border-radius via --shp-lg för icke-utfallande bilder.

arrow_forward Öppna water_drop

Color marks

Tre abstrakta former (Peak, Flow, Drift) som förstärker varumärket. JPG, transparent PNG, animerad web-stack (video + noise overlay) och pre-croppade 16:9-bakgrunder.

arrow_forward Öppna