ONE SPACE Brand Guide | Logo, Color & Visual Identity

Foundations

Real spaces. Real people. One shared visual language.

A shared identity

SpacesShow real spaces and natural materials.

ProcessShow the work behind the service.

PeoplePreserve real expressions and accurate attribution.

Considered.
Connected.
ONE SPACE.

A visual system for design, sourcing and delivery.

Warm. Restrained. Credible.

Use real spaces, people and products. Let natural materials and clear information communicate the service.

One shared system

Use the supplied logo, colors and type families across websites, social media, video and advertising.

Use the masters

Start with the supplied vector logo and editable templates. Scale the logo proportionally; keep its internal spacing fixed.

Read the rules, adapt the content

Dimensions are ONE SPACE production starting points. Review the final output at its actual size and within the platform crop.

Keep photography natural

Preserve natural light, material color and human expression. Do not tint every image to match the palette.

Make attribution clear

Verify names, roles, project ownership, prices and image rights before publishing. Every image should support a specific message.

Logo system

Use the supplied artwork. Preserve its shape, spacing and visibility.

Logo configurations

Primary / horizontal

Websites, advertising and formal documents.

Compact / stacked

Where horizontal space is limited.

Icon

Avatars, favicons and interfaces with clear brand context.

Choose the complete logo first

Use the horizontal mark for websites, ads and formal documents. Use the stacked mark where horizontal space is limited.

Use the icon with context

The icon alone is for avatars, favicons or interfaces where the brand name is already clear. First contact should use the complete mark.

Clear space & geometry

DSymbol diameter

¼DMinimum on every side

½DPreferred for covers and end cards

Horizontal clear spaceSolid line: visible logo bounds. Dashed line: clear-space boundary.

Stacked clear space¼D outside the entire visible configuration.

Icon clear space¼D above, below, left and right.

For D = 40 px, leave at least 10 px on each side; 20 px is preferred. C is the visible capital-letter height.

Horizontal geometryC ≈ 0.571D · symbol gap 0.300D · word gap 0.220D

Stacked geometryC ≈ 0.288D · symbol gap 0.225D · line gap ≈ 0.092D

Minimum: ¼D on every side

D is the symbol diameter. The solid frame touches the visible logo bounds; the dashed frame sits ¼D outside it on all four sides.

Preferred: ½D

Use ½D for covers and end cards. Text, image edges and other marks must stay outside the clear space; page margins still apply.

Horizontal configuration

C ≈ 0.571D. Symbol-to-wordmark gap = 0.300D. ONE / SPACE gap = 0.220D. Scale the supplied master as a unit.

Stacked configuration

C ≈ 0.288D. Symbol-to-wordmark gap = 0.225D. Visible line gap ≈ 0.092D. Align the two words left; never stretch ONE to match SPACE.

One rule for every mark

Offset the actual outer bounds by at least ¼D. Use the same measured distance above, below, left and right.

Keep surrounding content out

Headlines, captions, dividers, image edges and partner marks belong outside the dashed frame.

Size, files & placement

Minimum logo sizes
CONFIGURATION	DIGITAL MINIMUM	PRINT MINIMUM	USUAL PLACEMENT
Horizontal	160 CSS px wide	35 mm wide	Website header: 180–224 px
Stacked	112 CSS px wide	22 mm wide	Compact spaces
Icon	24 CSS px diameter	6 mm diameter	Brand avatars / interface

Corporate avatar1024 × 1024 px · white square · centered icon D ≈ 683 px

Favicon only

16 px canvas: D = 14 px.
32 px canvas: D = 28 px.

Logo placement by application
APPLICATION	CONTEXT / CANVAS	LOGO WIDTH	LEFT / TOP MARGIN
Desktop web	88 CSS px header	180–224 CSS px	24 / 24 CSS px minimum
Mobile web	390 CSS px viewport	160 CSS px	16 / 21 CSS px minimum
Square / portrait ad	1080 × 1080 / 1350 px	216 px	64 / 64 px
Landscape ad	1920 × 1080 px	288 px	96 / 64 px

PARTNER NAME

Keep the divider at least ½D beyond each logo’s clear space.

These are minimum starting points

Use at least 160 CSS px for the horizontal mark, 112 CSS px for stacked and 24 CSS px for the icon. Enlarge if unclear.

Avatar and favicon exceptions

Brand avatar: white 1024 px square, centered icon D ≈ 683 px. Favicons: D = 14 px at 16 px, or 28 px at 32 px only.

Select the production format

Use SVG digitally, transparent PNG where vectors are unsupported, and vector PDF for print. Keep opacity at 100%; use K100 for one-color print.

Respect both brands

Balance visual size in co-branding. Keep a divider at least ½D beyond each logo’s clear space. Convert RGB artwork during prepress and proof it.

Backgrounds & contrast

Charcoal on Cream

White on Quiet Olive

Charcoal on Warm Beige

Use a full-image gradientKeep the logo fully opaque and the image continuous.

Avoid a hard local panelA rectangle behind the logo interrupts the scene.

Choose the correct version

Charcoal #292C2B on light surfaces; white #FFFFFF on dark surfaces. Do not recolor the mark to a campaign accent.

Use a full-image overlay if needed

A continuous gradient or translucent overlay may cover the photo. Avoid a hard rectangle behind the logo that interrupts the scene.

Do not change the mark

Do not stretch or compress

Do not rotate

Do not crop

Do not partly recolor

Do not add effects

Do not retype

Do not invade clear space

Do not lose contrast

Do not add a slogan

Preserve the artwork

Never stretch, rotate, crop, partly recolor, add effects or retype the logo. Never turn a slogan into part of the mark.

Preserve visibility

Keep the clear space free of other content. Choose a background with sufficient contrast and review the smallest intended output.

Color

Light surfaces carry information. Stronger colors guide attention.

The ONE SPACE palette

#484D49

Quiet Olive

Primary

#F2EDE7

Warm Beige

Secondary

#F9F7F4

Cream

Neutral

#563929

Umber

Accent

#2C2C2C

Carbon

Body text

50% Cream · 30% Warm Beige · 15% Quiet Olive · up to 5% Umber. Photography is excluded.

Use color by role

Warm Beige and Cream form the large surfaces. Quiet Olive marks navigation, primary actions and key headings; Umber is a limited accent.

Keep logo colors separate

Logo charcoal is #292C2B; body text is #2C2C2C. White #FFFFFF is reserved for reversed marks, button labels and brand-avatar backgrounds.

Start with 50 / 30 / 15 / 5

50% Cream, 30% Warm Beige, 15% Quiet Olive and up to 5% Umber. Adjust to content; do not tint photos to achieve these proportions.

Let the surface support reading

Use Cream for page canvases and cards, Warm Beige for sections and footers, and Quiet Olive for navigation and primary buttons.

Interaction & status

Success

Your project brief is received.

#625044 / #F0EBE5

Warning

Add your target delivery date.

#855821 / #FCF0D8

Error

Enter a valid email address.

#A14A45 / #FAE9E6

Information

We will arrange a consultation.

#645D58 / #F2EEEA

DefaultHoverPressedFocus

Interactive specimen — hover, press or focus with your keyboard:

Keep interaction states consistent

Default #484D49; hover #393E3A; pressed #2C2C2C. Focus uses a 2 px outline with a 4 px offset.

Separate decoration from controls

Use #605C53 for secondary text, #D3D3D3 for decorative dividers and #888888 for necessary control borders. Disabled controls still need readable labels.

Legibility in context

Space for living.

13.06:1Body / canvas#2C2C2C / #F9F7F4

Space for living.

12.00:1Body / section#2C2C2C / #F2EDE7

Space for living.

8.07:1Heading / canvas#484D49 / #F9F7F4

Space for living.

8.63:1Button / primary#FFFFFF / #484D49

Space for living.

6.23:1Secondary / canvas#605C53 / #F9F7F4

Space for living.

8.96:1Accent / section#563929 / #F2EDE7

Use measurable targets

Body text and subtitles: at least 4.5:1; aim for 7:1 for fine serif subtitles. Necessary controls and graphical boundaries: at least 3:1.

Opacity alone is not a guarantee

Test the brightest or busiest background behind each line, then view a phone thumbnail. Logo contrast is an internal target, not a WCAG text requirement.

Typography

Choose the family, language and real weight for the application.

Typography by application

Reading / website

400 body · 600 English headings · 700 Chinese headings

HONOR Sans CN

荣耀字体

HONOR Sans

Clear choices.

Cover title

700 · direct title

Source Han Serif SC Bold

思源宋体

Playfair Display Bold

Consider every detail.

Subtitles / support

400 · readable at final size

Source Han Serif SC Regular

思源宋体

Playfair Display Regular

Start with how you live.

Campaign short title

Native oblique · short titles only

Smiley Sans

得意黑

Smiley Sans

Make room for living.

Price / CTA / details

400 / 600 / 700

HONOR Sans CN

荣耀字体

HONOR Sans Demibold

Discuss your project.

Reading / English

Clear choices.
Connected delivery.

From the first brief to the final details, a clear plan keeps your project connected.

Reading / Chinese

荣耀字体

中文标题 / 正文 / 表单与界面

Regular 400 / Bold 700

Cover title / Bold 700

Choose the right materials.

Subtitle / Regular 400

Start with how you live.

Campaign / native oblique

Make room
for living.

Campaign / restrained English

Every detail.
Considered.

Expressive families appear here as brand specimens. Website interface and reading text use HONOR Sans.

Reading and functional text

HONOR Sans CN for Chinese; HONOR Sans for English. Use these for websites, body text, forms, prices and CTA labels.

Video and campaign text

Playfair Display does not contain Chinese: pair it with Source Han Serif SC. Smiley Sans supports Chinese and Latin short titles; use Playfair Bold for restrained English.

Use real weights

English: HONOR Sans Regular 400 for body and Demibold 600 for headings. Chinese: HONOR Sans CN 400 for body and 700 for headings.

Keep paragraphs natural

Use sentence case in English, normal character spacing in Chinese and left-aligned long text. Do not use Playfair Display or Smiley Sans on the website.

Cover titles: Bold 700

English: Playfair Display Bold. Chinese: Source Han Serif SC Bold. Covers do not require a logo, subtitle or advertising button.

Subtitles: Regular 400

Use Playfair Display Regular in English and Source Han Serif SC Regular in Chinese. Preserve punctuation and use real weights, not synthetic bold.

Keep the original shape

Smiley Sans has a native oblique form. Never add skew, stretch or synthetic bold. Limit titles to 6–14 Chinese characters or 2–6 English words.

Keep functional information plain

Prices, dates, contact details and CTAs use HONOR Sans / HONOR Sans CN. Use one expressive style per artwork; longer English may use Playfair Display Bold.

Type scales

Website type scale — CSS pixels, size / leading
ROLE	DESKTOP SIZE / LEADING	MOBILE SIZE / LEADING	WEIGHT / LIMIT
Hero H1	56 / 64	36 / 44	CN 700 · EN 600 / 2–3 lines
Section H2	40 / 52	28 / 38	CN 700 · EN 600
Card H3	24 / 34	22 / 32	CN 700 · EN 600
Body	18 / 30	16 / 28	400 / natural line length
Navigation / CTA	16 / 24	16 / 24	500–600 / ≥44 px target
Caption / terms	14 / 22	14 / 22	400 / keep important terms clear

Video & advertising — artwork with a width of 1080 pixels
ROLE	SIZE / LEADING	FAMILY / MAX LINES	CONTENT LIMIT
Cover title	72–88 / 84–104	Playfair Bold / Source Han Serif Bold	1–3 lines; EN 3–8 words
English subtitles	52–60 / 64–74	Playfair Display Regular / 2 lines	Bilingual starting point: EN 52
Chinese subtitles	48–56 / 66–76	Source Han Serif Regular / 2 lines	12–16 characters per line
Ad headline	64–88 / 76–104	Playfair Bold / Smiley Sans / 2 lines	Shorten before reducing size
Support / body	36–44 / 50–60; 28–36 / 42–52	HONOR Sans / HONOR Sans CN	Up to 3 short points
CTA / terms	30–36 / 44; 24–28 / 36–42	HONOR Sans / HONOR Sans CN	Keep conditions legible

Control line length

English body: 45–75 characters per line. Chinese: 22–32 characters. Keep paragraphs about 640–760 CSS px wide on desktop.

Make hierarchy accessible

Use one H1 per screen and 2–3 lines at most. Aim for 44 px touch targets. Keep important terms readable and align mixed-language baselines optically.

Recompose for each format

A 1920 × 1080 landscape can start at about 1.33× the type size after recomposition. Never stretch or crop a portrait ad into landscape.

Review on a phone

At 360 px display width, 54 px source text appears about 18 px. Keep body copy to three short points and never shrink terms to fit more offers.

Layout

Build a clear reading path across every screen and format.

Alignment & responsive layout

Incorrect alignmentThe logo, title, support and CTA do not share an edge.

Correct alignment64 px outer margin · 32 px title-to-support · 48 px copy-to-CTA in this example.

Desktop grid

12 columns · 24 px gutters · up to 1280 px content width · at least 48 px margins.

Mobile grid

4 columns · 16 px gutters · 20–24 px margins.

Home · Services · Product · Process · Cases

High-end Residences

One-stop Delivery

One-stop delivery process

Inspection
Logistics
Customs clearance

Design Services

Procurement Services

Tell us about your project.

Build a shared left edge

For a 1080 px-wide ad, start with a 64 px outer margin. Align the logo, headline, copy and CTA; preserve the focal point of the photo.

Make spacing show the relationship

Use a 24–32 px title-to-support gap and a 40–56 px copy-to-CTA gap. Use an 8 px rhythm; section gaps should exceed paragraph gaps.

Preserve the actual content

Hero → delivery process → design services → procurement services → contact. Maintain selectable text, real links and clear service details.

Use a responsive grid

Desktop: 12 columns, 24 px gutters, content up to 1280 px, margins at least 48 px. Mobile: 4 columns, 16 px gutters, 20–24 px margins.

One message. One next action.

The core message

Every detail. One team.

The supporting evidence

Design · Sourcing · Delivery

The next action

Discuss your project.

One focal point. One main action.

Choose the headline, person or product as the visual lead. Use one primary CTA; secondary journeys belong on the destination page.

One effective brand signature

Use a complete logo once per ad, in the website header and in social identity. A video cover does not need an extra logo.

Social & video

Keep the identity consistent and the footage natural.

Video titles & readability

Top CenterTitle-block center: (50%W, 22%H). At 1080 × 1920: (540, 422).

Frame CenterTitle-block center: (50%W, 50%H). At 1080 × 1920: (540, 960).

Maximum title width: 84%W. Use 1–3 centered lines, 72–88 px type.

Low contrastAvoid unclear titles.

Full-frame overlayUniform treatment: start at 20–40% opacity.

Continuous gradientTop: start at 60–75%, fading to 0%.

The approved examples demonstrate stronger treatments. The percentages above are starting points; inspect the actual image for legibility.

Video subtitle applicationUse real Regular 400 weights and preserve punctuation.

Fix the center of the title block

Top: (50%W, 22%H). Center: (50%W, 50%H). At 1080 × 1920, these are (540,422) and (540,960). Maximum width: 84%W.

Choose from two fixed positions

Use 1–3 lines, 72–88 px type. Do not move to left-aligned or lower titles. Change the frame or shorten copy if it covers faces, hands or key details.

Use a continuous treatment

Uniform overlay: start at 20–40%. Top gradient: start at 60–75%, fading to 0%. Use #2C2C2C; avoid local hard panels behind the title.

Check the title against the actual image

Default title #F2EDE7; on a clean bright frame, #484D49 is allowed. Adjust until readable while keeping faces and materials natural.

Advertising

One promise, useful evidence and one next step.

Anatomy & formats

Logo

Fixed zone + clear space

Headline

One central promise

Support

A reason to believe

Visual

The space, person or product

CTA

One clear next step

Square / 1080 × 108064 px margins · 216 px logo.

Portrait / 1080 × 135064 px margins · 216 px logo.

Landscape / 1920 × 108096 px side margins · 64 px top/bottom · 288 px logo.

Make the hierarchy visible

Headline 64–88 px; support 36–44 px; body 28–36 px; CTA 30–36 px. Omit unnecessary layers rather than filling the canvas.

Use one promise and one action

At 1080 px width, place the logo at (64,64), width 216 px. Keep at least ¼D clear space; do not add a second watermark or competing CTA.

Square and portrait

1080 × 1080 or 1080 × 1350. Start with 64 px margins and a 216 px-wide logo. Reposition the subject and CTA for each crop.

Landscape

1920 × 1080. Start with 96 px side margins, 64 px top/bottom and a 288 px-wide logo. Reflow text; never distort the photograph.

Photography & compositions

Single imageOne result. One focal point.

Multiple imagesOne lead image plus up to two supporting images, or three equal steps.

PeopleKeep expression, gaze, headroom and gestures visible.

ProductsPreserve shape, materials and construction details.

Service messagingA wide split connects copy and photography.

Single-image composition

Keep one focal point. Preserve the floor, wall and natural-light direction in room photography. Do not fragment the scene with text.

Multi-image composition

Use one lead image plus up to two supporting images, or three equal steps. Keep 24–32 px gutters and aligned edges; reduce copy as images increase.

People

Let the gaze lead toward the copy. Keep headroom, facial expressions and hand gestures visible. Names and roles remain supporting details.

Products

Let the product fill at least 50% of its visual area. Preserve feet, edges, hardware and texture; place specifications beside, not on, key details.

Match the structure to the task

Use a wide split for service messaging, a generous field for products, a side panel for people and a sequence for processes.

Keep the content credible

Website text should read easily, video should feel real and advertising should make the next step obvious. Application artwork uses English.

Offers & conditions

Offer layout specimenPlaceholder only. No offer is currently advertised.

Offer

One amount, discount or gift.

Context

Currency · unit · eligibility.

Terms

Dates · conditions · exclusions.

Give the amount context

Highlight one discount, amount or gift. State currency, unit and eligibility. Use HONOR Sans / HONOR Sans CN for numbers; crossed-out prices need a real basis.

Keep dates and restrictions readable

Use YYYY-MM-DD to YYYY-MM-DD and add a time zone when relevant. Terms: 24–28 px minimum. Move excess detail to the destination page.

Carousel storytelling

The brief
Space. Style. Budget.
The choices
Size. Material. Finish.
The process
Inspect. Ship. Coordinate.
Your next step
Discuss your project.

Keep the system continuous

Use 4–6 slides with the same margins, logo zone, type scale and page numbering. Every slide should make sense on its own.

Keep each slide focused

One idea per slide. Body copy: about 20–40 English words or 30–60 Chinese characters maximum. Keep the cover shorter and the final CTA singular.

Production

Prepare, check and hand over the actual deliverables.

Production & handoff

Output specifications
MEDIUM	OUTPUT	RETAIN
Website	SVG logo; optimized image dimensions	Semantic text, font language and weights
Social / advertising	PNG or high-quality JPG at canvas size	1080 px master; editable text; full subject
Video	1080 × 1920 or 1920 × 1080	Separate footage, titles, subtitles and masks
Print	PDF at final size; images about 300 ppi	Paper / ICC conversion and print proof

Source package organization
Section	Production files
Logo & color	logos/ · tokens/
Typography & layout	fonts/ · tokens/brand.css
Social & covers	templates/07, 08, 10, 11
Advertising & image layouts	templates/01–06, 09
Production, licenses & checks	README · QA.json · references/

File naming

Brand → channel → topic → ratio → language → version

ONE_SPACE_Instagram_MaterialSelection_4x5_EN_v01.jpg

Separate units and color workflows

CSS px, artwork pixels and print points are different. HEX / RGB define screen colors; print requires paper-specific ICC conversion and proofing.

Name files clearly

Order: brand, channel, topic, ratio, language, version. In the example, 4x5 is the aspect ratio, EN is English and v01 is the file version.

Font licenses & sources

HONOR Sans CN
Chinese reading / UI
HONOR Sans
English reading / UI; Heavy wordmark
Source Han Serif SC
Chinese video title / subtitle
Playfair Display
English video title / subtitle
Smiley Sans
Chinese / English short campaign title

HONOR Sans license

The supplied license allows works such as logos. Keep the font files unmodified and retain their copyright notice and license. Use the Heavy wordmark master.

Open Font License families

Source Han Serif, Playfair Display and Smiley Sans use OFL 1.1. Retain licenses when redistributing fonts; respect Reserved Font Names for modifications.

Release checklist

LogoMaster, proportions, color, clear space, size.
ColorLight surfaces; clear states; measured contrast.
TypographyCorrect language, family, weight and glyphs.
CoversDirect title; fixed center; readable real footage.
Social identityWhite brand avatar; full logo on IP avatar; bio.
AdvertisingOne message, one CTA; readable offer terms.
PreviewPhone thumbnail, platform crop and links.
ArchiveEditable files, sources, licenses and version.

Validate the complete experience

Check phone thumbnails, platform crops, subtitle interference, links and the destination page. Confirm names, claims, offers and image permissions.

Archive the source

Keep editable artwork, original images, the versioned guide, tokens, font licenses and exported files together.

Every detail.One identity.

A shared identity

Warm. Restrained. Credible.

One shared system

Use the masters

Read the rules, adapt the content

Keep photography natural

Make attribution clear

Logo configurations

Primary / horizontal

Compact / stacked

Icon

Choose the complete logo first

Use the icon with context

Clear space & geometry

Minimum: ¼D on every side

Preferred: ½D

Horizontal configuration

Stacked configuration

One rule for every mark

Keep surrounding content out

Size, files & placement

Favicon only

These are minimum starting points

Avatar and favicon exceptions

Select the production format

Respect both brands

Backgrounds & contrast

Choose the correct version

Use a full-image overlay if needed

Do not change the mark

Preserve the artwork

Preserve visibility

The ONE SPACE palette

Quiet Olive

Warm Beige

Cream

Umber

Carbon

Use color by role

Keep logo colors separate

Start with 50 / 30 / 15 / 5

Let the surface support reading

Interaction & status

Keep interaction states consistent

Separate decoration from controls

Legibility in context

Use measurable targets

Opacity alone is not a guarantee

Typography by application

Reading / website

Cover title

Subtitles / support

Campaign short title

Price / CTA / details

Reading / English

Reading / Chinese

Cover title / Bold 700

Subtitle / Regular 400

Campaign / native oblique

Campaign / restrained English

Reading and functional text

Video and campaign text

Use real weights

Keep paragraphs natural

Cover titles: Bold 700

Subtitles: Regular 400

Keep the original shape

Keep functional information plain

Type scales

Control line length

Make hierarchy accessible

Recompose for each format

Review on a phone

Alignment & responsive layout

Desktop grid

Mobile grid

One-stop delivery process

Build a shared left edge

Make spacing show the relationship

Every detail.
One identity.