Design system reference

Frontsill marketing

The design system for this marketing site only (marketing/styles.css) — an independent palette and shape language from the product it's selling. Frontsill's own guest sites use the hotel's wood/forest/gold palette (see /style-guide) and the owner/agency portal uses its own neutral-and-blue system (see /portal-style-guide). This page keeps its own indigo/coral palette and rounded-rect shapes so it never gets confused with any client's own site — but it shares its typeface with the guest site on purpose: the people reading this page are hotel and restaurant owners, not developers, and Fraunces reads as warm and trustworthy rather than like a dev-tool landing page.

Color

Indigo is the brand/trust color (nav, links, chart bars); coral is the single call-to-action color (buttons, the "where the money goes" split bar). Lime is a rare highlight accent, never a button fill.

Indigo — brand & trust

#4f46e5

Indigo--ds-indigoLinks, chart bars, active states

#3730a3

Indigo 700--ds-indigo-700Hover/pressed

#1e1b4b

Indigo 900--ds-indigo-900Dark panels

#eeedfc

Indigo 100--ds-indigo-100Badge/tint backgrounds

Coral — the one call-to-action color

#d33f2d

Coral--ds-coralPrimary buttons, split-bar "platform" segment

#a93224

Coral 700--ds-coral-700Hover

#ffe6e1

Coral 100--ds-coral-100Icon tile backgrounds

DoDarkened from the original #ff5a46 — see the comment in styles.css. White text on --ds-coral is ~4.65:1, AA-compliant.

Don'tUse the original bright coral (#ff5a46) anywhere — it only hit ~3.1:1 against white text, failing AA.

Lime & star — rare accents

#c8f13f

Lime--ds-limeHero headline highlight, one "new" badge

#2c3a0a

Lime ink--ds-lime-inkText on lime

#f5a623

Star--ds-starReview-score stars in mockups only

Neutrals & feedback

#ffffff

Paper--ds-paperPage background, cards

#f4f4fa

Paper alt--ds-paper-altAlternating section background

#14151f

Ink--ds-inkBody text, headings

#5c5e72

Ink soft--ds-ink-softSecondary text

#16a34a

Success--ds-success"Already live" note, checklist ticks

#dc2626

Danger--ds-dangerX-list icons ("what you lose to OTAs")

Typography

Fraunces for headings and numbers — the same warm serif the hotel guest site uses, chosen so this page reads as human and trustworthy to a non-technical business owner rather than as a dev-tool landing page. Inter for everything else.

--ds-font-display 600
clamp(2–3.6rem) · hero

Your business. Your revenue.

--ds-font-display 600
clamp(1.9–2.6rem) · section titles

Everything you need, nothing you don't

--ds-font-display 600
1.1–1.4rem · card titles

Direct booking

--ds-font-body 400 · 1rem
color --ds-ink

Body copy. A professional website and owner portal, with reviews, booking and analytics available as add-ons.

--ds-font-body 400 · 0.92–1.05rem
color --ds-ink-soft

Secondary text for subheads and supporting detail.

--ds-font-display 600 · 0.78rem
letter-spacing 0.08em · --ds-indigo

Eyebrow · section kicker

Shape

Rounded-rect, not pill — deliberately distinct from the hotel guest site's fully-round buttons/fields, and from the portal's pill buttons.

--ds-radius-sm · 8pxButtons

--ds-radius · 14pxCards, mockup windows, split bar

--ds-radius-lg · 22pxThe pricing receipt panel

999px · pillBadges, chips, the hero eyebrow badge

Buttons

Rounded-rect, Inter 600, 13px×22px padding (15×26 for large). One coral CTA per view.

.ds-btn-coral the only call-to-action fill on the page · .ds-btn-ink near-black fill, used sparingly · .ds-btn-outline bordered, transparent fill

.ds-btn-outline-light white border + text, for the rare dark section

Badges & cards

For local businesses of every kind +18% this month 4.9 ★ Free WiFi

Fact card

15–20%

Typical OTA commission on every booking — money that goes straight to a middleman instead of the business.

Check / cross lists

Keep 100% of what guests pay
Own the relationship with your customer

Hand over a cut of every booking
Guest belongs to the OTA, not you

Accessibility

Coral was deliberately darkened from its original design-file value after a contrast check — the note lives right in styles.css.

Pairing	Used for	Ratio	AA
Aaink / paper	Body text	17.9:1	Pass
Aawhite / coral	Primary button text	4.65:1	Pass
Aaindigo-700 / indigo-100	Hero badge text	8.9:1	Pass