Official brand reference

FOBLO opens doors.

FOBLO helps brands, agencies and professional creators move opportunities into clear, well-run collaborations.

This page is the source of truth for FOBLO’s visual identity.

“Opens doors.” is the current brand idea—not a mandatory product tagline or logo lockup. Product messaging should stay specific to its context.

Professional

Built for real operational work.

Modern

Current, useful and intentional.

Human

Clear language and considerate details.

Clear

Hierarchy before decoration.

Confident

Direct without becoming loud.

Opportunity-driven

Every surface helps people move forward.

01 / Logo

One mark. Three intentional treatments.

Violet is the primary brand treatment. Near-black is the neutral treatment. White is the inverse treatment. Choose by surface and contrast—not personal preference.

Primary · Violet

FOBLO

Use consistently for the surface—not as a screen-by-screen stylistic choice.

Neutral · Near-black

FOBLO

Use consistently for the surface—not as a screen-by-screen stylistic choice.

Inverse · White

FOBLO

Use consistently for the surface—not as a screen-by-screen stylistic choice.

Icon

Minimum digital size: 24px

Use the F icon when the full name cannot fit or the FOBLO context is already established.

Clear space & size

FOBLO

Keep clear space approximately equal to the height of the “F”. Minimum wordmark width: 80px.

Do

Use the violet mark on clean, high-contrast light surfaces.
Use near-black where a neutral brand presence is needed.
Use white only on sufficiently dark backgrounds.
Keep proportions, spacing and letterforms intact.

Do not

Stretch, rotate, outline or add shadows.
Change letters, spacing or proportions.
Apply random gradients or unauthorized colors.
Place violet on low-contrast backgrounds.

02 / Color

Neutral by default. Violet with purpose.

Aim for roughly 80% neutral surfaces and 20% accent. Violet directs attention; it should not compete with itself.

Primary Violet

var(--landing-violet)

HEX: #7C58FF
RGB: 124, 88, 255
HSL: 253°, 100%, 67%
OKLCH: 0.61 0.25 286

Primary actions, active navigation, focus and brand emphasis.

Primary Indigo

var(--landing-indigo)

HEX: #643EFA
RGB: 100, 62, 250
HSL: 252°, 95%, 61%
OKLCH: 0.52 0.24 283

Depth, supporting accents and approved gradients.

Near Black

var(--landing-ink)

HEX: #0F111A
RGB: 15, 17, 26
HSL: 229°, 27%, 8%
OKLCH: 0.18 0.02 277

Dark navigation, high-contrast text and inverse surfaces.

White

var(--card)

HEX: #FFFFFF
RGB: 255, 255, 255
HSL: 0°, 0%, 100%
OKLCH: 1 0 0

Cards, clean fields and inverse marks.

Cool Gray

var(--landing-cool)

HEX: #F4F5F7
RGB: 244, 245, 247
HSL: 220°, 13%, 96%
OKLCH: 0.97 0.006 275

Quiet page bands and secondary surfaces.

Muted Gray

var(--muted-foreground)

HEX: #787A85
RGB: 120, 122, 133
HSL: 231°, 5%, 50%
OKLCH: 0.52 0.015 277

Supporting copy, metadata and subdued labels.

Success

var(--success)

HEX: #2E7A56
RGB: 46, 122, 86
HSL: 152°, 45%, 33%
OKLCH: 0.48 0.1 158

Positive and completed states only.

Warning

var(--warning)

HEX: #B47E1F
RGB: 180, 126, 31
HSL: 38°, 71%, 41%
OKLCH: 0.58 0.12 75

Attention and approaching-deadline states.

Error

var(--destructive)

HEX: #D93A36
RGB: 217, 58, 54
HSL: 1°, 68%, 53%
OKLCH: 0.55 0.19 27

Errors and destructive actions only.

Approved gradients

Use sparingly in public emphasis and small brand moments—not as a default page background.

Violet depthPrimary Indigo → Electric Violet

Primary sweepPrimary Violet → Primary Indigo

03 / Typography

Sora leads. Manrope works.

Use Sora for headings and brand moments. Use Manrope for body copy and interface text. Do not introduce another brand typeface without approval.

SORA · HEADINGS

Open the right door.

Weights 600–800. Short, direct lines. Letter spacing stays at 0.

MANROPE · BODY & UI

Run creator opportunities with clear applications, collaboration progress and communication in one place.

Weights 400–700. Sentence case. Prioritize scanability.

Role	Size	Weight	Example
Display	56–72px	700–800	FOBLO opens doors.
Page title	36–48px	700	Creator applications
Section title	28–36px	700	Active collaborations
Card title	16–20px	600–700	Sushi 7 Food Creators
Body	14–16px	400–600	Relevant information stays concise.
Label	12–14px	600–700	APPLICATION STATUS

04 / Foundations

A compact, predictable rhythm.

Primitive values feed semantic tokens, and semantic tokens feed components. New product work must reuse that chain rather than hardcoding visual values.

Spacing scale

4px

8px

12px

16px

24px

32px

48px

64px

Radius

Small

Medium

Large

Pill

Cards use defined, generous radii. Pills are reserved for compact statuses, tags and binary choices.

None

Use only when elevation communicates hierarchy.

Subtle card

Use only when elevation communicates hierarchy.

Floating

Use only when elevation communicates hierarchy.

TOKEN FLOW

primitive brand valuesemantic roleproduct component

oklch(0.61 0.25 286) → --primary / --brand → Button

05 / Components

The system should prove itself live.

These examples use the same components and semantic tokens as the product. Interaction states must remain recognizable, accessible and calm.

Buttons

Hover each enabled control to inspect its real hover state. Visible focus rings are mandatory for keyboard use.

Forms

InputSearch

SelectErrorEnter a valid HTTPS URL.Notes

Selected checkboxEnabled toggleDisabled toggle

OPPORTUNITY

Sushi 7 Food Creators

Active

Cards group one meaningful item. Avoid cards inside cards and decorative containers around whole page sections.

Status language

DraftNewSelectedCompletedNeeds attentionCancelled

Color supports the label; it never replaces it. Keep semantic colors restrained and consistent.

Iconography

SearchDownloadExternalAlert

Use Lucide icons with consistent stroke weight. Prefer familiar symbols; label unfamiliar actions with a tooltip or visible text.

06 / Product surfaces

One brand, tuned to the work.

FOBLO remains recognizable across operational workspaces and public moments, while density and emphasis respond to the audience.

Business Workspace

Near-black sidebar, light content, violet active states, compact operational density.

FOBLO

Welcome back, Anna

Professional, personal, mobile-first and calm. Use universal language where participant types differ.

Clear opportunity.
Clear next step.

Brand-led hierarchy, one primary action, real imagery and no fabricated proof or generic stock.

Public-page principles

Lead with the real brand, person, opportunity or product—not an abstract promise.

Keep the next section visible and the primary action obvious on every screen size.

Use real product fragments and verified information. Never fabricate metrics or testimonials.

Protect privacy by default. Public pages expose only explicitly approved information.

07 / Motion & imagery

Movement clarifies. Imagery proves.

Motion should reinforce hierarchy or feedback. Imagery should show the actual person, brand, product or work whenever inspection matters.

Subtle and purposeful

Fast feedback, gentle entrance, clear state change. Avoid constant decorative motion.

@media (prefers-reduced-motion: reduce)

Real, current and relevant

Use current FOBLO interface captures, authentic creator work and real campaign imagery. Avoid generic stock, fake dashboards and invented performance claims.

08 / Voice & terminology

Clear, concise, confident, human.

Write for people doing real work. Say what happened, what is needed and what comes next.

Your application was submitted.

We’ll show any status changes here.

AVOID

Amazing! Your journey has begun 🚀

Avoid hype, ambiguity and decorative language in operational moments.

Use	Meaning	Avoid
FOBLO	Official brand name	FOBLA, Foblo
Opportunity	A brand or agency brief open to creators	Job, gig, listing
Application	A creator’s response to an Opportunity	Bid, entry
Collaboration	Selected work between a business and creator	Deal, contract
Personal Workspace	A participant’s private FOBLO environment	Creator portal
FOBLO Network	Consent-based private discovery	Marketplace, directory

09 / Assets

Only real, approved files.

These are the brand assets currently available in the product. No placeholder downloads or reconstructed source files are presented as official.

FOBLO F icon

SVG · vector app icon

FOBLO app icon

PNG · 512 × 512

FOBLO touch icon

PNG · 180 × 180

FOBLO social image

JPG · 1200 × 630

Source-file note

Full FOBLO wordmark files in SVG and PNG are not currently present, so they are not offered here. Request approved master artwork before producing partner files, print work or lockups.

Implementation reference

Use existing semantic tokens. Do not copy a visual value into a component.

:root {
  --landing-violet: oklch(0.61 0.25 286);
  --landing-ink: oklch(0.18 0.02 277);
}

.public-page {
  --primary: oklch(0.61 0.25 286);
  font-family: var(--font-landing);
}

h1 { font-family: var(--font-landing-heading); }