What makes Realm's design language stand out?

Realm is the rare home-services landing that decided property/real-estate marketing should look like the inside of a beautifully bound architecture monograph. We catalogued it because most property tech defaults to one of two visual playbooks: corporate blue trust-signal or Zillow-style residential clip-art.

What fonts and palette does Realm use?

The type system is Inter, Roobert and Roboto. The palette sits on a light canvas around #0A0908, #1A322E, #EEF6F5 and #535252.

Can I transfer Realm's design language to my product?

The patterns transfer without cloning. Study deep forest green as brand-defining text colour — most property-tech reaches for Zillow blue or Redfin pink. The ai2 Design brief packages Realm's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

saas · productivity

Realm

A home-services platform in architectural editorial restraint — warm cream canvas, deep forest green #1a322e as the text signature, Inter body + Roobert display duet, GSAP motion, zero gradients.

www.withrealm.comAdded 2026-05-17

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy

FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Realm’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

Realm's design language is architectural editorial restraint. Warm cream canvas; deep forest green #1a322e text; Inter body + Roobert display duet; zero gradients (flat-as-confidence); GSAP motion choreography. Brand reads as an architectural quarterly that happens to ship home-services.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (warm cream + light surfaces dominant, #0a0908 nearly-black primary text warm-undertone, #1a322e deep forest green secondary text architectural, #eef6f5 green-tinted light surface, #535252 neutral dark grey, #ffffff secondary white surface, #f4f0ec cream secondary surface, #004132 deepest forest green for inversion zones), typography stack (Inter body 16-18px weight 400, Roobert display 14-24px weight 500), spacing scale 4/8/10/12/16/20/24/32, container ladder 560/820/1024/1312 (multiple nested editorial widths), custom breakpoints sm=640 md=768 lg=992 xl=1280 2xl=1440 (lg=992 + 2xl=1440 narrower than defaults), GSAP for motion choreography (no Framer Motion), zero gradients — clean flat surfaces. Treat #1a322e forest green as architectural text-colour signature. Apply the language, not the source brand's copy.

Layout: Editorial sidebar-and-body flow with multiple nested container widths.
Content width: Container ladder 560/820/1024/1312.
Framing: Architectural quarterly for home-services — Inter + Roobert + deep forest green.
Grid strength: Editorial grid — multiple widths handle sidebar-and-body magazine layouts.

Warm cream canvas; #0a0908 nearly-black primary text; #1a322e deep forest green secondary; zero chromatic gradients.

Mode strategyLight-first canvas with deep green inversion zones.

#0a0908 primary ink text warm-undertone
#1a322e deep forest green secondary text
#eef6f5 green-tinted light surface
#535252 neutral dark grey
#ffffff secondary surface
#f4f0ec cream secondary surface
#004132 deepest forest green inversion

Gradients (paste-ready)

0 catalogued — flat editorial surfaces, no chromatic depth

Inter body 16-18px weight 400
Roobert display 14-24px weight 500
Letter-spacing 0 standard
Line-height 1.5-1.6 body, 1.05-1.1 display

4px base, scale 4/8/10/12/16/20/24/32
Section vertical rhythm 96-160px
Card padding 24-32px

Surface styleFlat architectural plates. No drop shadows; depth via colour tone.

0 drop shadow on all surfaces
1px hairline border for editorial frames
Tone-based depth (#f4f0ec cream < white < #eef6f5 green-tint)

Techniques

Architectural plate

bg #ffffff or #f4f0ec cream, 8-12px radius, padding 24-32px.

Forest green inversion

bg #1a322e or #004132 deep green, white text, used for hero anchor.

Radii4 / 8 / 12 / 16Icon treatmentStroke 1.5px monoline.Icon setsCustom set

Buttons 8-12px radius
Cards 12-16px radius

Primary CTA
background
#1a322e
textColor
#ffffff
fontFamily
Roobert, sans-serif
fontWeight
500
fontSize
16px
padding
12px 24px
borderRadius
10px
shadow
none
hover
background shifts to #004132
Tailwind
```
inline-flex items-center gap-2 rounded-[10px] bg-[#1a322e] px-6 py-3 text-base font-medium text-white transition-colors hover:bg-[#004132]
```
Architectural plate
background
#ffffff
borderRadius
12px
padding
28px
textColor
#0a0908
Tailwind
```
rounded-xl bg-white p-7 text-[#0a0908]
```
Display headline (Roobert)
fontFamily
Roobert, sans-serif
fontSize
clamp(32px, 5vw, 56px)
fontWeight
500
letterSpacing
-0.01em
lineHeight
1.05
color
#0a0908
Tailwind
```
font-sans text-4xl font-medium leading-tight tracking-tight text-[#0a0908] md:text-5xl lg:text-6xl
```
Body text (Inter)
fontFamily
Inter, sans-serif
fontSize
16px
fontWeight
400
lineHeight
1.6
color
#0a0908
Tailwind
```
font-sans text-base leading-relaxed text-[#0a0908]
```

LevelmoderateDurations300ms / 600ms / 900ms

Easings

cubic-bezier(0.22, 1, 0.36, 1)cubic-bezier(0.16, 1, 0.3, 1)

HoverCTA bg shift forest-green deepens, Subtle scale on illustration spots

Scroll patterns

GSAP scroll-triggered section reveals
Parallax on hero imagery

Motion is architectural pacing — deliberate, considered
GSAP for choreography, no Framer Motion
Respect prefers-reduced-motion

Hover shifts colour, never position
Focus rings: 2px forest green ring with 2px offset
Active state 95% opacity

Approachmobile-first

Custom: sm=640 md=768 lg=992 xl=1280 2xl=1440 (narrower 2xl).

<768: 16px gutters, single column 560px reading rail
768-992: 720-820px content
≥992: full ladder 820/1024/1312

Nearly-black #0a0908 on white passes AAA
Forest green #1a322e on white passes AAA
Focus visible always
GSAP respects prefers-reduced-motion

Next.js (assumed)Inter webfontRoobert webfontGSAP for choreography

Typography + forest green + flat surfaces = identity. Photography (architectural) for illustration.

Inter preloaded
Roobert weight 500 preloaded for display
GSAP scroll-trigger registered, debounced

Use #1a322e deep forest green as text-colour signature
Pair Inter body with Roobert display
Keep surfaces flat — no gradient decoration
Use GSAP for premium motion choreography

Don't substitute system fonts for Inter or Roobert
Don't add chromatic gradient surfaces
Don't paint backgrounds in forest green — it's text colour
Don't add atmospheric depth via colour shift

Light-first canvas with forest green inversion zones
Type stack: Inter + Roobert
Zero gradient surfaces

Background dominant: white/cream
Font-family grep: Inter + Roobert present
Forest green #1a322e used as text/inversion colour
Container ladder: 560/820/1024/1312 preserved
Motion library: GSAP not Framer Motion

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 10 nodes across 7 levels, shallow to deep by color.

body1
- div2
  - div1
    - div1
      - divbanner1
        div1
        Navnavigation
  - Main2
    - Section (×7)
    - Footer

Accessibility

32 combinations - 24 pass AA - 22 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

fg: #0A0908
bg: #FFFFFF
APCA Lc: +106
Use: foreground on background

fg: #FFFFFF
bg: #0A0908
APCA Lc: -108
Use: background on foreground

fg: #0A0908
bg: #EEF6F5
APCA Lc: +99
Use: foreground on background

fg: #EEF6F5
bg: #0A0908
APCA Lc: -101
Use: background on foreground

fg: #0A0908
bg: #F4F0EC
APCA Lc: +97
Use: foreground on background

fg: #F4F0EC
bg: #0A0908
APCA Lc: -98
Use: background on foreground

fg: #1A322E
bg: #FFFFFF
APCA Lc: +100
Use: foreground on background

fg: #FFFFFF
bg: #1A322E
APCA Lc: -103
Use: background on foreground

fg: #1A322E
bg: #EEF6F5
APCA Lc: +94
Use: foreground on background

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images

Lazy loaded

Format mix

avif31 · 39%
svg28 · 35%
png19 · 24%
jpg1 · 1%
webp1 · 1%

Hero image

https://cdn.prod.website-files.com/67dc5e3767277eaa0559d172/69e79b7b625fc48484668072_Realm_logo_white.svg

Format: SVG
Dimensions: 13x18
Loading: lazy
srcset: no

Industry: saas
Industry: productivity
Theme: Light
Added: 2026-05-17

FAQ

Questions people ask about Realm

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Realm

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Image strategy

Hero image

Questions people ask about Realm

Realm

Editorial disclaimer

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Contrast matrix

Image strategy

Hero image

Questions people ask about Realm

01What makes Realm's design language stand out?

02What fonts and palette does Realm use?

03Can I transfer Realm's design language to my product?

Side-by-side reads sharing this design signal.

More in this design language