Basics

Here you can fin the Heading styles, paragraphs, links and common buttons' styles of the site.

H1 Text Style

H1

H2 Text Style

H2

H3 Text Style

H3

H4 Text Style

H4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Bigger Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Regular Paragraph
Lorem ipsum
Text Link
View Project
Green Button
View Project
Blue Button

Color

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Text colors

font color - dark
#272740
font color - Dark grey
#656678
font color - Grey
#8b8fa1

Main colors

BRAND COLOR 1
#166fda
BRAND COLOR 3
#6ed66c #53b073
BRAND COLOR 2
#c860db
BRAND COLOR 4
#64a9fe #1865c4

Neutral colors

White
#ffffff
DARK GREY 1
#f0f1f5
LIGHT GREY 2
#dcdde2
DARK GREY 2
#FAFAFA

Logo

These are sample logo SVGs that can be downloaded straight from the site, or you could set up a download link that links with the file that's hosted with your cloud storage application of choice.

MAIN LOGO BLACK
DOWNLOAD
MAIN LOGO WHITE
DOWNLOAD

Main COMmon Sections

These are a few example sections.

Nav Bar

Nav Bar Scrolled

Hero 1

Hero 2

Hero 3

Virginia is for Entrepreneurs

Virginia is for Entrepreneurs connects entrepreneurs seeking financing with investors looking for opportunities and entrepreneur support resources across Virginia.

Entrepreneur

Are you ready for investment?

Whether you’re an entrepreneur in Abingdon or Alexandria, Virginia is for Entrepreneurs helps prepare your company for funding and connects you with the right investors and support organizations.

Join as an entrepreneur

Already have an Abaca account? Log In

Supporter

Find opportunities to support.

Cut through the noise and connect with Virginia entrepreneurs that fit your investment profile. Spend less time saying, “Sorry, you’re not a good fit” and more time saying, “I’m interested. Here’s how I view your company.”

Join as a Supporter

When prompted to join a network, search & select VA4E

Hero 4

Simplified Footer

Footer

Components

These are a few example components.

Title + Description

How It Works

Abaca will calculate an overall Venture Investment Level — from Level 1, a founding team and an idea, to Level 9, a market-leading company. Your overall level points you to the right stage of funding and assistance, and category-specific levels identify milestones you’ve achieved and need to achieve before your next raise.

Cards with Icons

Plan and track progress

Built upon Village Capital’s proven VIRAL methodology, Abaca charts growth milestones across eight categories investors care about most.

Become self aware

Knowing your company’s strengths and weaknesses, using the language investors use, makes funding conversations more productive.

Network smarter

Abaca provides founders with a better starting point and a common language to use with investors, mentors and support organizations.

Testimonials

Monique Adams

CEO, EdConnective

“It’s a game changer in helping 757 Angels find great investments – and help every entrepreneur we come in contact with find the resources they need.”

Will Morris

Executive Director at 757 Angels

“Too often, I find myself traveling from Richmond to New York or the Valley to raise money. I sometimes see local investors there! I’m excited because this enables us to find help where we live.”

Odunayo Eweniyi

Co-founder, Piggybank.ng

“Working with it really helped us map a path for the growth of the product because we were able to see very clearly, the point we were really at, at the time. It’s possibly the best strategy for investor communication for early-stage startups.”

Monique Adams

Executive Director at 757 Angels

“It’s a game changer in helping 757 Angels find great investments – and help every entrepreneur we come in contact with find the resources they need.”

Will Morris

CEO, EdConnective

“Too often, I find myself traveling from Richmond to New York or the Valley to raise money. I sometimes see local investors there! I’m excited because this enables us to find help where we live.”

Odunayo Eweniyi

Co-founder, Piggybank.ng

“Working with it really helped us map a path for the growth of the product because we were able to see very clearly, the point we were really at, at the time. It’s possibly the best strategy for investor communication for early-stage startups.”

Will Morris

CEO, EdConnective

“Too often, I find myself traveling from Richmond to New York or the Valley to raise money. I sometimes see local investors there! I’m excited because this enables us to find help where we live.”

Monique Adams

Executive Director at 757 Angels

“It’s a game changer in helping 757 Angels find great investments – and help every entrepreneur we come in contact with find the resources they need.”

Odunayo Eweniyi

Co-founder, Piggybank.ng

“Working with it really helped us map a path for the growth of the product because we were able to see very clearly, the point we were really at, at the time. It’s possibly the best strategy for investor communication for early-stage startups.”

Single Testimonial

Odunayo Eweniyi

Co-founder, Piggybank.ng

“Working with it really helped us map a path for the growth of the product because we were able to see very clearly, the point we were really at, at the time. It’s possibly the best strategy for investor communication for early-stage startups.”

Text + Button

Want to join a network?
Join abaca!

Simple Cards

Virginia is for Entrepreneurs

Virginia is for Entrepreneurs connects entrepreneurs seeking financing with investors looking for opportunities and entrepreneur support resources across Virginia.

See more

Maine Technology Institute

MTI offers grants, loans, equity investments, and services to support Maine’s innovation economy. We support new ideas, products, or methods with the potential to grow and diversify Maine’s economy and increase the number of quality jobs throughout the state through direct support of innovators and through support of programs and infrastructure that encourage innovation.

See more

Ben Franklin Technology Partners: Southeast Pennsylvania

At Ben Franklin, we are partners guided by a singular purpose; to guide the region’s technology community to new heights. Through our unique model, we provide the capital, counsel and connections that empower innovators to accelerate their ideas and investors to expand their impact.

See more

Logos (5 and 4 columns)

Logos (3 columns)

Blue divider

Grid

Levels Description

Level 1

Establishing the Founding Team

Level 2

Setting the Vision

Level 3

Solidifying the Value Proposition

Level 4

Validating an Investable Market

Level 5

Proving a Profitable Business Model

Level 6

Moving Beyond Early Adopters

Level 7

Hitting Product-Market Fit

Level 8

Scaling Up

Level 9

Exit in Sight

Feature List

Learn your strengths and weaknesses

Start with a proven investment readiness assessment that takes only minutes. The self-assessment methodology, pioneered by Village Capital, is called VIRAL for “Venture Investment Readiness and Awareness Levels,” and it has been tested and validated worldwide.

Share your progress

Have more productive conversations with investors, mentors and your team by saving and updating your Level as part of a profile. Share your profile and learn a common language for talking about your progress and identifying milestones critical to growth.

Share your progress

Have more productive conversations with investors, mentors and your team by saving and updating your Level as part of a profile. Share your profile and learn a common language for talking about your progress and identifying milestones critical to growth.

NEW: Matching

Abaca’s matching technology helps you pinpoint where to look for raising capital -- whether that’s grants, debt, angel, seed or venture capital -- and for resources in your ecosystem, such as incubators, accelerators, or government programs and incentives. A match score provides you with a gauge of how good a fit each option is.

People Cards 4 columns

Ross Baird

CEO at Village Capital

Read More

Andrew Hobbs

Technology Strategy at Village Capital

Read More

Peter Lundquist

Head of Product at Village Capital

Read More

Allie Burns

Managing Director at Village Capital

Read More

People Cards 3 columns

Ross Baird

CEO at Village Capital

Read More

Andrew Hobbs

Technology Strategy at Village Capital

Read More

Peter Lundquist

Head of Product at Village Capital

Read More

Hubspot Forms

Here you can fin the Heading styles, paragraphs, links and common buttons' styles of the site.

H1 Text Style

H1

H2 Text Style

H2

H3 Text Style

H3

H4 Text Style

H4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Bigger Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Regular Paragraph
Lorem ipsum
Text Link
View Project
Green Button
View Project
Blue Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

GUide | tips & tricks on how to create and Change content

Now that a strong basis of sections and components was created, it's time to give you some important hints on how to manage components and sections in order to edit them or apply them in different contexts, for example, when creating a new page.

You should be aware of some core concepts before digging into specifics:
1. Pages are composed by sections that have elements inside (divs, images, text, columns, etc);
2. Each section or element can be associated with a class or multiple ones (e.g. this paragraph has the "guide component explanation" class, as you can see in the image below) that it's reusable throughout other elements — any change applied to that class, will be reflected in all the components that use this same class.

3. Due to this reason, if there's something that you want to change in a specific context you have two options:
Option 1 - Duplicate the class and rename it (creating therefore a new one) — so you can apply any change you want on the Layout setting panel, that will therefore be associated to this new class you created. This option is commonly used for bigger changes, for example variations on a card style such as color, dimensions and other styling options, considering that you could possibly want to reuse this new element on a different place/page.

Option 2 - Add a combo class (a second class to your element in that specific context)— that means adding another class to the same element, so the changes applied will be "saved" on the second class, not interfering with the elements that only have the first class applied. This option is commonly used for smaller changes that only make sense in particular contexts, for example to add a different margin or padding, that's why you'll find combo classes like "margin-top-20px" through the project :) [To add it, you only need to click class section on the panel, and you automatically be writing the name of the new class].

3. Be aware that in case you have created a new element or you are editing an element that doesn't have any class associated yet, as soon as you start editing, a new class will be created by default (and you'll need at least to rename it, or otherwise you'll lose track of what is that class for).

Hero and Header

When creating a new page, the first one you'll create is the Hero.
1. First things first, you'll need copy an existing hero section from the existing pages. It follows an already existing structure, you can simply duplicate the class name applied, so you can make slightly adjustments without affecting the original page (e.g. Hero About Us).
If you want to create a new section from scratch, add a new section element. Don't forget to apply a class name to your section (e.g. Hero About Us).


2. Then, you can copy an "Hero Container" from these Hero Variations that were exemplified on this styleguide — and make some subtle changes on top of it (always having in mind that replicate class/combo class mindset mentioned above);


3. This Hero Container div already includes the Header components, nevertheless you should make sure the interactions' panel have the two animations active.

As you'll see, there are two header components that must be included:
• Nav Bar — the one visible at the top of the page;
• Nav Bar Scrolled — the one that appears on scrolling, initially with a position negative, therefore not appearing on the page.


The Nav Bar Scrolled has two interactions defined that allow it to move down when users initially scroll down (Page scrolled > Nav White Moves Down) and another one once it reaches the top again , moving back to the negative position (While page is scrolling > Nav White Moves Up).

Testimonials Section

To re-use this components you must copy and paste the 3 groups of elements to the page (don't forget that componets be always placed inside a Section), in order to make it work in all the breakpoints:
1. "Full Testimonial Block";
2. "Slider Tablet";
3. "Slider Mobile".

Therefore you can "Replace Image" if you want to add a different person no need to change the class, each image element is a different instance, even though having the same class — so you can switch the image without affecting other elements in the same or other pages.

Features List

To create different and a new features' list components, you'll need to have a particular situation in mind — the images are being used on the div background — so if you change the Background on the edit panel, all the elements with that same class being used, will be changed.
For this reason, in case you want to create a variation with different images, please do follow these steps:
1. Copy and paste the features' list component;
2. Select the div with the background image;

3. Then, you'll need to duplicate the main class (where the bg image was applied) and give it a different name: to duplicate a class, you'll have to remove the combo ones for instance (please remember the ones you have applied), duplicate the main one and give it another name. In this case, you'll need to remove the "no-margin" class, duplicate the "Image 1 Right", rename it (you can then change the background image to the one you want) and apply again the "no-margin" class.

Simple Cards and People Cards

When adding/editing components of these types, the same rules of the testimonials' sections will need to be considered — the images can be "replaced" through the setting icon on top of the element — no need to replicate the class, considering that the images are an image element.