Juli Living Showcase

Colour tokens

Primitive OKLCH scales. Mode-agnostic — they do not change between light and dark themes (ADR 0003). Semantic mappings live in semantic.css.

teal

  1. 50 oklch(0.99 0.01 195) #f5fefe rgb(245, 254, 254)
  2. 100 oklch(0.97 0.05 195) #cfffff rgb(207, 255, 255)
  3. 200 oklch(0.96 0.08 195) #b1ffff rgb(177, 255, 255)
  4. 300 oklch(0.93 0.13 195) #68ffff rgb(104, 255, 255)
  5. 400 oklch(0.85 0.19 195) #00f2f4 rgb(0, 242, 244)
  6. 500 oklch(0.68 0.15 195) #00b3b5 rgb(0, 179, 181)
  7. 600 oklch(0.55 0.13 195) #008889 rgb(0, 136, 137)
  8. 700 oklch(0.38 0.09 195) #005051 rgb(0, 80, 81)
  9. 800 oklch(0.27 0.06 195) #002f2f rgb(0, 47, 47)
  10. 900 oklch(0.18 0.04 195) #001717 rgb(0, 23, 23)
  11. 950 oklch(0.11 0.02 195) #000606 rgb(0, 6, 6)

green

  1. 50 oklch(0.99 0.01 146) #f8fef8 rgb(248, 254, 248)
  2. 100 oklch(0.97 0.05 146) #e1ffe1 rgb(225, 255, 225)
  3. 200 oklch(0.96 0.08 146) #d0ffd2 rgb(208, 255, 210)
  4. 300 oklch(0.93 0.13 146) #aeffb3 rgb(174, 255, 179)
  5. 400 oklch(0.86 0.19 146) #72f181 rgb(114, 241, 129)
  6. 500 oklch(0.68 0.15 146) #51b05c rgb(81, 176, 92)
  7. 600 oklch(0.56 0.13 146) #388842 rgb(56, 136, 66)
  8. 700 oklch(0.38 0.09 146) #1c4f23 rgb(28, 79, 35)
  9. 800 oklch(0.28 0.06 146) #123116 rgb(18, 49, 22)
  10. 900 oklch(0.19 0.04 146) #071808 rgb(7, 24, 8)
  11. 950 oklch(0.11 0.02 146) #020602 rgb(2, 6, 2)

yellow

  1. 50 oklch(0.99 0.01 105) #fdfcf5 rgb(253, 252, 245)
  2. 100 oklch(0.98 0.05 105) #fdfbd4 rgb(253, 251, 212)
  3. 200 oklch(0.96 0.08 105) #f9f6b7 rgb(249, 246, 183)
  4. 300 oklch(0.94 0.13 105) #f8f085 rgb(248, 240, 133)
  5. 400 oklch(0.87 0.19 105) #e8d900 rgb(232, 217, 0)
  6. 500 oklch(0.7 0.15 105) #ada200 rgb(173, 162, 0)
  7. 600 oklch(0.57 0.13 105) #837a00 rgb(131, 122, 0)
  8. 700 oklch(0.39 0.09 105) #4d4700 rgb(77, 71, 0)
  9. 800 oklch(0.28 0.06 105) #2d2a00 rgb(45, 42, 0)
  10. 900 oklch(0.19 0.04 105) #171500 rgb(23, 21, 0)
  11. 950 oklch(0.11 0.02 105) #050500 rgb(5, 5, 0)

neutral

  1. 50 oklch(0.99 0.005 90) #fdfcf8 rgb(253, 252, 248)
  2. 100 oklch(0.97 0.008 90) #f7f5ef rgb(247, 245, 239)
  3. 200 oklch(0.95 0.01 90) #f1eee7 rgb(241, 238, 231)
  4. 300 oklch(0.9 0.012 90) #e1ded5 rgb(225, 222, 213)
  5. 400 oklch(0.8 0.014 90) #c1bdb4 rgb(193, 189, 180)
  6. 500 oklch(0.65 0.012 90) #928f87 rgb(146, 143, 135)
  7. 600 oklch(0.5 0.01 90) #65635d rgb(101, 99, 93)
  8. 700 oklch(0.38 0.008 90) #44423e rgb(68, 66, 62)
  9. 800 oklch(0.28 0.006 90) #2a2926 rgb(42, 41, 38)
  10. 900 oklch(0.1913 0 0) #141414 rgb(20, 20, 20)
  11. 950 oklch(0.1 0 90) #030303 rgb(3, 3, 3)

Semantic tokens

Role-named mappings to primitives. The resolved value below each swatch updates live when you toggle the theme — that is the light/dark behaviour these tokens encode.

  1. --surface-default … … light var(--c-juli-yellow-50) dark var(--c-juli-teal-950)
  2. --surface-elevated … … light var(--c-white) dark var(--c-juli-teal-900)
  3. --text-default … … light var(--c-juli-teal-800) dark var(--c-juli-yellow-50)
  4. --text-strong … … light var(--c-juli-teal-700) dark var(--c-juli-yellow-100)
  5. --text-muted … … light var(--c-juli-green-600) dark var(--c-juli-yellow-400)
  6. --border-subtle … … light var(--c-juli-neutral-200) dark var(--c-juli-neutral-800)
  7. --focus-ring … … light var(--c-juli-teal-700) dark var(--c-juli-green-300)
  8. --surface-action … … light var(--c-juli-green-400) dark var(--c-juli-green-500)
  9. --text-on-action … … light var(--c-juli-teal-800) dark var(--c-juli-neutral-950)
  10. --status-available-surface … … light var(--c-juli-green-200) dark var(--c-juli-green-900)
  11. --status-available-text … … light var(--c-juli-green-900) dark var(--c-juli-green-300)
  12. --status-reserved-surface … … light var(--c-juli-teal-200) dark var(--c-juli-teal-800)
  13. --status-reserved-text … … light var(--c-juli-teal-900) dark var(--c-juli-teal-200)
  14. --status-coming-soon-surface … … light var(--c-juli-teal-100) dark var(--c-juli-teal-700)
  15. --status-coming-soon-text … … light var(--c-juli-teal-700) dark var(--c-juli-teal-100)
  16. --status-let-surface … … light var(--c-juli-neutral-200) dark var(--c-juli-neutral-800)
  17. --status-let-text … … light var(--c-juli-neutral-700) dark var(--c-juli-neutral-300)
  18. --flag-new-surface … … light var(--c-juli-yellow-400) dark var(--c-juli-yellow-400)
  19. --flag-new-text … … light var(--c-juli-neutral-950) dark var(--c-juli-neutral-950)
  20. --status-pill-border … … light transparent dark var(--c-juli-teal-700)

Type scale

Fluid type steps from Utopia. Each clamp() interpolates between a 320 px and 1440 px viewport. Sample text is rendered at the live value of each step.

  1. --step--2 The quick brown fox jumps over the lazy dog clamp(0.6944rem, 0.6919rem + 0.0129vw, 0.7035rem)
  2. --step--1 The quick brown fox jumps over the lazy dog clamp(0.8333rem, 0.8035rem + 0.1491vw, 0.9377rem)
  3. --step-0 The quick brown fox jumps over the lazy dog clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem)
  4. --step-1 The quick brown fox jumps over the lazy dog clamp(1.2rem, 1.0668rem + 0.6661vw, 1.6663rem)
  5. --step-2 The quick brown fox jumps over the lazy dog clamp(1.44rem, 1.2168rem + 1.1159vw, 2.2211rem)
  6. --step-3 The quick brown fox jumps over the lazy dog clamp(1.728rem, 1.3758rem + 1.7611vw, 2.9607rem)
  7. --step-4 The quick brown fox jumps over the lazy dog clamp(2.0736rem, 1.5384rem + 2.6758vw, 3.9467rem)
  8. --step-5 The quick brown fox jumps over the lazy dog clamp(2.4883rem, 1.6962rem + 3.9608vw, 5.2609rem)

Spacing scale

Fluid spacing steps from Utopia. Each bar's width is the live value of its token. Pairs (e.g. --space-s-m) interpolate between two base steps over the viewport range.

Base scale

  1. --space-3xs clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem)
  2. --space-2xs clamp(0.5rem, 0.4643rem + 0.1786vw, 0.625rem)
  3. --space-xs clamp(0.75rem, 0.6964rem + 0.2679vw, 0.9375rem)
  4. --space-s clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem)
  5. --space-m clamp(1.5rem, 1.3929rem + 0.5357vw, 1.875rem)
  6. --space-l clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem)
  7. --space-xl clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem)
  8. --space-2xl clamp(4rem, 3.7143rem + 1.4286vw, 5rem)
  9. --space-3xl clamp(6rem, 5.5714rem + 2.1429vw, 7.5rem)

Pairs

  1. --space-3xs-2xs clamp(0.25rem, 0.1429rem + 0.5357vw, 0.625rem)
  2. --space-2xs-xs clamp(0.5rem, 0.375rem + 0.625vw, 0.9375rem)
  3. --space-xs-s clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem)
  4. --space-s-m clamp(1rem, 0.75rem + 1.25vw, 1.875rem)
  5. --space-s-l clamp(1rem, 0.5714rem + 2.1429vw, 2.5rem)
  6. --space-m-l clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem)
  7. --space-l-xl clamp(2rem, 1.5rem + 2.5vw, 3.75rem)
  8. --space-xl-2xl clamp(3rem, 2.4286rem + 2.8571vw, 5rem)
  9. --space-2xl-3xl clamp(4rem, 3rem + 5vw, 7.5rem)

Radii

Corner-radius primitives. Mode-agnostic. --radius-pill is an arbitrarily large value that fully rounds any box into a pill or circle. Each demo box has the token applied as its border-radius.

  1. --radius-s 0.5rem
  2. --radius-m 1rem
  3. --radius-pill 624.9375rem

Section tones

data-tone contexts (ADR 0013) remap the semantic surface/text/border tokens for their subtree, so any component inside adapts. dark and light hold their tone in both site modes (shifting shade per mode); inverse is the page's opposite tone; accent is the gentle same-tone raise. Toggle the theme to watch each shade shift.

data-tone="accent"

Heading, body copy and a link all read from the remapped tokens.

data-tone="inverse"

Heading, body copy and a link all read from the remapped tokens.

data-tone="light"

Heading, body copy and a link all read from the remapped tokens.

data-tone="dark"

Heading, body copy and a link all read from the remapped tokens.

An inline text link. Carries its own styling (underlined, --text-default, hover to --text-strong) so it settles link appearance for the blocks that use it without touching the global <a> defaults (ADR 0011).

Read our tenancy terms before you apply.

Button

The action / CTA affordance. Polymorphic: with href it is an <a> (a CTA that navigates), otherwise a <button> (a real action) — same look, picked by intent. primary fills with --surface-action; secondary is an outline that reads --text-default, so it adapts inside tone contexts. A link-styled affordance stays the Link primitive's job (no third variant). Toggle the theme to check both.

Hae asuntoa Lue lisää

Listing card

A Listing rendered as a card, in the brand layout (ADR 0014): a mint garden-tone header band (name + address) on top, then the photo, then the body — price, an inline status line with a colour-coded dot (one per Availability state, ADR 0010), and the specs. Presentational: all strings are pre-localized by the caller. Toggle the theme to check contrast in both modes.

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

The same cards inside a data-tone="dark" band. The card reads only semantic tokens, so it adapts to the tone (ADR 0013) — the header band, status dot and text all stay legible. Toggle the theme to confirm both directions.

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

The Property kind (kind="property"): a development/building shown with general info — area + rooms ranges and a read-more cue, no single price, type, deposit, or availability status (CONTEXT.md). Same component, varies by kind.

A full-bleed band: prose + CTA on the left, an Embla-powered row of listing cards that bleeds off the right edge (ADR 0011). Tone-agnostic — drop it in a data-tone section and it adapts, pills included (ADR 0013). Drag or scroll; tab into a card and it scrolls into view (ADR 0007). Shown here in a dark band; the progress bar stands in for a scrollbar.

Andra bostadssökande tittade också på dessa

I samma område hittar du även andra intressanta hyresbostäder.

Se lediga bostäder

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

Listings grid

A responsive grid of listing cards whose bands line up across the row via subgrid (ADR 0015): header bands share a height so the photos start on a common line, and footers share a baseline — no clamped line counts or measured heights. Note the varied address and description lengths; the cards still align. A real list (ul/li), one tab stop per card. This is the static "browse all" surface; the carousel above shares the same band alignment (its track is a horizontal grid).

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

  • Midgårdsvej 3, 2., 19 5200 Odense V

    8.400 kr/md. Lejlighed
    New Available

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m² 2 rooms
    2 months dep.

  • Kløvervej 12 8000 Aarhus C

    11.200 kr/md. Rækkehus
    Reserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m² 3 rooms
    3 months dep.

  • Strandgade 7, 1. 5000 Odense C

    6.950 kr/md. Lejlighed
    New Coming soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m² 1 room
    1 month dep.

  • Bredgade 44, 3. 5200 Odense V

    9.500 kr/md. Lejlighed
    Let

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m² 2 rooms
    2 months dep.

Hero

The page-leading block in the Juli brand layout (ADR 0014): a soft mint garden-tone panel — headline, a handwritten accent line, a lede and the green primary CTA — beside a contained feature photo. Editor-friendly: the photo is a plain contained block, so any image crops cleanly and the panel (not the photo) carries text contrast. Presentational — strings are pre-localized.

Koti joka antaa vapauden

syödä pizzaa aamiaiseksi

Juli tekee vuokra-asumisesta helpompaa ja laadukkaampaa kuin koskaan.

Vuokraa suoraan verkosta

Feature grid

A row of Feature items. Two-up by default; the odd trailing item spans the full row and flips to media-beside-text — count-driven CSS, not a per-item prop (ADR 0011). This sample has three items, so both layouts show. Resize narrow to see it collapse to a single column.

  • Helppo vuokraus tyytyväisyystakuulla

    Teemme asumisen helpoksi alusta alkaen. Koko vuokrausprosessimme hoituu nopeasti verkossa – tyytyväisyystakuulla.

    Lue lisää

  • Ympäristöystävällisyyden edelläkävijä

    Kaikkea toimintaamme ohjaa hiilineutraalius sekä rakentamis- että asumisvaiheessa.

    Lue lisää

  • Me olemme Juli Living

    Me Juli Livingillä haluamme tarjota sinulle erityisen laadukkaan kodin ja mukavan arjen. Olemme skandinaavinen brändi ja toimineet Suomessa vuodesta 2020 alkaen.

    Lue lisää

Header

Site chrome: brand wordmark + primary nav. Sub-menus use the W3C APG disclosure pattern (a <button aria-expanded> toggling a sibling list) — keyboard-operable, Escape-to-close, axe-clean (ADR 0006/0007). Open a sub-menu, then press Escape or click outside. Resize below 48rem to collapse the nav behind the menu toggle.

Site chrome: multi-column link grid + a utility row with copyright, the EAA-mandated Accessibility Statement link (ADR 0007), and the theme switcher. Each column is a <nav> landmark named by its heading. Presentational — strings are pre-localized by the caller.

Primitives

  • Button
  • Container
  • Feature
  • FeatureGrid
  • Footer
  • Header
  • Heading
  • Hero
  • Image
  • Link
  • ListingCard
  • ListingDetail
  • ListingsCarousel
  • ListingsGrid
  • Logo
  • SkipLink
  • Text