our brand. use it right.

logos, colors, typography, and usage guidelines. everything you need to represent Ossotna consistently across any medium.

01 — logo

logo

the Ossotna wordmark with circular O symbol. toggle between dark and light to preview.

Ossotna logo

primary

Ossotna wordmark

the primary Ossotna wordmark with the circular O symbol. used across all contexts — website, packaging, social media, and print.

Ossotna O mark

mark

O mark

the standalone circular O symbol. used as a favicon, app icon, social avatar, or in tight spaces where the full wordmark doesn't fit.

02 — guidelines

logo guidelines

construction rules and usage do's and don'ts.

construction

Ossotna logo construction
1u safe area

rules

  • the circular O is the anchor — all spacing derives from its diameter (1u)
  • safe area of 1u minimum on all sides
  • minimum display height: 22px for digital, 8mm for print
  • always use the provided SVG — never recreate from a typeface
  • on photography or color, use white monochrome only
  • the wordmark and O symbol must never be separated

do

  • Use the white logo on dark backgrounds (preferred)
  • Maintain clear space equal to the height of the O on all sides
  • Use SVG for web and digital, PNG for print and presentations
  • Use the logo at minimum 22px height for legibility

don't

  • Recolor the logo — use white or black only
  • Stretch, rotate, or distort the wordmark
  • Add drop shadows, strokes, or gradients
  • Place the white variant on light backgrounds (or vice versa)
  • Recreate the wordmark in a different typeface

03 — colors

color system

our palette is built for dark interfaces. each story type has a defined accent color. tap the copy icon on any swatch to copy the hex.

Story Accents

Love Red

#BD0114

Love stories — the primary story type accent

Mother's Purple

#745EDA

Mother's Day stories — also used as selection and highlight accent

Friendship Blue

#255E8F

Friendship stories accent

Family Green

#2E8B57

Family stories accent

Workplace Gold

#CC901F

Workplace stories accent

Personal Slate

#484C5D

Personal stories accent

Neutrals

Black

#000000

Primary background — the foundation of every surface

White

#FFFFFF

Primary text, headings, and key UI elements

04 — typography

type system

four typefaces, each with a defined role. select a font below to explore its character set and type scale.

typeface

Classico

Bold 700

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( ) + = ? / . , ;

type scale — Classico Bold

Display56px / 700

Ossotna

H144px / 700

Your Forever Story

H232px / 700

Every story matters

H324px / 700

Our love story

Body Large20px / 700

Every story begins with a single moment.

Body16px / 700

We craft NFC-enabled cards in book-shaped boxes linking to digital stories.

Small14px / 700

Beirut, Lebanon · 350+ stories delivered

Caption12px / 700

STORY TYPE

branding

want a brand this intentional?

every color, every weight, every spacing rule on this page was designed by maxiphy. they can do the same for your company — logo, color system, typography, and a full brand guidelines document.

explore maxiphy