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.220DStacked 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 compressDo not rotateDo not cropDo not partly recolorDo not add effectsDo not retypeDo not invade clear spaceDo not lose contrastDo 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.
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.
We bring your space together with thoughtful design, direct sourcing and delivery that connects every detail.Discuss your project↗
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.
Social identity & profiles
Corporate accountWhite background; centered icon.People-led IPComplete white horizontal logo below the person; preserve the circular crop.
Profile name
[Name] | ONE SPACE
Bio
Sourcing specialist at ONE SPACE Design · Sourcing · Delivery Discuss your project: onespace.ltd
Facebook
ONE SPACE
Instagram
ONE SPACE
TikTok
ONESPACE | Sourcing
Social profile applicationApproved profile example. Keep the platform UI native.
People-led avatar placement
1024 × 1024 px White horizontal logo: 560 px wide x = 232 px · y = 770 px
Bottom gradient begins at 46%H and fades from 0% to 90% opacity.
A recognizable content series
A clear brief Material choices Sourcing trip
Use one title family and color. Check both the profile thumbnail and full-size video.
Keep the identity complete
IP avatar: 1024 × 1024 px; white horizontal logo width 560 px, x=232, y=770. Keep the face visible and the logo clear space inside the circular crop.
Use a gradient and a clear bio
Begin the bottom gradient at 46%H, fading from 0% to 90% opacity. Add ONE SPACE, the real role and a valid project contact link to the bio.
Unify three elements
Use the approved avatar, brand-linked bio and consistent cover-title color. Do not recolor platform buttons, navigation or original photographs.
Keep a series recognizable
Use one title family and color; choose Top Center or Frame Center for each cover. Review both the profile thumbnail and the full-size video view before publishing.
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.
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
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
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.
Residential
Hospitality
Schools & Hospitals
Workplace