Last updated.
May.15.2025
Brand strategy
Company overview
Company name:
Moffin Co.
Founded:
2021
Headquarters:
Guadalajara, Mexico
Mission:
Transforming how businesses access and use critical data.
Vision:
A world where every business can make data-driven decisions with complete confidence, regardless of technical resources or size.
Core offering:
Moffin provides a unified data integration platform that connects multiple critical information sources through a single access point.
Brand story
Origin:
Born from real-world frustrations with scattered data and complex integrations in fintech.
Why now?:
Digital transformation is accelerating the need for structured, real-time data access. Moffin simplifies this with a single platform.
Evolution:
From consulting tax records → to being a robust data platform providing a trustworthy financial picture of individuals and orgs.
Values:
Trust – built through transparency and delivery
Security – enterprise-grade data protection
Confidence – accurate info at the right time
Stability – infrastructure built for scale
Opportunity Access – data-driven growth
Sustainable Growth – long-term thinking
Tone of voice:
Professional, not corporate
Clear and grounded – no jargon
Confident, not arrogant
Tech-savvy, but human
Insightful, not overwhelming
Brand marks
Brand mark definition
Evolving the muffin shape:
The token version of our brand mark has been further refined to better embody our brand narrative. The final design evokes a data card—similar to those found in cameras and devices—creating a meaningful connection to Moffin's data-focused ethos.
Brand mark variants
Brand mark spacing
Safe zone
Spacing & padding.
The Moffin brand mark utilizes precise spacing guidelines to ensure visual harmony and recognition across all applications. A protected "safe zone" surrounds the logo, providing essential breathing room that preserves its integrity and impact.
The spacing between the symbol and wordmark is calibrated using the circular form within the data card icon as a measuring unit. This creates a natural, balanced relationship between elements that feels visually cohesive.
Brand mark guidelines
Restrictions
Do not change the symbol size inside the container.
Do not change the symbol position inside the container.
Do not rotate the symbol inside the container.
Do not change the container radio angle.
Do not change the container axis angle.
Do not change the symbol position inside the brand use.
Color palette
Main (Brand)
Prussian blue
Background:
Developed in Berlin (1704), Prussian Blue was one of the first synthetic pigments and quickly gained prominence in European painting. It was famously embraced by Picasso during his Blue Period, where it symbolized melancholy, introspection, and emotional depth. The color’s name originates from its use in Prussian military uniforms, symbolizing discipline and authority.
Semiotics:
Prussian Blue conveys depth, intelligence, and institutional stability. In Moffin’s system, it anchors the brand as a trusted and data-literate foundation. It balances analytical precision with creative confidence, positioning the brand as both reliable and expressive.
Uses:
50-200: Section backgrounds, subtle indicators, data visualization fills
300-500: Secondary buttons, active states, charts elements
600-700: Dark brand identifier, main buttons, key UI components
700-950: High-contrast text, focus states, emphasis elements
Secondary
Magic mint
Background:
The name “Magic Mint” was popularized in Crayola’s Magic Scent crayon line in the 1990s, evoking a cool, fresh feel.
Semiotics:
It’s closely associated with feelings of freshness, renewal, growth, and optimism. It projects a strong balance between calmness and vitality. It projects a strong sense of positive feeling, which is why it's used to represent successful outcomes in the Moffin-verse.
Uses:
50-300: Success state backgrounds, positive trend indicators
400-600: Primary accent color, completion indicators, highlight elements
700-950: Contrast elements against light backgrounds, specialized icons
Pink Flamingo
Background:
Pink Flamingo was also included in Crayola’s Magic Scent crayon series (1990s)—evoking playful, kitschy charm and the flamboyance of actual flamingos. In design and fashion, the color “Flamingo Pink” or “Pink Flamingo” has been used to describe a range of vivid, cool-leaning pinks often associated with tropical aesthetics, pop culture, and retro visual identities.
In interior design, Behr and Benjamin Moore have each produced their own “Pink Flamingo” shades—usually lighter or pastel variations for accent walls.
Semiotics:
Energy, attention, and action, with a soft, nostalgic undertone. In the Moffin context, it serves both expressive marketing needs and subtly flags subpar or negative states in a non-punitive, useful and accessible manner.
Uses:
50-300: Notification backgrounds, alert containers
400-600: Critical information highlights, important callouts
700-950: Emphasis text, action-required indicators
Neutral
Chino
Background:
“Chino” refers to the muted khaki-like cotton fabric developed for British and U.S. military uniforms in the 19th century. The term evolved into a color shorthand for earthy, desaturated tans commonly found in military attire and utilitarian fashion. Today, Chino tones are used in design for grounding, neutrality, and timeless functionality.
Semiotics:
Sophistication, warmth, and foundation—Chino acts as the grounding element in Moffin's palette, humanizing the technical interface and creating a comfortable environment for extended data analysis sessions.
Chino provides a soft yet structured base for visual hierarchy and content framing, especially effective when paired with expressive or vivid tones.
Uses:
50–200: Subtle backgrounds, low-emphasis containers, muted data fills
300–500: High-visibility surfaces, cards, key layout zones
600: Elevated UI blocks, visual groupings, anchors beneath interactive zones
700–950: Depth layers, side panels, material backdrops, dark-mode surfaces
Alto
Background:
Alto is recognized in color naming databases (e.g., Resene Paints) and digital systems like X11/Web Colors. It refers to a neutral gray palette with cool undertones—often used in UI systems, modern architecture, and monochromatic editorial layouts.
In art and industrial design, grays in the Alto family are essential for contrast, readability, and spatial hierarchy.
Designers such as Dieter Rams, Massimo Vignelli, and Yasuko Furukawa have leaned heavily on neutral systems like Alto to deliver timelessness and legibility.
Semiotics:
Objectivity, clarity, and neutrality—Alto serves as the typographic backbone of the Moffin system, bringing balance and discipline to expressive or colorful interfaces.
Uses:
50–200: Neutral surfaces, subtle containers, background fills, ghost elements
300–500: Form outlines, separators, disabled states, tooltips
600: Metadata, tertiary labels, icons on light backgrounds
700–950: Primary body text, secondary text, captions, iconography, monochrome UI elements
Color use guidelines
Fundamentals
Bg: #63D4FA (P.Blue 400)
#143054 (P.Blue 950)
Bg: #143054 (P.Blue 950)
#143054 (P.Blue 950)
The main color palette is Prussian Blue. The brand mark is rendered on #400 and #950
#143054 (P.Blue 950)
#143054 (P.Blue 950)
#143054 (P.Blue 950)
#143054 (P.Blue 950)
These are the other color palette combinations for the brand marks. Magic Mint and Pink Flamingo. Same with Prussian Blue, the brand marks should be rendered in #400 and #950.
These are all the allowed combinations to render the brand marks using monochromatic and neutral backgrounds.
Restrictions
Do not combine color palettes for brand mark using.
Do NOT attempt to use gradients for the brand marks.
Do not use white as background for light color brand mark uses.
Do not use black as background for dark color brand mark uses.
Do not use effects like shadows or blur the brand marks.
Do NOT mix different color palettes in combined uses.
#9A0E83 (P.Flamingo 950)
Do not use other values to render the brand marks.
Do not change the brand marks opacity.
Typography
Institutional typeface
Background:
Designed by Christian Schwartz in 2009, Graphik was inspired by mid-century Swiss and German sans-serifs. Its origins connect to rationalist design principles that prioritize clarity and function over decorative elements.
Semiotics:
Authority with approachability—Graphik's balanced proportions and clean lines communicate Moffin's professional credibility while remaining warm and accessible. The typeface embodies the precision and reliability that define Moffin's data services.
Uses:
Regular: Primary body text, interface elements, and general content
Medium: Headings, subheadings, and emphasis within body text
Additional weights used strategically for visual hierarc
Complementary typeface
Background:
Created by Mark Bloom (Mash Creative) and Joe Leadbeater, Aeonik Mono is a contemporary monospaced typeface with roots in early computing and data terminals. Its fixed-width design references the technical foundations of data processing systems.
Semiotics:
Technical precision and data integrity—As a monospaced font, Aeonik Mono visually reinforces Moffin's data-focused ethos. Each character occupying the same horizontal space creates a structured rhythm that reflects how Moffin organizes information into consistent, reliable formats.
Uses:
Regular: Data display, markers, data attributes
Medium: Highlighted data, highlighted text
Typeface set
Spacing & padding.
The Moffin brand mark utilizes precise spacing guidelines to ensure visual harmony and recognition across all applications. A protected "safe zone" surrounds the logo, providing essential breathing room that preserves its integrity and impact.
The spacing between the symbol and wordmark is calibrated using the circular form within the data card icon as a measuring unit. This creates a natural, balanced relationship between elements that feels visually cohesive.
Display
Aeonik Mono Regular
Size: 56px / 3.5 Rem
Letter: -.08 em
Line: 1.1 em
Heading 1
Graphik Regular
Size: 64px / 4 Rem
Letter: -.04 em
Line: 1.1 em
Heading 2
Graphik Regular
Size: 52px / 3.25 Rem
Letter: -.02 em
Line: 1.1 em
Heading 3
Graphik Regular
Size: 40px / 2.5 Rem
Letter: -.02 em
Line: 1.2 em
Heading 4
Aeonik Mono Regular
Size: 32px / 2 Rem
Letter: -.02 em
Line: 1.2 em
Body display
Graphik Regular
Size: 32px / 2 Rem
Letter: -.02 em
Line: 1.2 em
Body display bold
Graphik Medium
Size: 32px / 2 Rem
Letter: -.02 em
Line: 1.2 em
Body large
Graphik Regular
Size: 24px / 1.5 Rem
Letter: -.02 em
Line: 1.2 em
Body large bold
Graphik Medium
Size: 24px / 1.5 Rem
Letter: -.02 em
Line: 1.2 em
Body medium
Graphik Regular
Size: 20px / 1.25 Rem
Letter: -.02 em
Line: 1.2 em
Body medium bold
Graphik Medium
Size: 20px / 1.25 Rem
Letter: -.02 em
Line: 1.2 em
Body small
Graphik Regular
Size: 16 px / 1 Rem
Letter: -.02 em
Line: 1.2 em
Body small bold
Graphik Medium
Size: 16 px / 1 Rem
Letter: -.02 em
Line: 1.2 em
Label huge
Aeonik Mono Regular
Size: 40 px / 2.5 Rem
Letter: -.04 em
Line: 1.2 em
Label large
Aeonik Mono Regular
Size: 24 px / 1.5 Rem
Letter: -.04 em
Line: 1.2 em
Label large bold
Aeonik Mono Semibold
Size: 24 px / 1.5 Rem
Letter: -.04 em
Line: 1.2 em
Label medium
Aeonik Mono Regular
Size: 18 px / 1.13 Rem
Letter: -.04 em
Line: 1.2 em
Label medium
Aeonik Mono Semibold
Size: 18 px / 1.13 Rem
Letter: -.04 em
Line: 1.2 em
Label small
Aeonik Mono Regular
Size: 16 px / 1.13 Rem
Letter: -.02 em
Line: 1.2 em
Label small
Aeonik Mono Semibold
Size: 16 px / 1.13 Rem
Letter: -.02 em
Line: 1.2 em
Type use restrictions
Forget scattered systems. Moffin brings all your data together credit bureaus, government sources, and more into one powerful platform.
Do NOT combine different color palettes for text use.
Forget scattered systems. Moffin brings all your data together credit bureaus, government sources, and more into one powerful platform.
Do not combine type sizes in the same text container.
Forget scattered systems. Moffin brings all your data together credit bureaus, government sources, and more into one powerful platform.
Do NOT let paragraphs go longer than 100 characters.
Brand marks downloads
Brand applications
ASCII visuals
Complementing the brand with eye-catching visuals:
The Moffin brand marks represent the essence of what Moffin is: An accessible and friendly data platform. We chose ASCII art to complement the brand ethos to portrait the human aspect of the platform in a way that made sense with the brand look and feel. ASCII art in the Moffin visual system is used to provide depth and texture to marketing graphics and pairs seamlessly with the high-level message.
User interface
Data sources
12
Fetching data...
Thomas Anderson's request
12
ID check:
(Positive)
Credit check:
(6.5/10)
Tax record
(8.9/10)
Approve loan
More than
1,000,000
queries processed
YoY Growth Revenue
2023 > 2024
200,000
Growth
Starting at
$20
/
Month
Includes
100,000
Tokens
Data points analysed
100k+
Identity declaration
01
Identity validation
02
Tax record
03
Judicial record
04
Credit report
05
Accounts ledger
06
Conclusions
07
Client Profile
12
Successful payments:
(103)
Current debt:
($1,324,590.03)
Active accounts:
(3)
Fetching data...
User interface style.
The type of interface that Moffin strives for is a simple, functional one, no frills, but with a uniqueness element combining the different brand elements in a minimalistic, brutalist way.
Brand graphics
Brand graphics visualizer.
Graphic examples of ensembles of the different brand elements to represent the complete Moffin visual messaging.