Realm · Full Page
Realm
Home-services platform'ın architectural editorial restraint'i — warm cream canvas, deep forest green #1a322e text-signature, Inter body + Roobert display duet, GSAP motion, zero gradients.
Editorial disclaimer
Editorial noteThis 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.
Curator verdict
Why we catalogued it?
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. Realm picked a third path — deep forest green #1a322e text on warm cream, Inter for body and Roobert for display, and a near-zero accent palette that lets the typography carry the entire brand. The result reads as a brand that trusts its architectural sensibility to do the marketing. If you are shipping a service that touches people's homes (where trust is the entire product), this is the lodestar.
Design decisions observed
- Deep forest green #1a322e (~278 surface refs) as secondary text colour — architectural, considered, not corporate.
- Nearly-black #0a0908 (~962 surface refs) as primary text — warm-undertone ink that reads as printed rather than digital.
- Cream secondary surface #f4f0ec + green-tinted #eef6f5 — warm muted palette signalling indoor materiality.
- Inter (body 16-18px) + Roobert (display 14-24px, weight 500) — grotesque+display duet, Roobert reserved for display moments.
- GSAP motion (no Framer Motion) — premium animation choreography signal.
- Container ladder 560/820/1024/1312 — multiple nested editorial widths for sidebar-and-body layouts.
- Custom breakpoint 2xl=1440 (Tailwind default 1536) — Realm optimises for slightly narrower 2xl displays.
- 0 catalogued gradients — clean flat editorial surfaces, no atmospheric chromatic depth.
What to study
- Deep forest green as brand-defining text colour — most property-tech reaches for Zillow blue or Redfin pink. Realm's #1a322e signals architectural considered-ness.
- Inter + Roobert duet — grotesque body + display-grade Roobert creates editorial tension most property marketing never attempts.
- Zero gradients — Realm refuses atmospheric chromatic decoration. Every surface is flat, deliberate, considered. Steal the discipline of flat-as-confidence.
What to avoid
- Don't lift Roobert without licensing — Display Roobert is paid font, the brand cohesion depends on owning it.
- Don't substitute Inter for Roobert in display moments — the tension between body grotesque and display grotesque is the editorial signature.
- Don't add chromatic gradient surfaces — Realm's flat-as-confidence breaks the moment a gradient appears.
Taste notes
The page feels like reading a beautifully art-directed architectural quarterly that happens to ship home-services — every paragraph at 16px Inter, every Roobert display moment carrying architectural weight, every cream-and-forest-green colour pairing signalling indoor materiality rather than tech-stack chrome. Realm understood that home-services is a category where trust is the entire product, and trust comes from typographic discipline + chromatic restraint. The deep green is the secret: it's the colour of considered design schools, not property-tech UI kits.
Lineage & references
- Direct heir to the architectural-publication aesthetic — Realm's page reads like Cabin or Wallpaper magazine's website.
- Standing shoulder-to-shoulder with the modern home-services peer cohort (Mercury Black for property, Door Dash for services) — but Realm's editorial restraint sets it apart.
- Part of the Roobert typographic wave (parts of Linear's earlier identity, premium dev-tool brands) — applied to property/services marketing.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
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.
Overview
- 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.
Color philosophy
Warm cream canvas; #0a0908 nearly-black primary text; #1a322e deep forest green secondary; zero chromatic gradients.
- #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
Typography rules
- 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
Spacing rules
- 4px base, scale 4/8/10/12/16/20/24/32
- Section vertical rhythm 96-160px
- Card padding 24-32px
Design tokens
Palette, type, and space — all agent-readable.
7 colors · hex / rgb / hsl / oklch
- foregroundcolor-scheme-6--background70%
- HEX
#0A0908 - RGB
rgb(10, 9, 8) - HSL
hsl(30, 11%, 4%) - OKLCH
oklch(14.06% 0.0030 69.39)
- HEX
- foregroundcolor-scheme-2--text-tertiary20%
- HEX
#1A322E - RGB
rgb(26, 50, 46) - HSL
hsl(170, 32%, 15%) - OKLCH
oklch(29.60% 0.0311 182.28)
- HEX
- backgroundcolor-scheme-5--accent5%
- HEX
#EEF6F5 - RGB
rgb(238, 246, 245) - HSL
hsl(173, 31%, 95%) - OKLCH
oklch(96.69% 0.0086 188.11)
- HEX
- foreground_primitives---colors--neutral-dark2%
- HEX
#535252 - RGB
rgb(83, 82, 82) - HSL
hsl(0, 1%, 32%) - OKLCH
oklch(43.95% 0.0013 17.21)
- HEX
- background_primitives---opacity--white-502%
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%) - OKLCH
oklch(100.00% 0.0000 89.76)
- HEX
- background_primitives---colors--rodeo-dust-lighter0%
- HEX
#F4F0EC - RGB
rgb(244, 240, 236) - HSL
hsl(30, 27%, 94%) - OKLCH
oklch(95.71% 0.0069 67.74)
- HEX
- accent0%
- HEX
#004132 - RGB
rgb(0, 65, 50) - HSL
hsl(166, 100%, 13%) - OKLCH
oklch(33.41% 0.0653 171.24)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 10 nodes captured; depth capped at 6 for readability.
- body
- └─ div
- ├─ div
- │ └─ div
- │ └─ divbanner
- │ └─ div
- │ └─ Navnavigation
- └─ Main
- ├─ Section (×7)
- └─ Footer
Accessibility
WCAG contrast matrix.
32 combinations · 24 pass AA · 22 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #0A0908 | #FFFFFF | 19.90 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #0A0908 | 19.90 | AAA | AAA | -108 | background on foreground |
Aa | #0A0908 | #EEF6F5 | 18.13 | AAA | AAA | +99 | foreground on background |
Aa | #EEF6F5 | #0A0908 | 18.13 | AAA | AAA | -101 | background on foreground |
Aa | #0A0908 | #F4F0EC | 17.55 | AAA | AAA | +97 | foreground on background |
Aa | #F4F0EC | #0A0908 | 17.55 | AAA | AAA | -98 | background on foreground |
Aa | #1A322E | #FFFFFF | 13.64 | AAA | AAA | +100 | foreground on background |
Aa | #FFFFFF | #1A322E | 13.64 | AAA | AAA | -103 | background on foreground |
Aa | #1A322E | #EEF6F5 | 12.43 | AAA | AAA | +94 | foreground on background |
Aa | #EEF6F5 | #1A322E | 12.43 | AAA | AAA | -96 | background on foreground |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://cdn.prod.website-files.com/67dc5e3767277eaa0559d172/69e79b7b625fc48484668072_Realm_logo_white.svg- Format
- SVG
- Dimensions
- 13×18
- Loading
- lazy
- srcset
- no
- Full Page
- saas
- productivity
- light
- 2026-05-17
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also
