Make possibilities real.

What the identity stands for.

bwebo brings ideas into practice through useful products, ventures and ways of working.

bwebo is the company. RandySee is the founder’s personal home for ideas and research. Individual products can have their own identities; use “A bwebo product” only for a confirmed company product.

Who we are designing for

Audience priorities are working choices based on the work and its context. Broad accessibility guides the design; majority preference has not been measured.

A clear signature.

Eight equal rounded radial forms surround an open centre. Use it as a static, single-colour symbol. Its geometry is independent of other companies’ marks; it does not imply an affiliation or a foundation-model business.

Use the symbol at 24px or larger in ordinary interface contexts. The supplied favicon is the 16px exception. Keep at least one-quarter of the symbol’s width clear on every side. A name-only wordmark needs clear space equal to its lowercase letter height; the supplied lockup includes its own internal spacing.

Do not stretch, rotate, outline, add shadows to or recolour parts of the symbol. Never use a generated board as a logo master. Do not put a mark on a busy image or make a company mark look like a loading spinner.

Colour with a clear role.

Let the work lead. Graphite and chalk carry the identity; mineral surfaces and a small moss accent add depth without competing with it.

Start with roughly 80% neutral surfaces, 15% structural colour and 5% emphasis. Adjust for the job; this is a composition guide, not a claim about human psychology. Use the semantic light/dark tokens in the kit.

Words have a presence.

Manrope brings measured geometry and an open, human character. A single family connects wordmark, headlines and interface. Use weight and spacing for hierarchy; keep paragraphs comfortable.

• Display48–88px · 1.06–1.12 line height
• Section heading32–48px · 1.12 line height
• Reading text18px · 1.65 line height
• Interface / caption16px / 14px · 1.5–1.65 line height

Use fluid sizing and real text. Keep normal reading lines around 60–72 characters. For other scripts, choose a tested local-font fallback with the necessary coverage; do not assume the Latin specimens establish multilingual support.

Consistency people can use.

Use a 4px spacing base: 4, 8, 12, 16, 24, 32, 48, 64 and 96px. Reading columns stay around 60–72 characters; application layouts can extend to 1280px. Gutters: 20px on narrow screens, 32px on tablets, 48px on wide screens. Collapse content by priority, not by shrinking the type.

Use 8px control corners, 16px content-panel corners and a pill only for a compact status or brand switch. Primary controls are solid; secondary controls are outlined; text links stay recognisable with underlines in prose. Use at least 44px for ordinary control height. Do not make every paragraph a card.

Show focus, hover, pressed, disabled, pending, error and success states. Use text as well as colour. Pending work keeps its label and exposes its state; errors preserve input and explain recovery. Disabled actions need a nearby explanation when the reason is not obvious.

Accessibility is part of the style

Aim for WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for large text, and 3:1 for meaningful interface boundaries where required. Our usual 44px control target exceeds the 24px AA minimum; exceptions still need review. Keep visible keyboard focus, real labels, 200% text resize and 320px reflow. Never encode meaning with colour alone.

Motion responds to a person

Respond to an action with a short 150–200ms transition. Avoid idle movement, looping hero animation and moving brand symbols. Respect reduced-motion preferences; remove movement without hiding feedback.

A material way to think.

Graphite and mineral-grey material studies with occasional muted moss. Soft upper-left daylight, matte surfaces, broad rounded forms and an open centre. Show possibility and assembly without fake product screenshots or laboratory claims.

Generate each illustration for its actual placement. Keep a consistent light direction, material, perspective and palette. Do not crop a concept board into production assets. Give informative images useful alternative text and keep decorative artwork silent. Never fabricate a portrait, testimonial, product screen or scientific result.

AI-generated illustration, reviewed as a set. Symbol and wordmark masters are crisp vector artwork.

Download this illustration

Say what the work does.

Speak clearly and with measured confidence. Connect purpose to real work, describe what is available, and make the next step concrete. Use “we” for the company without inventing a team.

Use “Randy See” in prose and identity; “RandySee” for the site name. Use “bwebo” in ordinary communication and “BWEBO PTE. LTD.” where the legal entity is needed. Keep APD’s conceptual status and product availability explicit.

A system beyond one page.

Use the same name, type and colour roles across article covers, product notes, presentations and social previews. Lead with one useful idea. Let the identity support it.

For a 1200 × 630 social image, keep the main text and mark within a 64px safe margin. Use a 1080px square for a square post; recompose the content rather than automatically crop it. A plain email signature uses the name, role if established, website and one useful contact route.

Product screens must be real and labelled with their actual status. Keep platform sign-in marks authentic and follow their own rules. Place individual social-media buttons inline; a brand guide does not establish ownership of a social profile.

Make the next thing consistent.

The kit includes normal and reversed symbols, outlined wordmarks and lockups, 16–512px PNGs, CSS and JSON tokens, the separately generated images, font licences and a usage note.

[data-brand="bwebo"][data-brand-theme="light"] {
  --brand-canvas: #F7F7F2;
  --brand-surface: #FFFFFF;
  --brand-ink: #242622;
  --brand-muted: #5B6156;
  --brand-action: #242622;
  --brand-on-action: #FFFFFF;
  --brand-tint: #E4E7DF;
  --brand-line: #7F8878;
  --brand-accent: #52654A;
  --brand-on-accent: #FFFFFF;
  --brand-error: #A22735;
  --brand-success: #326245;
  --brand-focus: #52654A;
}

[data-brand="bwebo"][data-brand-theme="dark"] {
  --brand-canvas: #1A1C19;
  --brand-surface: #252923;
  --brand-ink: #F4F5EF;
  --brand-muted: #C0C8B8;
  --brand-action: #F4F5EF;
  --brand-on-action: #1A1C19;
  --brand-tint: #343B30;
  --brand-line: #798671;
  --brand-accent: #C1D1B4;
  --brand-on-accent: #1A1C19;
  --brand-error: #FFADB6;
  --brand-success: #A7D5B6;
  --brand-focus: #C1D1B4;
}

Keep it useful. Keep it revisable.

Use the supplied SVG masters and semantic tokens. Keep brand, product and third-party marks distinct. Brand assets are for accurate identification and discussion, not implied endorsement. Fonts keep their open-source licences; third-party logos keep their owners’ rules. Print colours require a physical proof. This guide is not trademark clearance.

Review when the audience, product evidence, accessibility findings or founder direction changes. Compare comprehension, recognition and task completion with actual readers before claiming a preferred direction. Record a dated revision and preserve replaced assets as history.

What informed the system

The scope draws on agency practice and maintained design systems. The brand choices are specific to this work; those sources do not establish audience preference.

• Wolff Olins: strategy, identity, experience and governance
• COLLINS: connected identity systems
• Mozilla Protocol: shared foundations, distinct brands
• W3C: WCAG 2.2 accessibility requirements
• OpenAI: a reference for disciplined presentation; no marks or affiliation reused