Brand System · v2

The Fufills brand system.

Colors, typography, logo usage, voice, and downloads. The complete operating system for representing Fufills correctly — for press, partners, and anyone building alongside us.

F-Mark447 × 258 viewBoxSVG · vector · scalable

01Identity

Calm operator authority.

One paragraph that should live in your head before you draw a single pixel.

Fufills is the COD Operating System for selling in Latin America. We serve cross-border merchants who need confirmation, fulfillment, delivery, collection, and remittance run as one system. Our voice is calm operator authority — infrastructure-grade, evidence-based, free of hype.

Visually we look closer to Linear × Ramp × Stripe × Mercury than to any consumer e-commerce, dropshipping, or crypto brand. We are the operators. Not the heroes. Not the entertainers. Not the disruptors.

Archetypes

◆Guide — we teach the path
◆Ruler — we enforce SOPs
◆Magician (light) — chaos → predictable

Anti-archetypes

✗Hero — we don't save
✗Jester — we don't entertain
✗Outlaw — we don't disrupt

02Colors

Eight tokens. Locked forever.

Click any hex to copy. Four primary anchors carry the brand. Four support tokens handle UI chrome. Nothing outside this palette is on-brand.

Primary palette

Fufills Violet

#4818E0

Primary brand color — dominant in hero surfaces, icon, CTAs

40–70% per composition

Solar Yellow

#FFE600

Accent only — emphasis, highlights, single hits

Under 15% per composition, never a background

Midnight

#0A0A14

Dark mode backgrounds, deep surfaces, body type on light

Anchor color, no opacity tricks

Pure White

#FFFFFF

Light surfaces, type on dark

Anchor color, the breathing room

Support tokens

Violet Deep

#2A0EA8

Gradient pair with Fufills Violet only

Subtle wash, never a flat fill

Op Background

#F4F4F6

Light page background, neutral surface

Default light body surface

Op Mid

#9CA3AF

Secondary text, dividers, mute states

Never as headline color

Op Surface

#1F2937

Card surfaces on midnight, panel chrome

Surface contrast on dark

Composition ratio rules

In every layout, the ratio between primary tokens should follow this rule. Yellow is the seasoning, never the meal.

Fufills Violet · 60%

Midnight · 25%

White · 13%

40–70%Fufills Violet

20–35%Midnight or White anchor

5–15%Surface contrast

<15%Solar Yellow — never background

Allowed gradient — only one

One gradient ships across the brand: Fufills Violet washing into Violet Deep. Nothing else. No rainbows, no nebulas, no aurora, no neon fades.

#4818E0linear-gradient(135deg, #4818E0 0%, #2A0EA8 100%)#2A0EA8

03Typography

Two stacks. Tight tracking. Tabular numbers.

Heavy condensed italic for display moments. Clean modern sans for everything else.

DisplayHero headlines, OG cards, large type moments

OPERATORS, NOT THEORISTS.

Style: Ultra-bold, slightly condensed, italic sans-serif
Weights: 800 · 900
Tracking: Tight (-0.02em)
Families: Druk Wide Italic, Sharp Grotesk Bold Italic, Migra Italic

BodyParagraphs, UI labels, navigation

Fufills runs confirmation, fulfillment, delivery, collection, and remittance across 16 LATAM markets as one COD Operating System.

Style: Clean modern geometric sans
Weights: 400 · 500 · 600 · 700
Tracking: Normal
Families: Inter, IBM Plex Sans, Söhne

Type scale

Modular scale, 1.25 (major third). Tabular figures in all dashboard contexts.

60px

Display XL

Operators

48px

Display L

Latin America

36px

Display M

COD Operating System

30px

Heading 1

Sixteen countries, one stack

24px

Heading 2

Confirmation. Delivery. Remittance.

20px

Heading 3

Built for cross-border merchants.

18px

Body L

Lead paragraph for editorial copy.

16px

Body

Default reading size. Inter 400.

14px

Body S

Captions, helper text, footnotes.

12px

One mark. Three contexts.

The F-mark scales perfectly as an SVG. Color is determined by background contrast, not preference.

On Midnight

#FFFFFF on #0A0A14

On Pure White

#4818E0 on #FFFFFF

On Fufills Violet

#FFFFFF on #4818E0

Clear space — minimum exclusion zone

The X measurement equals half the F-mark height. Maintain X on all four sides at every size. No type, image, or graphic element may enter this zone.

Do

✓Keep clear space equal to ½ the F-mark height on all sides
✓Use white on Midnight or Fufills Violet backgrounds
✓Use Fufills Violet on Pure White or Op Background
✓Use Solar Yellow only for emphasis moments, sparingly
✓Maintain the SVG vector at every size — never raster scale

Don't

✗Don't rotate, skew, stretch, or warp the F-mark
✗Don't apply gradients, glows, neon, or particle effects
✗Don't place over busy photographic backgrounds without an overlay
✗Don't reproduce in any color outside the locked palette
✗Don't add a tagline, dot, period, or extra mark to the wordmark

Minimum sizes

Below these sizes, legibility breaks. Use the favicon variant instead.

16px

Favicon

browser tab

24px

UI chrome

header nav

40px

Default

business cards, footers

80px

Comfortable

hero, OG cards

140px

Showcase

brand page, marketing

05Spacing

Base 4. Multiples through 96.

Every margin, gap, and padding is a multiple of 4 pixels. No exceptions. This is what makes the dashboard feel like infrastructure, not a website.

--space-1

4px

icon padding, inline gaps

--space-2

8px

tight stack, chip padding

--space-3

12px

compact paragraph rhythm

--space-4

16px

default body rhythm

--space-6

24px

card internal padding

--space-8

32px

section gap (compact)

--space-12

48px

section gap (default)

--space-16

64px

major section gap

--space-24

96px

hero / panel gap

06Voice

What we sound like.

Calm. Specific. Operator. Never hyped, never apologetic, never cute.

Calm operator authority

✓State what we run, what we measure, what we ship

✗Hype, urgency, exclamation marks

Infrastructure-grade

✓Specific SLAs, numbered countries, tabular figures

✗Generic "world-class," "best-in-class"

Evidence-based

✓Every claim cites a metric, market, or process

✗Adjectives without numbers

Guide + Ruler archetype

✓Teach the path, enforce the SOP

✗Hero framing, savior narrative, jester levity

Brand-line

Approved sign-offs, in order of priority.

Operators, not theorists.
The COD Operating System for Latin America.
Confirmation. Fulfillment. Collection. As one system.
90/90/7 — every market, every package, every settlement.

07Imagery

One mood per image. Three styles total.

Editorial flat illustration, documentary operations photography, or matte 3D. Pick one per asset. Never mix.

Category	Default style	Palette	Aspect
OG share card	Typographic hero	Midnight + violet + yellow accent	1200×630
Homepage hero	Documentary photography OR system diagram	Violet-dominant	16:9
Country launch hero	Typographic OR map diagram	Midnight + violet + yellow node	16:9
Blog header	Editorial flat illustration	Violet + midnight + one yellow hit	2:1
Feature page	Matte 3D UI mock or dashboard render	Violet UI on midnight or white	4:3
About / team	Documentary photography	Cool neutral light	as needed
Case study	Documentary photography of real operations	Cool neutral + violet object hit	16:9
Operator dashboard	Matte UI render	Violet on midnight	as needed

Universal style anchors

Every image must invoke at least three of these.

Calm operator authority

Infrastructure-grade, no hype

Editorial-flat OR documentary OR matte 3D

High contrast, hard edges, ordered composition

Generous negative space

Dashboard-coded — grids, callouts, tabular

Cool / neutral lighting

One coherent mood per image

08Downloads

Brand kit.

Every file you need to represent Fufills. Open assets — use them with the rules above, no permission needed.

F-mark · SVG · Violet

Need a custom format, a high-res PNG, or the brand kit as a ZIP? Email brand@fufills.com.

09Tokens

Drop these into your project.

Tailwind config or CSS variables — pick the format that matches your stack.

Tailwind v4 / v3tailwind.config.ts

extend: {
  colors: {
    'fufills-violet':      '#4818E0',
    'fufills-violet-deep': '#2A0EA8',
    'solar-yellow':        '#FFE600',
    'midnight':            '#0A0A14',
    'op-bg':               '#F4F4F6',
    'op-mid':              '#9CA3AF',
    'op-surface':          '#1F2937',
  },
  fontFamily: {
    display: ['Druk Wide Italic', 'Sharp Grotesk', 'system-ui'],
    sans:    ['Inter', 'IBM Plex Sans', 'system-ui'],
    mono:    ['IBM Plex Mono', 'ui-monospace'],
  },
}

Pure CSStokens.css

:root {
  --fufills-violet:      #4818E0;
  --fufills-violet-deep: #2A0EA8;
  --solar-yellow:        #FFE600;
  --midnight:            #0A0A14;
  --op-bg:               #F4F4F6;
  --op-mid:              #9CA3AF;
  --op-surface:          #1F2937;

  --space-1:  4px;
  --space-2:  8px;
  --space-4:  16px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

Systems over slogans.

If a generated image, prompt, or component contradicts this page, this page wins. If something here is wrong for a business reason, change this page first — never override it ad-hoc.

Talk to us brand@fufills.com

¿Nuevo en e-commerce?

Únete a la Academia Fufills

Playbooks gratuitos, cursos para operadores y la comunidad de merchants que operan COD en LATAM.

Únete a la Academia