Kom igång

Brand Portal

Design Guidelines & Graphic Identity

Welcome to our brand guidelines. This portal provides everything you need to understand and use our brand correctly in web, print, and digital communications.

About Our Brand

Placeholder for brand description. This section will contain a brief overview of who we are, our mission, and what sets us apart in the market.

Tone of Voice

Placeholder for tone of voice guidelines. This section will describe communication style, language usage, and how we communicate with different audiences.

Graphic Profile

Placeholder for graphic profile description. This section will explain our visual identity in human terms - the personality, values, and emotions our brand conveys through design.

Typography System

Berget uses a carefully crafted typography system to create hierarchy, readability, and brand personality across all touchpoints.

Typefaces

Serif (Ovo)

Headings and display text

An elegant serif font inspired by 1930s lettering. Used for headings and display text to create sophistication and brand personality.

Sans (DM Sans)

Body text and UI elements

A low-contrast geometric sans serif optimized for smaller text sizes. Used for body text and UI elements to ensure excellent readability.

Monospace (DM Mono)

Code and technical content

Monospace font designed for code and technical content. Ensures clarity in documentation and programming examples.

Display & Heading Sizes

Heading hierarchy and display typography using serif typeface.

Hero Heading Level 1

80px / 5rem • Line height: 5.5rem • Letter spacing: -0.03em

Section Heading Level 2

40px / 2.5rem • Line height: 3.5rem • Letter spacing: -0.03em

Subsection Heading Level 3

32px / 2rem • Line height: 2.5rem • Letter spacing: -0.01em

Component Heading Level 4

24px / 1.5rem • Line height: 2.5rem • Letter spacing: -0.01em

Body Text & UI Sizes

Body text and UI typography using sans-serif typeface.

Large body text (text-lg) - 18px

Used for emphasis and key information. 18px with 28px line height.

Regular body text (text-base) - 16px

Default body text for general content. 16px with 24px line height.

Small text (text-sm) - 14px

UI text, labels, and secondary information. 14px with 20px line height.

Extra small text (text-xs) - 12px

Captions, badges, and notices. 12px with 16px line height.

Typography Examples

Examples showing how typography works in context.

Welcome to Berget AI

Transform your workflow with intelligent automation. Our platform helps teams work smarter by leveraging cutting-edge AI technology.

Getting Started

Learn how to set up your first project in just a few minutes. Follow our step-by-step guide to get up and running quickly.

Color Palette

The color palette is carefully crafted to create visual hierarchy, convey brand personality, and ensure accessibility across all applications.

Brand Colors

Core brand colors that define our visual identity. Click on values to copy.

Moss

Primary brand color

Lichen

Secondary accent

Spruce

Dark green

Fjord

Blue accent

Peak

Pure white

Cloud

Light neutral

Slate

Dark neutral

Night

Background

Status Colors

Colors used to communicate status, feedback, and system states.

Info

Informational

Success

Success state

Warning

Warning state

Error

Error state

Color Guidelines

Usage Principles

  • Use Moss as primary action color and CTAs
  • Use Slate for primary text on light backgrounds
  • Use Peak for primary text on dark backgrounds
  • Maintain minimum 4.5:1 contrast ratio for accessibility

Avoid

  • Do not create custom brand colors
  • Do not mix brand colors randomly
  • Do not use status colors for decorative purposes
  • Do not skip color hierarchy for emphasis

Gradient Combinations

Predefined gradient combinations that work well together.

Moss to Lichen

moss-lichen

Spruce to Fjord

spruce-fjord

Fjord to Slate

fjord-slate

Slate to Night

slate-night

Spruce to Slate

spruce-slate

Spruce to Night

spruce-night

Moss to Spruce

moss-spruce

Lichen to Cloud

lichen-cloud

Icon System

Berget uses the Lucide icon library - a comprehensive collection of carefully crafted icons that ensure consistency and visual harmony across our products.

About Lucide Icons

Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official packages.

All icons are designed with a consistent stroke width, corner radius, and visual style to ensure they work harmoniously together in any application or design.

Explore all Lucide icons

Common Icons

Commonly used icons throughout the interface, shown in different sizes.

16px (Small - 1.4px stroke)

Download

Upload

Copy

Settings

User

Bell

24px (Default - 1.6px stroke)

Download

Upload

Copy

Settings

User

Bell

32px (Large - 1.8px stroke)

Download

Upload

Copy

Settings

User

Bell

Size Guidelines

16px - Small

Used for compact UI elements, button icons, and inline icons within text. Stroke width: 1.4px.

24px - Default

Standard size for most UI icons, navigation items, and interactive elements. Stroke width: 1.6px.

32px - Large

Used for larger icons in cards, featured elements, and display purposes. Stroke width: 1.8px.

Usage Guidelines

Icon Color Usage

  • Always use text-berget-brand-peak for standard icons
  • Colored icons are reserved for badges and status indicators
  • Use specified sizes and stroke widths

Best Practices

  • Use icons consistently to reinforce meaning and improve usability
  • Pair icons with labels for important actions
  • Ensure adequate spacing around icons

Imagery & Photography

Visual imagery plays a crucial role in communicating Berget's brand personality. These guidelines help maintain consistency in how we use images across all touchpoints.

Photography Style

Placeholder for photography guidelines describing our visual approach and aesthetic preferences.

Composition

Guidelines for framing, balance, and visual flow in photography. Placeholder for detailed composition principles.

Lighting & Color

Recommendations for lighting conditions, color grading, and tonal consistency. Placeholder for lighting and color guidelines.

Content & Context

What subjects and contexts work best for Berget AI. Placeholder for content guidelines and appropriate subject matter.

Image Guidelines

Dos

  • Use high-quality images that reflect professionalism
  • Ensure images are properly optimized for web use
  • Use accessible alt text for all images
  • Maintain consistent quality across all image assets
  • Use appropriate formats (WebP for web, PNG/JPG as backup)

Don'ts

  • Do not use low-resolution or blurry images
  • Avoid distractions or irrelevant elements in photos
  • Do not use images that conflict with brand values
  • Avoid over-editing or excessive photo manipulation
  • Do not use stock photos that appear generic or clichéd

Technical Specifications

Placeholder for technical requirements for images across different mediums.

Web Images

  • • Preferred format: WebP with PNG/JPG fallback
  • • Maximum file size: 2MB for hero images
  • • Resolution: 72-150 DPI
  • • Dimensions: Responsive breakpoints
  • • Color space: sRGB

Print Images

  • • Preferred format: TIFF or high-res PNG
  • • Resolution: 300 DPI minimum
  • • Color space: CMYK for printing
  • • File format: EPS or TIFF for vector graphics
  • • Bleed allowance: 3mm minimum

Image Assets

Placeholder section for downloadable image assets and stock imagery resources.

Image Assets Coming Soon

This section will contain downloadable brand photography, stock imagery, and image resources approved for Berget AI communications.