Swiss Style

Un sous genre du minimalism.

Inspiré des mouvements modernistes des années 1910 et 1920 et de l'âge d'or de la typographie Suisse.

Représente le style des affiches de 1950, grand contraste des couleurs, texte mis en avant, asymétrique, Bauhaus.

Fonts

1. Helvetica Bold
2. Inter
3. Alfarn

4. IBM Plex Sans
5. Work Sans
6. Archivo Narrow Bold

7. Barlow Condensed Medium
8. Teko
9. DM Sans Upper

Palettes

#FF0000

#0057FF

#F8DE22

#00A94F

#FF6B00

#CC0000

#0033AA

#009BDF

#E5E5E5

#CFCFCF

#A8A8A8

#DD6464

#DE3D83

#151515

#000000

#FFFFFF

UI Assets

Classic Background

Bouton

background: #FF6B00;
border-radius: 12px;
padding: 1vh 2vh;
color: #151515;

Neutral Background

Lorem ipsum dolor sit amet elit. Exercitationem similique rem quas sunt quia inventore, distinctio animi.

width: 20%;
display: flex;
flex-direction: column;
background: #F2EDE8;
color: #00A94F;
line-height: 0.75;
font-size: 2vh;
span  {
    color: #FF6B00;            
}

Berlin Border

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font-family: "Teko", sans-serif;
line-height: 0.65;
background: #FFF;
color: #151515;
transform: rotate(-90deg);
border-right: 2vh solid #F8DE22;
border-top: 2vh solid #F8DE22;
border-left: 2vh solid #FF0000;
border-bottom: 2vh solid #FF0000;
box-shadow: inset -2vh 2vh 0 #0033AA, 
  inset 2vh -2vh 0 #00A94F;

Müller‑Brockmann

Hover me

background: #FF0000;
color: #FFFFFF;
padding: 6vh 4vh;
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(2rem, 5vw, 8rem);
line-height: 0.85;
text-transform: uppercase;
letter-spacing: -0.02em;
transition: all 0.15s ease;

:hover {
    background: #000;
    color: #FF0000;
}

Hover grid

Hover me

position: relative;
cursor: pointer;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2vh;
padding: 4vh;
transition: all 220ms ease;
z-index: 2;

:nth-of-type(1):before {
    background-color: #151515;        
}
:nth-of-type(2):before {
    background-color: #DE3D83;        
}
::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    transition: all 220ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

:hover {
    color: #FCFAF8;
    border: none;
}

:hover::before {
    width: 100%;
}

Gosth Text

Hover me

cursor: pointer;
background: #F8DE22;
color: #000000;
padding: 3vh 4vh;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: clamp(1.5rem, 4vw, 4rem);
text-transform: uppercase;
line-height: 0.9;
transition: all 0.15s ease;

:hover {
  background: rgba(0,0,0,0.06);
}

Animation Assets

Text Rotate

CLic me

padding: 1vh 0;
width: max-content;
height: max-content;
line-height: 0.7;
cursor: pointer;
font-family: 'Work Sans', sans-serif;
font-weight: 700;
font-size: clamp(1rem, 3vw, 4rem);
color: #00A94F;
text-transform: uppercase;
transform: rotate(-90deg);
transform-origin: left top;
white-space: nowrap;
transition: all 260ms ease;

:active {
    transform: rotate(0deg);
}

Cursor

Hover me

cursor: pointer;
font-weight: 500;
cursor: url("data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg'
    width='14' height='14'>
    <rect width='14' height='14' fill='blue'/>
</svg>") 0 0, auto;

Colored Text

C o l o r e d

font-family: 'Inter', sans-serif;
font-weight: 700;
text-transform: uppercase;
line-height: 0.9;
cursor: pointer;
transition: all 200ms ease;

span:nth-of-type(1) {
    color: #0057FF;
}
span:nth-of-type(2) {
    color: #FF0000;
}
span:nth-of-type(3) {
    color: #00A94F;
}
span:nth-of-type(4) {
    color: #F8DE22;
}
span:nth-of-type(5) {
    color: #FF6B00;
}
span:nth-of-type(6) {
    color: #009BDF;
}
span:nth-of-type(7) {
    color: #DE3D83;
}

:hover span:nth-of-type(1) {
    color: #DE3D83;
}
:hover span:nth-of-type(2) {
    color: #009BDF;
}
:hover span:nth-of-type(3) {
    color: #FF6B00;
}
:hover span:nth-of-type(4) {
    color: #00A94F;
}
:hover span:nth-of-type(5) {
    color: #FF0000;
}
:hover span:nth-of-type(6) {
    color: #F8DE22;
}
:hover span:nth-of-type(7) {
    color: #0057FF;
}

Hover Color

Hover me

position: relative;
display: flex;
align-items: center;
gap: 2vh;
cursor: pointer;
transition: all 100ms ease;

::before {
  content: "";
  width: 12vh;
  height: 1.2vh;
  background: #0057FF;
}
span {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 3rem);
  text-transform: uppercase;
  color: #151515;
}
:hover span {
  color: #0057FF;
}

Text-entrance

Hover me,

Texte minimaliste animé.

A employer en entrée sur le site ou à l'ouverture d'une card ou modale

.animate {
    font-family: "Montserrat", sans-serif;
    height: auto;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.animate-section:hover .animate1 {
    animation: fadeInUp 0.6s both;
    animation-delay: 0.2s;
}
.animate-section:hover .animate2 {
    animation: fadeInUp 0.6s both;
    animation-delay: 0.3s;
}

.animate-section:hover .animate3 {
    animation: fadeInUp 0.6s both;
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Hover 3D

Hover me

font-family: "DM Sans Upper", sans-serif;

animation:
  shadow-pop
  0.3s
  cubic-bezier(0.470, 0.000, 0.745, 0.715)
  both;
@keyframes shadow-pop {
  0% {
        box-shadow: 0 0 #F8DE22, 0 0 #F8DE22,
        0 0 #F8DE22, 0 0 #F8DE22;
        transform: translateX(0) translateY(0);
    }
    50% {
        box-shadow: 1px -1px #00A94F, 2px -2px #00A94F,
        3px -3px #00A94F, 4px -4px #00A94F;
        transform: translateX(-4px) translateY(4px);
    }
    100% {
        box-shadow: 1px -1px #009BDF, 2px -2px #009BDF,
        3px -3px #009BDF, 4px -4px #009BDF, 5px -5px #009BDF,
        6px -6px #009BDF, 7px -7px #009BDF, 8px -8px #009BDF;
        transform: translateX(-8px) translateY(8px);
    }
}

Créatif Assets

Robot Text Hover

ROBOT

opacity: 0;
transition: transform 0.05s steps(3, end);

span {
    caret-color: #000;
    caret-shape: block;
    opacity: 1;
}
:hover span {
    opacity: 0;
}
span:nth-of-type(1) {
    transition-delay: 0ms;
}
.robot-crea span:nth-of-type(2) {
    transition-delay: 100ms;
}
.robot-crea span:nth-of-type(3) {
    transition-delay: 200ms;
}
.robot-crea span:nth-of-type(4) {
    transition-delay: 300ms;
}
.robot-crea span:nth-of-type(5) {
    transition-delay: 400ms;
}

Swiss Grid

GRILLE SUISSE

display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2vh;
padding: 4vh;

span {
    background-color: #CC0000;
}

Swiss Title

Titre

font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(3rem, 10vw, 12rem);
line-height: 0.85;
text-transform: uppercase;
letter-spacing: -0.02em;
margin-left: 10%;
color: #00A94F;

Vertical Title

Titre

font-family: 'Work Sans', sans-serif;
font-weight: 700;
font-size: clamp(2rem, 6vw, 6rem);
text-transform: uppercase;
transform: rotate(-90deg);
transform-origin: left top;
white-space: nowrap;

Cut Title

Titre

background: #FF0000;
color: #FFFFFF;
padding: 4vh;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
font-family: 'Inter', sans-serif;
font-weight: 900;
text-transform: uppercase;

Massive Number

font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(6rem, 20vw, 25rem);
color: #FF0000;
line-height: 0.8;
text-transform: uppercase;

Fonts

Palettes

#FF0000

#0057FF

#F8DE22

#00A94F

#FF6B00

#CC0000

#0033AA

#009BDF

#E5E5E5

#CFCFCF

#A8A8A8

#DD6464

#DE3D83

#151515

#000000

#FFFFFF

UI Assets

Classic Background

Neutral Background

Berlin Border

Müller‑Brockmann

Hover grid

Gosth Text

Animation Assets

Text Rotate

Cursor

Colored Text

Hover Color

Text-entrance

Hover 3D

Créatif Assets

Robot Text Hover

Swiss Grid

Swiss Title

Vertical Title

Cut Title

Massive Number

Inspirations