UI Kit

Summary of all styles and components

(

1.

)

Typography

In the project we used two open source typefaces. Bricolage Grotesque and Roboto Serif. Both of those font families are free for commercial use.

Bricolage Grotesque

Font weight: ExtraBold 800

https://fonts.google.com/specimen/Bricolage+Grotesque/about


Roboto Serif

Font weight: ExtraLight 200

https://fonts.google.com/specimen/Roboto+Serif/about





Display

Display 1

Display 2

Display 3

Display 4

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Paragraph

Paragraph italic

Paragraph pre-title

Paragraph leyend

Stories typography

Heading Article

(

2.

)

Logo

Adaptable logo with modern typefaces for a cohesive and recognizable visual identity across all platforms.

Color · Small in header

White · Small in footer

(

3.

)

Colors

Colours are easily changeble from styles panel in Framer.

Black color - Black

#212121

Dark grey color - Dark Grey

#2C2C2A

Light grey color - Light Grey

#F0F0F0

White background color - White

#FFFFFF

Accent color - Light Blue

#3986A5

(

4.

)

Decorations

SVG illustrations for text underlines and highlights, enhancing website visuals.

Undeline decoration - Type 1

Undeline decoration - Type 2

Undeline decoration - Type 3

Highlight - Type 1

(

5.

)

Arrows

Customizable arrow icons for intuitive navigation and interactive elements, enhancing user experience.

Arrow - Black

Arrow - White

General components

Summary of all styles and components

(

1.

)

Navbar

Streamlined navbar for easy navigation, fully responsive and customizable to fit your website's unique style.

Two deployment variations of this component exist, catering to different screen types.

This section displays the mobile version.

(

2.

)

Cookie settings

Customizable module for users to manage cookie preferences, enhancing privacy and compliance.

(

3.

)

Footer

Customizable footer with dynamic links and information blocks, ensuring a cohesive end to your web pages.

Three deployment variations of this component exist, catering to different screen types.

This section displays the Tablet version.

Custom components

Summary of all styles and components

(

1

)

Loader

This is an animated loader. You can update it in components.

Investing in

exceptional

founders

(

2.

)

Highlight Float Card

Floating cards featuring country images and key fund insights, creating an engaging visual storytelling experience.

Two deployment variations of this component exist, catering to different screen types.

This section displays the desktop version.

Highlight Float Card

Title

Description

(

3.

)

FAQ

Interactive FAQ component for quick answers to common questions, improving user engagement and support.

FAQ - Items

What type of companies does 30N Ventures invest in?

How does 30N Ventures support its portfolio companies?

Can startups from outside LatAm apply for investment?

(

4.

)

Storytelling Steps

Step-by-step frames with graphics, titles, and text for illustrating the fund's mission journey, enhancing narrative clarity.


Two deployment variations of this component exist, catering to different screen types.

This section displays the mobile version.

Storytelling Steps

(

5.

)

Core-team card

Cards showcasing core team members with bio and role information, fostering trust and team transparency.

Three deployment variations of this component exist, catering to different screen types.

This section displays the Small version.

Core-team card

Paula Giraldo - Partner

Partner

Paula Giraldo

Salvador Said - Managing Partner
Daniel Kranzler - Senior Partner
Renato Picard - Venture Partner
Matias Alcalde - CFO
Carla de Kartzow - Business & Ops. Specialist
Mario Henriquez - Venture Capital Fellow
(

6.

)

Team card

Team cards displaying all fund members, designed to promote team unity and individual expertise.

Two deployment variations of this component exist, catering to different screen types.

This section displays the Default version.

Team card

Role

Name

-

Description 1

-

Description 2

UI Kit

Summary of all styles and components

(

1.

)

Typography

In the project we used two open source typefaces. Bricolage Grotesque and Roboto Serif. Both of those font families are free for commercial use.

Bricolage Grotesque

Font weight: ExtraBold 800

https://fonts.google.com/specimen/Bricolage+Grotesque/about


Roboto Serif

Font weight: ExtraLight 200

https://fonts.google.com/specimen/Roboto+Serif/about





Display

Display 1

Display 2

Display 3

Display 4

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Paragraph

Paragraph italic

Paragraph pre-title

Paragraph leyend

Stories typography

Heading Article

(

2.

)

Logo

Adaptable logo with modern typefaces for a cohesive and recognizable visual identity across all platforms.

Color · Small in header

White · Small in footer

(

3.

)

Colors

Colours are easily changeble from styles panel in Framer.

Black color - Black

#212121

Dark grey color - Dark Grey

#2C2C2A

Light grey color - Light Grey

#F0F0F0

White background color - White

#FFFFFF

Accent color - Light Blue

#3986A5

(

4.

)

Decorations

SVG illustrations for text underlines and highlights, enhancing website visuals.

Undeline decoration - Type 1

Undeline decoration - Type 2

Undeline decoration - Type 3

Highlight - Type 1

(

5.

)

Arrows

Customizable arrow icons for intuitive navigation and interactive elements, enhancing user experience.

Arrow - Black

Arrow - White

General components

Summary of all styles and components

(

1.

)

Navbar

Streamlined navbar for easy navigation, fully responsive and customizable to fit your website's unique style.

Two deployment variations of this component exist, catering to different screen types.

This section displays the mobile version.

(

2.

)

Cookie settings

Customizable module for users to manage cookie preferences, enhancing privacy and compliance.

(

3.

)

Footer

Customizable footer with dynamic links and information blocks, ensuring a cohesive end to your web pages.

Three deployment variations of this component exist, catering to different screen types.

This section displays the Tablet version.

Custom components

Summary of all styles and components

(

1

)

Loader

This is an animated loader. You can update it in components.

Investing in

exceptional

founders

(

2.

)

Highlight Float Card

Floating cards featuring country images and key fund insights, creating an engaging visual storytelling experience.

Two deployment variations of this component exist, catering to different screen types.

This section displays the desktop version.

Highlight Float Card

Place

Title

Description

(

3.

)

FAQ

Interactive FAQ component for quick answers to common questions, improving user engagement and support.

FAQ - Items

What type of companies does 30N Ventures invest in?

How does 30N Ventures support its portfolio companies?

Can startups from outside LatAm apply for investment?

(

4.

)

Storytelling Steps

Step-by-step frames with graphics, titles, and text for illustrating the fund's mission journey, enhancing narrative clarity.


Two deployment variations of this component exist, catering to different screen types.

This section displays the mobile version.

Storytelling Steps

(

5.

)

Core-team card

Cards showcasing core team members with bio and role information, fostering trust and team transparency.

Three deployment variations of this component exist, catering to different screen types.

This section displays the Small version.

Core-team card

Paula Giraldo - Partner

Partner

Paula Giraldo

Salvador Said - Managing Partner
Daniel Kranzler - Senior Partner
Renato Picard - Venture Partner
Matias Alcalde - CFO
Carla de Kartzow - Business & Ops. Specialist
Mario Henriquez - Venture Capital Fellow
(

6.

)

Team card

Team cards displaying all fund members, designed to promote team unity and individual expertise.

Two deployment variations of this component exist, catering to different screen types.

This section displays the Default version.

Team card

Role

Name

-

Description 1

-

Description 2

UI Kit

Summary of all styles and components

(

1.

)

Typography

In the project we used two open source typefaces. Bricolage Grotesque and Roboto Serif. Both of those font families are free for commercial use.

Bricolage Grotesque

Font weight: ExtraBold 800

https://fonts.google.com/specimen/Bricolage+Grotesque/about


Roboto Serif

Font weight: ExtraLight 200

https://fonts.google.com/specimen/Roboto+Serif/about





Display

Display 1

Display 2

Display 3

Display 4

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Paragraph

Paragraph italic

Paragraph pre-title

Paragraph leyend

Stories typography

Heading Article

(

2.

)

Logo

Adaptable logo with modern typefaces for a cohesive and recognizable visual identity across all platforms.

Color · Small in header

White · Small in footer

(

3.

)

Colors

Colours are easily changeble from styles panel in Framer.

Black color - Black

#212121

Dark grey color - Dark Grey

#2C2C2A

Light grey color - Light Grey

#F0F0F0

White background color - White

#FFFFFF

Accent color - Light Blue

#3986A5

(

4.

)

Decorations

SVG illustrations for text underlines and highlights, enhancing website visuals.

Undeline decoration - Type 1

Undeline decoration - Type 2

Undeline decoration - Type 3

Highlight - Type 1

(

5.

)

Arrows

Customizable arrow icons for intuitive navigation and interactive elements, enhancing user experience.

Arrow - Black

Arrow - White

General components

Summary of all styles and components

(

1.

)

Navbar

Streamlined navbar for easy navigation, fully responsive and customizable to fit your website's unique style.

Two deployment variations of this component exist, catering to different screen types.

This section displays the mobile version.

(

2.

)

Cookie settings

Customizable module for users to manage cookie preferences, enhancing privacy and compliance.

(

3.

)

Footer

Customizable footer with dynamic links and information blocks, ensuring a cohesive end to your web pages.

Three deployment variations of this component exist, catering to different screen types.

This section displays the Tablet version.

Custom components

Summary of all styles and components

(

1

)

Loader

This is an animated loader. You can update it in components.

Investing in

exceptional

founders

(

2.

)

Highlight Float Card

Floating cards featuring country images and key fund insights, creating an engaging visual storytelling experience.

Two deployment variations of this component exist, catering to different screen types.

This section displays the desktop version.

Highlight Float Card

Place

Title

Description

(

3.

)

FAQ

Interactive FAQ component for quick answers to common questions, improving user engagement and support.

FAQ - Items

What type of companies does 30N Ventures invest in?

How does 30N Ventures support its portfolio companies?

Can startups from outside LatAm apply for investment?

(

4.

)

Storytelling Steps

Step-by-step frames with graphics, titles, and text for illustrating the fund's mission journey, enhancing narrative clarity.


Two deployment variations of this component exist, catering to different screen types.

This section displays the mobile version.

Storytelling Steps

(

5.

)

Core-team card

Cards showcasing core team members with bio and role information, fostering trust and team transparency.

Three deployment variations of this component exist, catering to different screen types.

This section displays the Small version.

Core-team card

Paula Giraldo - Partner

Partner

Paula Giraldo

Salvador Said - Managing Partner
Daniel Kranzler - Senior Partner
Renato Picard - Venture Partner
Matias Alcalde - CFO
Carla de Kartzow - Business & Ops. Specialist
Mario Henriquez - Venture Capital Fellow
(

6.

)

Team card

Team cards displaying all fund members, designed to promote team unity and individual expertise.

Two deployment variations of this component exist, catering to different screen types.

This section displays the Default version.

Team card

Role

Name

-

Description 1

-

Description 2

UI Kit

Summary of all styles and components

(

1.

)

Typography

In the project we used two open source typefaces. Bricolage Grotesque and Roboto Serif. Both of those font families are free for commercial use.

Bricolage Grotesque

Font weight: ExtraBold 800

https://fonts.google.com/specimen/Bricolage+Grotesque/about


Roboto Serif

Font weight: ExtraLight 200

https://fonts.google.com/specimen/Roboto+Serif/about





Display

Display 1

Display 2

Display 3

Display 4

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Paragraph

Paragraph italic

Paragraph pre-title

Paragraph leyend

Stories typography

Heading Article

(

2.

)

Logo

Adaptable logo with modern typefaces for a cohesive and recognizable visual identity across all platforms.

Color · Small in header

White · Small in footer

(

3.

)

Colors

Colours are easily changeble from styles panel in Framer.

Black color - Black

#212121

Dark grey color - Dark Grey

#2C2C2A

Light grey color - Light Grey

#F0F0F0

White background color - White

#FFFFFF

Accent color - Light Blue

#3986A5

(

4.

)

Decorations

SVG illustrations for text underlines and highlights, enhancing website visuals.

Undeline decoration - Type 1

Undeline decoration - Type 2

Undeline decoration - Type 3

Highlight - Type 1

(

5.

)

Arrows

Customizable arrow icons for intuitive navigation and interactive elements, enhancing user experience.

Arrow - Black

Arrow - White

General components

Summary of all styles and components

(

1.

)

Navbar

Streamlined navbar for easy navigation, fully responsive and customizable to fit your website's unique style.

Two deployment variations of this component exist, catering to different screen types.

This section displays the mobile version.

(

2.

)

Cookie settings

Customizable module for users to manage cookie preferences, enhancing privacy and compliance.

(

3.

)

Footer

Customizable footer with dynamic links and information blocks, ensuring a cohesive end to your web pages.

Three deployment variations of this component exist, catering to different screen types.

This section displays the Tablet version.

Custom components

Summary of all styles and components

(

1

)

Loader

This is an animated loader. You can update it in components.

Investing in

exceptional

founders

(

2.

)

Highlight Float Card

Floating cards featuring country images and key fund insights, creating an engaging visual storytelling experience.

Two deployment variations of this component exist, catering to different screen types.

This section displays the desktop version.

Highlight Float Card

Title

Description

(

3.

)

FAQ

Interactive FAQ component for quick answers to common questions, improving user engagement and support.

FAQ - Items

What type of companies does 30N Ventures invest in?

How does 30N Ventures support its portfolio companies?

Can startups from outside LatAm apply for investment?

(

4.

)

Storytelling Steps

Step-by-step frames with graphics, titles, and text for illustrating the fund's mission journey, enhancing narrative clarity.


Two deployment variations of this component exist, catering to different screen types.

This section displays the mobile version.

Storytelling Steps

(

5.

)

Core-team card

Cards showcasing core team members with bio and role information, fostering trust and team transparency.

Three deployment variations of this component exist, catering to different screen types.

This section displays the Small version.

Core-team card

Partner

Paula Giraldo

Tomas Denecken - Managing Partner
Salvador Said - Managing Partner
Daniel Kranzler - Senior Partner
Renato Picard - Venture Partner
Matias Alcalde - CFO
Carla de Kartzow - Business & Ops. Specialist
Mario Henriquez - Venture Capital Fellow
(

6.

)

Team card

Team cards displaying all fund members, designed to promote team unity and individual expertise.

Two deployment variations of this component exist, catering to different screen types.

This section displays the Default version.

Team card

Role

Name

-

Description 1

-

Description 2