Showcase
Every ready-to-use token layer and component in the Juli Living design system, rendered. 43 entries. Each one shows the real component — not a picture of it — so it can be tabbed through, resized, re-toned and switched between light and dark. This is the review surface: the running output is the fidelity (CONTEXT.md).
Foundations
- ColourThe OKLCH primitive scales, mode-agnostic.
- Semantic tokensRole-named mappings that carry the light/dark behaviour.
- Type scaleFluid Utopia steps, rendered at their live values.
- Spacing scaleFluid Utopia spacing, base steps and interpolation pairs.
- RadiiThe three corner-radius primitives.
- MotionThe duration and easing primitives, running.
- Section tonesThe five data-tone contexts and what they remap.
Primitives
- ContainerThe measure, the gutter, and the thing a well hangs into.
- Headingh1…h6 by level, sized by the base layer.
- TextA run of body copy, as p, span or small.
- ImageA responsive img that fills the box it is given.
- LinkThe inline text link.
- LogoThe wordmark, inheriting whatever colour surrounds it.
- ButtonThe action and CTA affordance, polymorphic by intent.
- Skip linkOff-screen, in the tab order, first on the page.
Blocks
- Listing cardA Listing as a card, varying by kind.
- Listings gridThe browse-all grid, with subgrid band alignment.
- Listings carouselA full-bleed band of cards that bleeds off the edge.
- Properties browserThe filtered development grid, region and type.
- Units tableA development's available homes, filterable.
- GalleryThe detail-page photo ribbon, strip, panel and lightbox.
- OverviewHow an entity page opens: the stage, with identity panelled in.
- FactsTerm and value groups, totals included, arithmetic excluded.
- AmenitiesWhat is included, grouped and iconed.
- NeighbourhoodThe area: a lede, the nearby list and the commute map.
- Same buildingA home's vacant siblings — the PIM hierarchy, visible.
- Available unitsThe units table with the heading it needed.
- ProseFree copy, alone or beside a checked list.
- FeaturesA heading over a feature grid.
- ShowcasesThe editorial run of full-width showcase beats.
- ClosingThe garden-tone panel that closes an entity page.
- Back linkPage chrome: one step back to the index.
- Media carouselThe Showcase item's media: one image or many.
- Showcase itemThe one shared editorial item: media plus text.
- Feature gridThe row that hosts Showcase items, two-up or spanning.
- HeroThe page lead: garden panel beside a contained photo.
- Process stepsAn ordered how-it-works, as a vertical timeline.
- Resident storiesThe meet-our-residents grid of card-as-link stories.
- Upcoming homesLarge editorial teasers for developments not yet rentable.
- FAQA native details/summary accordion, no JavaScript.
- Commute explorerHow far is this home from your life — map and route.