[Dwellis Design System]

The Living Pattern Library

Every color, type style, component, and motion pattern — documented and ready to use

Explore the System

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

View All Components

[Typography]

Type Scale & Hierarchy

Heading 1	Find Your Next Great Space	56px / 1.1 · w600
Heading 2	Discover Our Featured Properties	40px / 1.15 · w600
Heading 3	We're more than property managers	32px / 1.2 · w600
Heading 4	A sleek, top-tier template crafted	28px / 1.2 · w600
Heading 5	Maplewood Modern Apartment	20px / 1.3 · w600
Heading 6	Section Subheading	18px / 1.3 · w500
Bold L	Talk to an Agent Today	18px / 1.5 · w700
Bold M	Expert Management Services	16px / 1.5 · w700
Bold S	Starting Price Available	15.2px / 1.5 · w700
Regular L	Premium properties for rent or sale — managed with professionalism and care	18px / 1.5 · w400
Regular M	Managing a diverse portfolio of over 300 properties with care and expertise	16px / 1.5 · w400
Regular S	Key terms and tips to help renters understand and negotiate lease agreements confidently.	15.2px / 1.5 · w400
Badge / Mono	[Featured Properties]	14px / 1.4 · Geist Mono
Tiny	© Copyright 2025 Designs by Loonis, powered by Webflow	12.1px / 1.5 · w400

[Colors & Surfaces]

Palette, Backgrounds & Surfaces

Base Colors

White
#fdf6ee

Black
#000000

Accent
#3e2407

Accent Sec.
#f0e6dc

Neutral Scale

50 · #f7f0e8

100 · #f2e6d9

200 · #eddcca

300 · #e8d2bb

500 · #e2c8ab

700 · #d8b48d

900 · #cda06f

Surface Treatments

Page Background

var(--color-base--white) · Warm off-white body

Section Alt Background

var(--accent-secondary) · Alternating sections

Card / Component Surface

var(--color-neutral--50) · FAQ, metrics, type cards

Glass / Dark Overlay

backdrop-filter:blur(1.25rem) + rgba(255,255,255,.2)

Divider

.divider — 1px solid var(--color-neutral--300)

[UI Components]

Buttons, Inputs, Cards & More

Buttons — States

Primary

Secondary

Outline (light)

Small

Large

Icon

Footer / Form

Badges & Labels

Badge

[Featured Properties]

Date Badge

June 25, 2025

Label

Category

Label Active

Active

Blog Category

Trends

Form Inputs

Default

Footer Input + Button Combo

Property Card

Maplewood Modern Apartment

Seattle, WA

Starting Price

$1,850/mo

Type Card

Multi-Family

Find well-designed multi-family residences ideal for communities of all sizes

Student

Affordable, convenient housing tailored for student lifestyles near campuses

Metrics Card & Item

Managing a diverse portfolio of over 300 properties

300+

Properties Managed

Expert Management

From leasing to maintenance, we handle it all with precision and care

Blog Card

Trends

June 25, 2025

What to Look for in a Rental

Key terms and tips for renters.

FAQ Accordion

How does Dwellis help manage multiple properties?

Dwellis streamlines portfolio management by centralizing listings, tenant communications, and maintenance requests.

Can I customize listings for different property types?

Yes. Our template supports diverse property categories like multi-family, commercial, student housing, and more.

[Layout & Spacing]

Containers, Grids & Rhythm

Container Widths

container-default · 1428px

1428px

container-large · 896px

896px

container-medium · 654px

654px

container-small · 480px

480px

Spacing Scale (Spacers)

tiny · 0.25rem

xxsmall · 0.5rem

xsmall · 1rem

small · 1.5rem

medium · 2rem

large · 3rem

xlarge · 3.75rem

Border Radius Tokens

Default · 24px

Button · 12px

Small · 6px

Real Layout Patterns

Hero · home1_hero_grid · 3fr 1fr

Content Column

Agent CTA

Blog · blog_grid · 1fr 1fr 1fr

Card

Metrics · 4-col, span-2 cards + items

Metric Card

Item

[Motion & Interaction]

Hover, Transitions & Animation

Button Primary

Hover Me

opacity → .8 · all .2s

Button Secondary

Hover Me

opacity → .6 · all .2s

Outline → Fill

Hover Me

bg fills white, text goes dark · .2s

FAQ Pad Expand

Hover to see padding grow

padding-left/right grows · .2s

Nav Link Fade

Overview

opacity → .5 · all .2s

Footer Link Slide

Home V1

bg-position slides dot in · .2s

Entrance Animations (Webflow IX2)

Scroll-triggered fade-up on sections and grids

Elements use data-w-id to trigger: translate3d(0, 2rem, 0) → (0, 0, 0) + opacity 0 → 1, with transform-style: preserve-3d. Applied to .section_header, .blog_grid, .home1_hero_grid, .home1_type_grid, and other section containers.

[Icons]