# RMS Healm — Horizon style guide
Version **1.0.0** · Published **October 11, 2026**
Visual reference: https://resortmanagement.ai/style-guide/
This is the shared reference for RMS Healm marketing, product, mobile, and partner
materials. It records the chosen identity and current website's visual language,
with accessible defaults for new work. The website is the visual reference, not a
specification for every product interaction.
## 1. Brand and positioning
**RMS** is the public parent brand: Resort Management System. **RMS Healm** names the
next version of the software. **Horizon** names its visual identity and is not a
customer-facing product name. Use “Healm” alone only after establishing RMS Healm.
Do not write HEALM, HealM, RMS.ai, or Horizon PMS as the product name.
The first explanation must answer what it is and who it serves:
> RMS Healm is a property management platform for resorts, condo communities, and
> vacation rental businesses. It brings reservations, accounting, owners, and
> daily operations into one system, with AI and mobile tools built into the way
> you work.
The primary audience is **new potential customers evaluating a management
solution**. Existing customers are a secondary audience. Lead with operational
value rather than an upgrade story that assumes familiarity with RMS.
### Message hierarchy
1. **Property management platform.** Make the category prominent in the opening view.
2. **Operational breadth.** Reservations and booking; rental and owner accounting;
owners and units; housekeeping; maintenance and work orders.
3. **A more natural way to work.** AI-native interaction in plain language, mobile
work across the property, and AI-assisted listing drafts for units you already own.
4. **30+ years of resort management experience.** This supports confidence in the
system's operational depth, including demanding properties.
5. **Book a demo.** Let a prospect explore fit for their workflows and property.
AI and mobile are **available now**, as confirmed by the owner on October 10, 2026.
Do not relabel them a preview based on an older engineering roadmap. Do not
interpret that launch direction as evidence for additional unverified capabilities.
### Voice
Calm, capable, welcoming, specific. Describe the work people do: prepare arrivals,
check unit readiness, follow owner earnings, coordinate repairs, create a listing.
Use short, direct sentences and familiar hospitality vocabulary. Pair a human
benefit with the relevant capability.
| Prefer | Avoid |
| --- | --- |
| “The property management platform.” | “The next era is here.” without an explanation |
| “See which units need attention.” | “Unlock unprecedented operational synergy.” |
| “30+ years of resort management experience.” | An invented founding date or customer count |
| “AI-assisted listings for units you already own.” | Claims of a marketplace or automatic syndication |
| “Book a demo.” | “Start your free trial.” without a real trial flow |
Never invent customers, testimonials, awards, prices, compliance certifications,
integration names, performance gains, or guarantees. Do not imply pictured
properties are RMS customers. Explain AI through actual tasks rather than promises
of autonomous operation. Keep internal architecture names out of prospect copy.
## 2. Horizon identity and logos
The mark is a rising sun above three calm horizontal lines. Its silhouette and
proportions are fixed. Use the complete RMS Healm lockup wherever space allows.
Approved downloads and exact versioned URLs:
https://resortmanagement.ai/style-guide/manifest.json
| Asset filename | Use |
| --- | --- |
| `rms-healm-logo-forest.svg` | Default horizontal lockup on paper or another light, quiet surface |
| `rms-healm-logo-ivory.svg` | Reversed lockup on deep forest |
| `rms-healm-logo-black.svg` | One-color reproduction |
| `rms-healm-symbol-forest.svg` | Compact brand mark on light surfaces |
| `rms-healm-symbol-ivory.svg` | Compact brand mark on deep forest |
| `rms-healm-symbol-black.svg` | Compact one-color reproduction |
| `favicon.svg` | Ivory mark on a rounded deep-forest tile |
| `rms-healm-icon-512.png` | 512 × 512 app or presentation icon |
| `apple-touch-icon.png` | 180 × 180 touch icon |
Each logo has a transparent **1400 × 440 PNG** equivalent. Each standalone symbol
has a transparent **512 × 512 PNG** equivalent. All approved SVG wordmarks have
**outlined lettering**, so no installed fonts are required. Prefer SVG on the web
and in design tools; use PNG when SVG is unsupported. No fonts are bundled.
### Space and size
- Lockup viewBox: `0 10 350 110`, aspect ratio **35:11**. Preserve it; set width and
`height: auto` rather than stretching to a container.
- Symbol viewBox: `0 0 100 100`, aspect ratio **1:1**.
- Leave at least **20 artwork units** of clear space around the viewBox: 20/350 of
the rendered lockup width, or 20/100 of the rendered symbol width. A 180px lockup
therefore needs at least 11px of external space on each side.
- Default lockup width: **180px desktop**, **142px mobile**. Use **140px or wider**
for new production placements; use the symbol when the full name becomes too
small. Existing small product mockups are illustrative exceptions.
- Standalone symbol: **24px minimum** for general placement; **32px preferred**.
The dedicated favicon is the exception at browser-tab sizes.
Do not redraw, retype, stretch, rotate, crop, add a slogan inside the lockup, change
line weight, add shadows or gradients, or introduce new colors. Do not place it
over a busy photo; use a quiet backing surface. Do not use the unselected logo
studies. The former text-based exports are superseded by this outlined kit.
The logo's lettering was drawn from Georgia and Arial. **Do not recreate the logo
with Libre Caslon Display**; that font is for page headings, not the fixed wordmark.
## 3. Color
These values come from the current website. CSS and JSON tokens are distributed
with the kit. Paper and logo ivory are intentionally different colors.
| Token | Hex | Role |
| --- | --- | --- |
| `--paper` | `#f8f8f1` | Main page background |
| `--ink` | `#213f36` | Primary text |
| `--green` | `#214b3e` | Forest logo, primary actions, selected controls |
| `--deep` | `#173f38` | Deep-forest feature bands and app icon |
| `--muted` | `#617266` | Secondary text on paper |
| `--line` | `#d9dfd2` | Decorative dividers |
| `--lime` | `#d6e8a6` | Highlights and CTA surfaces on deep forest |
| `--pale` | `#ecf0e4` | Secondary surfaces |
| `--ivory` | `#f5f4e9` | Reversed logo |
| `--sage` | `#70896b` | Large display accents |
| `--white` | `#ffffff` | Button labels and inset product surfaces |
| `--black` | `#111111` | Monochrome artwork |
| `--hover` | `#32634f` | Primary button hover |
Keep most of the page paper with dark text. Use pale surfaces to group related
work. Reserve deep forest for a small number of focal sections and lime for
emphasis. Avoid gradients as the dominant brand treatment; subtle image scrims
are appropriate when needed for legibility.
### Contrast pairings
Calculated from the exact sRGB hex values, without opacity:
| Foreground / background | Ratio | Use |
| --- | --- | --- |
| Ink / paper | 10.76:1 | Main text |
| Muted / paper | 4.79:1 | Secondary text |
| White / forest | 9.81:1 | Primary action text |
| Ivory / deep forest | 10.53:1 | Reversed text and artwork |
| Deep forest / lime | 8.84:1 | Accent buttons |
| Sage / paper | 3.59:1 | Large text only |
Target at least **4.5:1 for normal text**, **3:1 for large text** (24px regular or
18.67px bold), and **3:1 for necessary control boundaries and focus indicators**.
The pale divider token is decorative and cannot be the only indication of an
input boundary. Use forest for functional outlines on light surfaces, and lime or
ivory on deep surfaces. Recheck contrast if background or opacity changes.
## 4. Typography
- **Libre Caslon Display, weight 400:** editorial headlines, section headings,
occasional large proof points. Soft, open, confident. Emphasized words change
color rather than switching to italic.
- **DM Sans, weights 400–700:** body copy, navigation, buttons, controls, cards,
operational tables, mobile UI, data, captions, and labels.
- Fallbacks: `'Libre Caslon Display', Georgia, serif` and `'DM Sans', Arial,
sans-serif`. The website requests fonts through Google Fonts. Projects may
self-host appropriately licensed copies; the brand archive does not include them.
| Style | Website reference / default |
| --- | --- |
| Hero, desktop | `clamp(62px, 5.35vw, 78px)`, line-height `.98`, tracking `-2.5px` |
| Hero, phone | `clamp(54px, 15.5vw, 78px)`, line-height `.98`, tracking `-1.7px` |
| Section heading | `clamp(44px, 4.5vw, 66px)`, line-height `1.04`, tracking `-1.5px` |
| Body default | `16px`, line-height `1.75`, weight `400` |
| Card heading | `19px`, line-height `1.3`, weight `550` |
| UI/body in dense layouts | Prefer `14–16px`, with comfortable line-height |
| Eyebrow / label for new work | `12px`, weight `650`, uppercase, tracking `1.7px` |
The current marketing site also uses smaller decorative captions and miniature
mockup labels. **Do not use those as product UI sizing guidance.** Keep primary
actions, inputs, status labels, and operational data readable at actual size.
Avoid clipping or fixed heights that break at 200% zoom. Keep body copy around
45–70 characters per line where practical.
## 5. Layout and surfaces
The visual rhythm is spacious and editorial, with clear operational content.
- Max content width: **1328px**. Side gutters: **56px desktop**, **22px tablet**,
**20px phone**. Existing responsive breakpoints: 1150px, 850px, 620px.
- Typical vertical section spacing: **90px desktop**, **65px tablet**, **52px phone**.
- Reuse a 4px spacing rhythm: 4, 8, 12, 16, 20, 24, 32, 40, 56. Larger editorial
spacing can follow the section values above.
- Default card radius: **5px**; control radius **4px**; feature enclosure **6px**.
Rounded pills are for status or compact labels, not every container.
- Fine borders and tinted surfaces do most of the grouping. Shadows are subtle,
mainly for overlapping photography and product illustrations.
- The hero photograph has one expressive upper-left curve: **100px desktop**,
**70px phone**. Use this sparingly; do not apply large asymmetric curves to UI.
- Capability grids: three columns on wide screens, two on tablet, one on phones.
Reading order should be category → capabilities → examples → proof → next step.
- Use dark feature bands as deliberate pauses. Do not turn every section into a
floating card or repeat the same grid throughout a page.
## 6. Components and behavior
### Primary action
Forest background, white label, 1px forest border, 4px corner radius, DM Sans
medium weight. The current marketing button uses `17px 23px` padding and a 13px
label. For new product UI use 14–16px labels and at least a **44px target** wherever
practical. Hover can use `--hover` and a restrained 2px lift; never shift the layout.
On dark sections use lime with deep-forest text.
### Links and secondary actions
Use text links with clear labels such as “See what you can manage” or “Download
the brand kit.” Inline prose links should be underlined. Give every focusable
element a visible, high-contrast focus ring. Avoid relying on hover alone.
### Cards, forms, and status
Pale backgrounds, fine borders, readable sans-serif headings, and concrete
content. Use labels outside inputs. Show loading, success, empty, and error states
where the task needs them. Status must include words or an icon as well as color.
Warm amber may express attention in operational examples, but is not a new brand
accent; validate semantic state colors separately.
### Icons
Simple outline icons: 24 × 24 viewBox, 1.5px stroke, round caps and joins. Common
concepts include calendar, unit/home, ledger, key, maintenance tool, and people.
Match the established line family. Decorative icons are hidden from assistive
technology; icon-only controls need accessible names. The Horizon mark uses its
own fixed 100-unit geometry and is not an ordinary UI icon.
### Interaction honesty
Prepared AI walkthroughs must explicitly say **fictional sample data**. Expose
working selectors or disclosures, not an inert chat input. Do not promise saving,
submission, a trial account, or a live AI response unless the feature actually
does it. The marketing site's primary conversion is a real demo request.
### Motion and accessibility
Use restrained 200ms transitions. Honor `prefers-reduced-motion`; remove lifts,
smooth scrolling, and nonessential animation. Use native links, buttons, labels,
and disclosures; maintain headings and logical keyboard order. Check phone,
tablet, desktop, and 200% zoom, and ensure no horizontal overflow.
## 7. Photography and art direction
Show the places the software helps people run: resorts and pools, individual
units, welcoming interiors, vacation homes, wooded cabins, and on-site work.
Natural light, real materials, generous framing, and clear focal points create
warmth. Balance the vacation experience with the operational reality behind it.
Use a destination view alongside unit-level detail. Mix coastal and inland
settings so the brand does not imply it only serves beach resorts. Crop
deliberately; preserve the focal subject and keep text away from busy detail.
Editorial overlaps should stay modest and collapse cleanly on phones.
Avoid generic robot art, neon AI imagery, stock handshakes, random dashboards, or
photography that falsely implies an endorsement. UI illustrations should use RMS
Healm colors and realistic tasks and remain clearly labeled as examples.
The website's photographs are illustrative and credited to their sources in its
Image credits dialog. They are **not included in this logo kit**. Source and record
appropriate usage rights for new photographs; do not treat logo access as a
license to copy arbitrary customer photography.
## 8. Implementing the kit
1. Read `AGENTS.md` and this guide.
2. Download the archive or the exact files from `manifest.json`.
3. Store artwork and tokens locally in the target project. Prefer SVG logos.
4. Import the CSS variables; load the two typefaces with the documented fallbacks.
5. Use the supplied assets and token values before introducing new styles.
6. Verify the result in its actual context and viewport sizes.
Example, after copying `tokens.css` and a logo into your project:
```html
```
```css
body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 400; }
.primary-action {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 14px 24px; border: 1px solid var(--green);
border-radius: var(--rms-radius-control); background: var(--green);
color: var(--white); font: 550 14px/1.4 var(--sans);
}
.primary-action:hover { background: var(--hover); }
.primary-action:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
```
The tokens file provides the website's concise color/font variables plus
`--rms-space-*`, `--rms-radius-*`, `--rms-layout-*`, `--rms-motion-*`, and
`--rms-shadow-*` variables. JSON is the editable token source. Breakpoints remain
JSON values because ordinary CSS custom properties cannot supply media queries.
Use the exact versioned artwork URLs in `manifest.json` when downloading individual
assets. The version query prevents an older CDN or browser cache from returning
superseded artwork. Verify the SHA-256 checksum, then use the downloaded file
locally. The complete ZIP contains the same approved bytes.
## 9. Ownership and maintenance
Repository: `johnnywey/rms-web`. Editable guide: `dist/style-guide/`. Approved logo
assets: `dist/assets/brand/`. The visual page, Markdown, agent instructions, tokens,
and archive together form the brand kit. The internal eight-direction logo review
gallery is historical and is excluded from production.
Run `python3 scripts/build_brand_kit.py` after changing kit source files. It
regenerates CSS tokens, the asset manifest, the full archive, and the logo archive.
Run `python3 scripts/check_brand_kit.py` to verify packaged bytes and shared color
tokens. Only use `swift scripts/export_brand_logos.swift` on macOS when deliberately
regenerating approved outlines; its output is committed so consumers need no
special toolchain. `scripts/generate_logos.py` only owns the historical studies.
Change the kit version and publication date when the owner approves a new visual
or editorial direction. Update all representations together. Existing downstream
projects should adopt an explicit kit version and retain the manifest so changes
can be compared. These brand instructions do not change deployment permissions.
