New art every now and a little after then.

Check out Thrive hive - our dedicated artsy store.
logo and logotype of Ampers& house with symbol representing an infinite knot pattern with missing thread replaced by an orange dot - symbol of a sun
Services

Brand identity

Web design

Graphic design

Content & SEO

PortfolioBlogOur storyManifesto!
en
no
contact
Creator's websiteServicesManifesto!PortfolioArticlesOur storyTestimonialsContact
FAQBrand guidelinesDesign manualCookies and GDPRTerms and conditions

mail

→

Phone

→

Form

→

visual

hierarchy

Design manual

1.
Colours
2.
Typography
3.
Headings
4.
Paragraphs
5.
Icons
6.
Labels
7.
Rich Text
8.
Illustrations
9.
Photography
10.
Contact forms
11.
Ineractions
12.
Buttons
Contact
↓
&
1

Colours

Our color palette is essential to our brand identity. Here, we outline the primary and secondary colors used.

Brand: blue

Ampersand Blue
#4125d0
Ampersand Purple
#969ced

Pallette: blue

Color 1
#0f1168
Color 2
#14168f
Color 3
#1719a1
Color 4
#191cb3
Color 5
#1c1fc4
Color 7
#3b3de3
Ampersand Purple
#969ced
Color 9
#a8adf0
Color 10
#c5c9fa
Color 11
#c9caf7
Color 12
#dcdef9
Color 13
#edeefc

Brand: orange

Ampersand Orange
#f75b26
Ampersand Peach
#fcc3b1

Pallette: orange

Alt Color 1
#8b2504
Alt Color 2
#9e2b05
Alt Color 3
#b23106
Alt Color 4
#c53707
Alt Color 5
#d93c08
Alt Color 6
#ec4109
Alt Color 7
#f64c13
Alt Color 9
#f64c13
Alt Color 10
#f64c13
Alt Color 11
#fa9675
Alt Color 12
#faa689
Alt Color 13
#faa689
&
2

Typography

Typography is crucial to our visual identity. This section covers the typefaces we use.

Type: Signifier

Kris Sowersby, the designer behind Signifier, envisioned a typeface that could transcend trends and stand the test of time. His expertise and passion for typography are evident in Signifier's harmonious blend of beauty and functionality. Signifier comes in various weights and styles, providing designers with the flexibility to create dynamic typographic compositions. Whether used for headlines, body text, or display purposes, it maintains readability and visual appeal.

Global class: Signifier 200 Extra Light Italics

Signifier 200 Extra Light Italics

Global class: Signifier 300 Light

Signifier 300 Light

Global class: Signifier 400 Regular

Signifier 400 Regular

Global class: Signifier 500 Medium

Signifier 500 Medium

Global class: Signifier 700 Bold

Signifier 700 Bold

Global class: Signifier 900 Black

Signifier 900 Black

Type: Abril Fatface

The creation of Abril Fatface was a collaborative effort by Veronika Burian and José Scaglione, co-founders of TypeTogether. Their vision was to create a typeface that could bridge the gap between historical influence and modern design needs, providing designers with a powerful tool for impactful typography. This typeface shines in display settings, making it perfect for headlines, posters, branding, and editorial design. Its bold, expressive nature ensures that any message it conveys is delivered with confidence and flair.

.1&2&3&4&5&6&7&8&9.

:1&2&3&4&5&6&7&8&9:

&
3

Headings

Headings help structure our content. This section outlines our heading styles.

Class: H1-H6

H1 to H6 headings are HTML tags that define the hierarchy and structure of content on a webpage. These headings not only improve readability and organization but also play a crucial role in SEO by helping search engines understand the structure and importance of the content.

Global class: H1 / Is Blue Text

H1 Ampers &house title

Global class: H2

H2 Ampers& house title

Global class: H3

H3 Ampers&house title

Global class: H4

H4 Ampers&house heading

Global class: H5
H5 Ampers&house heading
Global class: H6
H6 Ampers&house heading

Class: Size & weight

Text weight and size are key elements in typography that influence readability and visual hierarchy. By varying text weight and size, designers can create contrast, direct the reader’s attention, and enhance the overall aesthetic of the design.

Combo class: Heading / Is Extra Small Title / Is Blue Text

Extra small size of a heading text

Combo class: Heading / Is Small Title / Is Blue Text

Small size heading text

Combo class: Heading / Is Regular Title / Is Blue Text

Regular size heading text

Combo class: Heading / Is Medium Title / Is Blue Text

Medium heading

Combo class: Heading / Is Large Title / Is Blue Text

Large size title text

Combo class: Heading / Is Extra Title / Is Blue Text

Extra big xxl title

Combo class: Heading / Is Light / Is Blue Text

Default light heading size

Combo class: Heading / Is Extra Bold / Is Blue Text

Default extra bold heading size

Combo class: Heading / With More Height / Is Blue Text

Default more height heading spec - serves to emphasize the importance of white space.

&
5

Paragraphs & links

Paragraphs form the body of our content. This section provides guidelines on paragraph styles.

Global class: Link
Text Link
Combo class: Paragraph / Is Small

Using the smallest paragraph size in design layout requires careful consideration to maintain readability and visual balance. While small paragraph sizes can be useful, it's crucial to ensure the text remains legible and accessible, maintaining a comfortable reading experience for all users.

Class: Paragraph

Regular paragraph size is ideal for body text in articles, reports, and most web content. It provides a comfortable reading experience and is versatile enough for various types of content. Use regular size for the main information, ensuring clarity and readability.

Combo Class: Paragraph / Is Medium

Medium paragraph size is slightly larger than regular and can be used to emphasize key points or highlight important sections within the body text. It is perfect for short summaries, intros, or conclusions where a bit more emphasis is needed without overwhelming the reader.

Combo Class: Paragraph / Is Large

Large paragraph size is suitable for subheadings, lead paragraphs, or key statements that need to draw the reader’s attention. Use it to break up long sections of text, making the content more digestible and engaging.

Combo Class: Paragraph / Is Extra Large

Extra-large paragraph size is best for headings, quotes, or very important messages that need to stand out prominently. It creates a strong visual impact and guides the reader's eye to the most critical parts of the content.

&
6

Icons

Icons add visual interest and aid navigation. This section covers our icon styles.

Global Class: Icon
Global Combo Class: Icon / Is Regular
Global Combo Class: Icon / Is Medium
Global Combo Class: Icon / Is Semi Large
Global Combo Class: Icon /Is Large
Global Combo Class: Icon / Is Extra Large
&
7

Labels

Labels provide quick information. This section outlines our label styles.

Global Class: White Round Label

Label Text

Global Component: Orange Label

Label Text

Global Component: Blue Title Label

01.

Intro

Global Component: White Title Label

01.

Meaningful catch

Global Component: White Label

Label Text

Global Component: White Round Label

Label Text

Global Component: Orange Label

Label Text

&
8

Rich text

Rich text allows for diverse content. This section covers our rich text styles.

We're about forever.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ampers& lasting in H2.

Natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  • Duis aute irure dolor in reprehenderit in voluptate velit esse
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa

Heading west, stayin' in heading H3.

Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

  1. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisi
  3. Duis aute irure dolor in reprehenderit in voluptate
  4. Excepteur sint occaecat cupidatat non proident, sunt in

Usually heading east leads to incorporating H4.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus

"Like totally abstract quote providing all the information needed"

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Heading west, stayin' heading H3.

Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Heading stays heading until the last H5 stands.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

  • Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua‍
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisi
  • Duis aute irure dolor in reprehenderit in voluptate
  • Excepteur sint occaecat cupidatat non proident, sunt in

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I was Heading at you, you heading at me, both so pure H6.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.

Lego posing by the wall of Oslo opera
This caption clearly indicates that the message needs to be spread.

I was Heading at you, you heading at me, both so pure H3.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus.

&
9

Illustrations

Illustrations enhance our storytelling. This section outlines our illustration styles.

Global Component: Image - Scrolling + 3D + Parallax
Global component: Image - Scrolling + Parallax
A close-up mockup scene depicting hands on a laptop keyboard with ampers& house's website and their services on the screen
Global Component: Image - Scrolling + 3D + Parallax
Global component: Image - Scrolling + Parallax
A close-up mockup scene depicting hands on a laptop keyboard with ampers& house's website and their services on the screen
Global Component: Image - Scrolling + 3D + Parallax
&
10

Photography

Photography adds realism to our designs. This section covers our photography guidelines.

spiritual teacher posing for her session with angel wings
artist Natalia Klemanova chilling and posing with her guitar in a luxurious appartment in Bratislava
artist with a shaman drum performing on a concert in a church
woman arranging flowers before spiritual session
spiritual teacher in a meditative state during her session in a modern retreat centre
spiritual session performers before the show
birth giving ritual photo session
guitar player playing joyfully and smiling in Carpathian woods
drummer playing on a gig in Bratislava near UFO tower
artist singing on a gig in Prague's music event
detail from behind the scenes of music video shooting of the band Neha
group of people in a circle ceremony holding their hands
&
11

Contact forms

Forms facilitate user interaction. This section outlines our form styles.

11.

Look!

Form

We are all ears! Tell us your thoughts and hit send.

Thank you! We will rock together.
Oops! Something went wrong while submitting the form.

11.

Cleaner? Try

Blue form!

Keep storytelling on the go with this blue background contact form layout. Keep visitors focused while staying packed with data to fill in.

Thank you! We will rock together.
Oops! Something went wrong while submitting the form.

Interested?

Contact us!

We're launching soon & we'd d love to notify you when the celebration begins! Let us keep you in the loop.

Thank you! We will rock together.
Oops! Something went wrong while submitting the form.
&
12

Interaction

Interactions enhance user experience. This section covers our interaction guidelines.

Manifesto!

Enjoy enhanced services like comprehensive SEO, PPC and campaign management..

Read now
→
Fromt shoot of Lego leaning over the wall of Oslo opera

Get in touch instantly

+47/40234242

welcome@ampersand.house

Contact form

A close-up mockup scene depicting hands on a laptop keyboard with ampers& house's website and their services on the screen
&
12

Buttons

Buttons drive actions. This section outlines our button styles.

Button Text
→

I'm interested

Book a call

to talk about your project

Click me good

Button Title

Button Description Text

→

Button Title

→
Thank you!
Your submission has been received!
Fragment - Marketing Landing Page Template Image
Oops! Something went wrong while submitting the form.

Explore

our

services

Brand identity

Web design

Graphic design

Content & SEO

All services
→
Ampers& house logotype vector

Services

Portfolio

Our story

Manifesto!

Contact

FAQTerms of useCookies & privacyBrand guidelines
Facebook
Instagram
Lego posing and representing his brand Ampers& house
Barbora posing with a camera in her hand, smiling joyfully
©
Ramen & Pho AS
alright. A& h 2025