Well-built work.
A clear next step.
Use Manrope Medium 500 for headlines and section titles. Keep letter spacing gently tight and leave room around the text. Archivo Black is reserved for the existing wordmark.
websage.The fixed WebSage identity · September 2026More customers.
More customers.
Less busywork.
Light typography. Soft glass panels. Clear explanations. This is the standard for the website, proposals, presentations, social posts, and future WebSage materials.
Start with roughly 65% light space, 25% charcoal, and 10% orange. This is a composition guide, not a quota for every page.
Confident. Practical. Clear.
WebSage helps business owners make their services clear and their everyday work easier. The identity should feel capable, considered, and approachable.
Service description: We build AI automations and websites.
Supporting promise: Websites that help customers choose you. Automations that help your team follow through.
Use this voice
“Connect missed-call replies to your team.”
“See the scope, cost, and next step.”
Avoid this voice
“Unlock frictionless transformation.”
“Revolutionary AI that guarantees growth.”
Prefer concrete tasks, honest evidence, and short sentences. Use WebSage in written copy, with capital W and S.
One reading family. A distinct wordmark.
A website your customers understand. A workflow your team can use.
Regular 400 for paragraphs. Medium 500 for subheads and navigation. SemiBold 600 for actions and labels. Bold 700 for emphasis and important figures.
| Role | Standard | Usage |
|---|---|---|
| Hero headline | Manrope Medium · 32–102px responsive | Short phrases; approx. 1.05–1.12 line height; −0.04em tracking. |
| Section heading | Manrope Medium · 32–72px responsive | One clear idea; approx. 1.1 line height. |
| Subheading | Manrope Medium · 20–28px | Sentence case; 1.3 line height. |
| Body | Manrope Regular · 16–18px | 1.7 line height; roughly 55–70 characters per line. |
| UI / buttons | Manrope SemiBold · 14–16px | Readable labels; minimum 44px touch target. |
| Secondary label | Manrope SemiBold · 12–14px | Uppercase, +0.07em tracking. Never use for paragraphs. |
Use responsive rem-based sizes and preserve usability at 200% text enlargement. Keep Manrope upright; use weight for emphasis. In tools without Manrope, use Arial for both headings and body until the supplied font is installed.
Charcoal, Paper, Orange.
Ink
#181817
RGB 24, 24, 23
Headlines, text, dark sections
Paper
#F9F9F6
RGB 249, 249, 246
Primary background
Orange
#F45B37
RGB 244, 91, 55
Primary actions and a small brand accent
Orangehover
#FF704E
RGB 255, 112, 78
Hover state on orange actions
Ember
#A63B22
RGB 166, 59, 34
Small accent text on Paper
Muted
#62625C
RGB 98, 98, 92
Secondary text on Paper
Surface
#E9E9E2
RGB 233, 233, 226
Secondary backgrounds
Line
#D4D4CD
RGB 212, 212, 205
Decorative dividers; not input outlines
Approved text pairings
Ink on Paper: 16.85:1. Muted on Paper: 5.82:1. Ember on Paper: 6.09:1. Ink on Orange: 5.41:1.
Orange buttons use Ink text. Paper text on Orange measures only 3.11:1, so do not use that pairing for normal-size text. Bright Orange is an accent, not the default link color on Paper. Use Ember for small colored text.
HEX/RGB are the digital source of truth. For print, have the printer convert through the intended paper/press profile and approve a proof. No Pantone or universal CMYK match is specified.
Keep the mark consistent.
websage.- Use the existing mark with the established lowercase wordmark and orange period.
- Leave clear space of at least half the mark’s height around the complete lockup.
- Use the detailed mark at 32px or larger on screen. Keep the existing favicon for small browser tabs.
- Place the current dark mark on Paper or a plain light background.
- Keep proportions fixed. Do not stretch, rotate, recolor individual parts, or add shadows and outlines.
The supplied mark is the current 200 × 200px PNG, unchanged. This package establishes usage; it does not claim to include a vector master. Large print production needs the original vector artwork.
Let the work carry the page.
Spacing and shape
Use the 4/8px spacing family: 4, 8, 12, 16, 24, 32, 48, 64, 96. Default to 24–32px between related blocks and 64–96px between desktop sections; reduce section spacing on mobile.
Keep content within 1320px. Start with 56px desktop gutters and 20px mobile gutters. Use 12px button corners, 20px card corners, and 10px input corners. Glass panels use a light translucent fill, a fine border, and a soft shadow. Blur only the background behind the panel; text stays sharp. Use a near-opaque fill on mobile and a solid fallback when blur is unsupported.
Photography and proof
Use real website screens and approved workflow captures. Keep explanatory text in HTML rather than baked into images.
Icons
Use the supplied SVG sprite: a 24 × 24 grid, 1.75px strokes, rounded line ends. Render interface icons at 20 or 24px. Arrows indicate a destination or action. No emoji icons.
Motion
Use 180ms for hover and focus transitions. Larger reveals can use 400ms. Keep any decorative motion optional; respect reduced-motion preferences. Never delay access to content for an entrance animation.
Consistency
Do not add a third font, a new brand accent, gradients on the logo, or a new icon style for an individual page.
One system, across the work.
Website / lead messageMore customers.
More customers.
Less busywork.
We build AI automations and websites.
Proposal / cover hierarchy
A clearer website.
A better next step.
Prepared for [Client business]
Website design and inquiry setup
Scope. Investment. Timeline.
Keep these distinct and easy to find.
Social posts: one headline, one real example, one next step. Proposals: use Paper backgrounds, Ink body copy, and Orange for a section marker or decision point. Keep the brand recognizable without covering every surface in orange.
Ready to reuse.
Selected after reviewing Archivo, Archivo Black, Manrope, and the General Sans family listing. The reference-led revision uses Manrope for both headlines and body, producing a lighter rhythm. Archivo Black remains only in the existing wordmark. The exact font in the supplied screenshots was not identified; Manrope is the selected interpretation.
Both selected families are released under SIL Open Font License 1.1. The package includes the license notices; keep them with redistributed font files. Commercial design and embedding are permitted under those terms. Font files cannot be sold on their own.
Primary sources: Archivo Black license, Manrope license, Manrope family, General Sans listing.
The downloadable package contains this guide, desktop TTF fonts, compressed web fonts, licenses, the existing mark, the SVG icon sprite, CSS tokens, JSON tokens, and setup instructions. It works without a font subscription.