Working guidelines · October 2026
Randy See
A curious mind. An open invitation.
An identity for exploring ideas, sharing what I learn, and making useful things. Personal, thoughtful and open to change.
These guidelines and assets present the new direction. The rest of the websites retain their current identity while the system is reviewed.
In this guide
What the identity stands for.
Randy explores ideas, shares what he learns, and builds useful things.
RandySee is the person-led home for ideas, research and work. bwebo is the independent company Randy is building. Personal demonstrations and company products have different homes.
Who we are designing for
Curious readers
A clear starting point, without needing to know the terminology.
Lead with Randy and everyday questions. Offer a short introduction before deeper reading.
Peers and collaborators
Enough substance to understand, challenge or build on the work.
Show sources, real projects and what remains uncertain. Make it easy to send a thoughtful note.
Participants and supporters
A clear understanding of what participation or support involves.
State invitation, consent and availability plainly. Interest does not imply access or a payment commitment.
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.
A complete, single-colour R is a personal initial. Keep the name visible at a first encounter. The mark carries no claim about a complete theory or privileged viewpoint.
Randy See
Randy See
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 daylight do most of the work. Cobalt guides the eye; a little yellow brings warmth. Keep reading surfaces calm.
Cobalt
#294DDBPrimary actions, links and identity emphasis.
Blue-black
#17233DHeadings and long-form text on light surfaces.
Daylight
#FAFBFFThe main reading canvas.
Sky
#E7EDFFQuiet panels and illustration backgrounds.
Soft yellow
#F4DB7DSmall highlights with blue-black text; never white text.
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.
Newsreader gives ideas room and an unmistakably personal voice. DM Sans keeps navigation, captions and controls clear. Use real text, moderate contrast and sentence case.
Aa. Ideas take shape.
Good work starts with paying attention. Give people an understandable way in, enough detail to go further, and room to question what they find.
Newsreader Variable for headings · DM Sans Variable for supporting text. Served locally; open-source font licences are included in the kit.
- 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.
Clear controls. Useful feedback.
The disabled button demonstrates an unavailable action. The controls below are a local interaction specimen.
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.
Cobalt optical glass, white paper and a small yellow accent. Soft upper-left daylight, a three-quarter view and generous negative space. Images suggest different ways of seeing and making; they are not scientific diagrams.
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.
Sound like a person.
Speak in the first person. Be curious, candid and generous. Explain a technical idea before relying on its name. Welcome disagreement without pretending every claim is equally supported.
Avoid: “A definitive theory of everything.”
Curiosity needs visible uncertainty.
Avoid: “Scientifically proven to explain everyone.”
Describe the actual status of APD.
Avoid: “Unlock exclusive access to my genius.”
Invite people in as equals.
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.
Randy See
What becomes possible when we look again?Editorial cover specimen · randysee.comFor 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.
View CSS tokens
[data-brand="randysee"][data-brand-theme="light"] {
--brand-canvas: #FAFBFF;
--brand-surface: #FFFFFF;
--brand-ink: #17233D;
--brand-muted: #515E78;
--brand-action: #294DDB;
--brand-on-action: #FFFFFF;
--brand-tint: #E7EDFF;
--brand-line: #828EA8;
--brand-accent: #F4DB7D;
--brand-on-accent: #17233D;
--brand-error: #A22735;
--brand-success: #21613F;
--brand-focus: #294DDB;
}
[data-brand="randysee"][data-brand-theme="dark"] {
--brand-canvas: #111A2E;
--brand-surface: #19253E;
--brand-ink: #F4F6FF;
--brand-muted: #BBC6DF;
--brand-action: #B7C8FF;
--brand-on-action: #111A2E;
--brand-tint: #243455;
--brand-line: #71819F;
--brand-accent: #F4DB7D;
--brand-on-accent: #17233D;
--brand-error: #FFADB6;
--brand-success: #9ED8B6;
--brand-focus: #B7C8FF;
}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.