Brand Style by DifferentGrowth

1. The logo

El logotipo muestra el texto "Different Growth" en una tipografía sans-serif en negrita. El diseño tiene un toque estilizado y único, donde partes de las letras están ligeramente fragmentadas o parecen "cortadas" a lo largo de las líneas verticales. Este efecto añade una sensación de modernidad y creatividad, sugiriendo temas de cambio, progreso o crecimiento no convencional.

El texto es negro con un fondo transparente, lo que le da un aspecto versátil adecuado para varios fondos y contextos.

La tipografía es fuerte y minimalista, alineándose bien con la estética del diseño digital contemporáneo.

Different GrowthDifferent Growth

Logo posibilities

Different GrowthDifferent Growth
Different GrowthDifferent Growth

Full logo presentation

Esta es nuestra presentación más formal.

Different GrowthDifferent Growth Mark
Different GrowthDifferent Growth Mark

Responsive logo

El logotipo adaptable debe usarse donde no haya suficiente espacio para leer correctamente el nombre de la empresa. Por ejemplo, en menús de sitios web móviles e imágenes de perfil en redes sociales.

Different GrowthDifferent Growth
Different GrowthDifferent Growth

Vertical presentation

Este formato funciona bien donde el logo o símbolo no puede usarse fácilmente.

2. Typography

Typeface: Geist

Geist encarna nuestros principios de diseño de simplicidad, minimalismo y velocidad, inspirándose en el reconocido movimiento de diseño suizo.

Con precisión, claridad y funcionalidad en su esencia, Geist mejora la experiencia visual.

Geist Extrabold

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
@
#
*
<
>
(
)
$
%
&
!
?

Geist Semibold

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
@
#
*
<
>
(
)
$
%
&
!
?

Geist Medium

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
@
#
*
<
>
(
)
$
%
&
!
?

Geist Regular

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
@
#
*
<
>
(
)
$
%
&
!
?

Geist Light

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
@
#
*
<
>
(
)
$
%
&
!
?

Geist Thin

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
@
#
*
<
>
(
)
$
%
&
!
?

Geist Mono Regular

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
@
#
*
<
>
(
)
$
%
&
!
?

Geist Mono Light

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
0
1
2
3
4
5
6
7
8
9
@
#
*
<
>
(
)
$
%
&
!
?

Type Options

Headline example

Weight:
Extrabold
Size:
36pt
Leading:
40pt
Tracking:
-0.025

Subheading example

Weight:
Semibold
Size:
30pt
Leading:
36pt
Tracking:
-0.025
Always underlined

Smaller headings example

Weight:
Bold
Size:
24pt
Leading:
32pt
Tracking:
-0.025

Smallest heading example

Weight:
Medium
Size:
20pt
Leading:
28pt
Tracking:
-0.025
an all cap option example
Weight:
Light
Size:
14pt
Leading:
20pt
Tracking:
0
Monostyled and uppercase

Body text

Weight:
Regular
Size:
16pt
Leading:
28pt
Tracking:
0

3. Iconography

Phosphor Icons

En Different Growth utilizamos el set de iconos @phosphor-icons para asegurar una iconografía coherente y moderna. Estos íconos son lineales, con un estilo minimalista y adaptable a diferentes tamaños y contextos.

Estilo de Íconos

El estilo de nuestros íconos es lineal y minimalista, en consonancia con nuestra identidad de marca y enfoque en el diseño limpio y funcional.

La iconografía es una parte esencial de nuestra identidad visual, ayudándonos a comunicar de forma clara y consistente en todos los puntos de contacto con el usuario.

Tamaños y Margen

Tamaño Pequeño:
16px con un margen de 6px.
Tamaño Grande:
24px con un margen de 12px.
Tamaño Muy Grande:
48px.

Recomendamos utilizar el tamaño pequeño para detalles en menús y el tamaño grande para secciones destacadas o pantallas de mayor tamaño.

Colores

Los íconos deben seguir la paleta de colores de la marca. En modo oscuro y claro, asegúrate de utilizar los colores que garanticen suficiente contraste para una visibilidad óptima.

4. Shapes

En Different Growth, todos los elementos están diseñados para mantener una apariencia moderna y amigable, alineada con nuestra identidad visual.

Elementos pequeños: 2px

Etiqueta

Elementos medianos: 8px

Elementos grandes: 12px

Tarjeta

Imágenes: 10px

Identación: radio + espaciado

Tarjeta

5. Color

Los colores principales de Different Growth consisten en una gama de blanco y negro, con un tono específico de negro llamado "stone". Esta paleta monocromática permite un diseño elegante y minimalista, alineado con nuestra identidad visual.

Además de los colores principales, utilizamos cuatro colores adicionales para comunicar distintos estados en la interfaz de usuario.

Estos colores de estado aseguran que los usuarios puedan entender visualmente el estado de la interacción y ayudan a mejorar la usabilidad de nuestras interfaces.

Main color palette

hex: #0c0a09cymk: 0%, 16.67%, 25%, 95.29%hsl: 20, 14.3%, 4.1%rgb: 12, 10, 9
hex: #1c1917cmyk: 0%, 10.71%, 17.86%, 89.02%hsl: 24, 9.8%, 10%rgb: 28, 25, 23
hex: #292524cymk: 0%, 9.76%, 12.2%, 83.92%hsl: 12, 6.5%, 15.1%rgb: 41, 37, 36
hex: #44403ccymk: 0%, 5.88%, 11.76%, 73.33%hsl: 30, 6.3%, 25.1%rgb: 68, 64, 60
hex: #57534ecymk: 0%, 4.6%, 10.34%, 65.88%hsl: 33.3, 5.5%, 32.4%rgb: 87, 83, 78
hex: #78716ccymk: 0%, 5.83%, 10%, 52.94%hsl: 25, 5.3%, 44.7%rgb: 120, 113, 108
hex: #a8a29ecymk: 0%, 3.57%, 5.95%, 34.12%hsl: 24, 5.4%, 63.9%rgb: 168, 162, 158
hex: #d6d3d1cymk: 0%, 1.4%, 2.34%, 16.08%hsl: 24, 5.7%, 82.9%rgb: 214, 211, 209
hex: #e7e5e4cymk: 0%, 0.87%, 1.3%, 9.41%hsl: 20, 5.9%, 90%rgb: 231, 229, 228
hex: #f5f5f4cymk: 0%, 0%, 0.41%, 3.92%hsl: 60, 4.8%, 95.9%rgb: 245, 245, 244
hex: #fafaf9cymk: 0%, 0%, 0.4%, 1.96%hsl: 60, 9.1%, 97.8%rgb: 250, 250, 249

Status colors

Destructivehex: #ef4444cymk: 0%, 71.55%, 71.55%, 6.27%hsl: 0, 84.2%, 60.2%rgb: 239, 68, 68
Successhex: #14b8a6cymk: 89.13%, 0%, 9.78%, 27.84%hsl: 160.1, 84.1%, 39.4%rgb: 16, 185, 129
Infohex: #6366f1cymk: 58.92%, 57.68%, 0%, 5.49%hsl: 173.4, 80.4%, 40%rgb: 20, 184 ,166
Warninghex: #f59e0bcymk: 0%, 35.51%, 95.51%, 3.92%hsl: 37.7, 92.1%, 50.2%rgb: 245, 158, 11