Orogamis Style Ui Kit

Providing full-service, b2b growth to Fortune 1000 and startups: funnel, pipeline, customer, brand, and product UX. Discover the Orogamis GrowthX Framework, insight-driven-innovation methodology, and a trove of B2B resources.

Primary colors

Color Blue
#152643

Color Gold
#D7C49E

Secondary colors

Color red
#fe5757

Color neutral white
#f2f2f2

Neutral colors

Color neutral white
#f2f2f2

color white
#FFFFFF

color slate grey
#637889

System colors

BG-Product-Purple
#932fef

BG-Customer-blue
#0D86FD

BG-Pipeline-green
#10B2A1

BG-Brand-pink
#DD186D

BG-Funnel-orange
#F89E20

Special headings

Display 1

proxima nova
58px / 4.375rem

Donec et odio pellentesqu diam.

Display 2

proxima nova
38px / 3rem

Donec et odio pellent diam volutpa com.

Display 3

proxima nova
38px / 3rem

Donec et odio pellent diam volutpa com.

Headings

Heading H1

proxima nova
58px / 4.375

Donec et odio pellentesqu diam volutpat commod.

Heading H2

proxima nova
38px / 3rem

Donec et odio pellentesqu diam volutpat commod.

Heading H3

proxima nova
32px / 3rem

Donec et odio pellentesqu diam volutpat commod.

Heading H4

proxima nova
24px / 1.273em

Donec et odio pellentesqu diam volutpat commod.

Heading H5

proxima nova
18px / 1.333em

Donec et odio pellentesqu diam volutpat commod.

Heading H6

proxima nova
16px / 1.375em

Donec et odio pellentesqu diam volutpat commod.

Body

Body Large

proxima nova
18px / 1.778em

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. Aenean faucibus nibh et justo cursu.

Body Default

proxima nova
16px / 1.857em

Body Small

proxima nova
12px / 1.833em

Text single color black: #152643

400

proxima nova regular

proxima nova

proxima nova bold

18px / 1.111em

Lorem ipsum dolor sit amet consectetur

300

proxima nova Regular

proxima nova Medium

proxima nova Bold

16px / 1.125em

Lorem ipsum dolor sit amet consectetur

200

proxima nova Regular

proxima nova Medium

proxima nova Bold

14px / 1.143em

Lorem ipsum dolor sit amet consectetur

100

proxima nova Regular

proxima nova Medium

proxima nova Bold

12px / 1.167em

Lorem ipsum dolor sit amet consectetur

50

proxima nova Regular

proxima nova Medium

proxima nova Bold

10px / 1.2em

Lorem ipsum dolor sit amet consectetur

Text color grey: #637889

Single text

proxima nova regular

proxima nova

proxima nova bold

18px / 1.111em

Lorem ipsum dolor sit amet consectetur

Heading

proxima nova

58px / 4.375

Donec et odio pellentesqu diam volutpat commod.

Body

proxima nova

18px / 1.778em

Text color orange (red)

Single text

proxima nova regular

proxima nova

proxima nova bold

18px / 1.111em

Lorem ipsum dolor sit amet consectetur

Text single Uppercase

400

proxima nova Regular

proxima nova Medium

proxima nova Bold

18px / 1.111em

Lorem ipsum dolor sit amet consectetur

300

proxima nova Regular

proxima nova Medium

proxima nova Bold

16px / 1.125em

Lorem ipsum dolor sit amet consectetur

200

proxima nova Regular

proxima nova Medium

proxima nova Bold

14px / 1.143em

Lorem ipsum dolor sit amet consectetur

100

proxima nova Regular

proxima nova Medium

proxima nova Bold

12px / 1.167em

Lorem ipsum dolor sit amet consectetur

50

proxima nova Regular

proxima nova Medium

proxima nova Bold

10px / 1.2em

Lorem ipsum dolor sit amet consectetur

Rich Text

Text Bold

proxima nova

16px / 1.857em

Lorem ipsum dolor sit amet consectetur

Text Link

proxima nova

16px / 1.857em

Lorem ipsum dolor sit amet consectetur

Bullet List

proxima nova

16px / 1.857em

Lorem ipsum dolor sit amet consectetur
Posuere enim mi pharetra neque proin dic
Mauris aliquet faucibus iaculis dui vitae ullamco

Numbered List

proxima nova

16px / 1.857em

Lorem ipsum dolor sit amet consectetur
Posuere enim mi pharetra neque proin dic
Mauris aliquet faucibus iaculis dui vitae ullamco

Button primary

Inputs

Input texts

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Text area

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Checkboxes

Placeholder

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Placeholder

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Radio buttons

Placeholder

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Toggle button

Upload Box

Drop your image here orbrowse your files

Max file size 10MB. Supports PNG, JPG and PDF](/content/style-guide#/index.html)

Your customer journey is only as strong as your weakest touchpoint.

Please enter a valid email address

Something went wrong. Please, try again.