Cloud Native Day Bergen
Brand Guidelines & Design System
Our brand reflects the spirit of the cloud native community: innovative, open, collaborative, and forward-thinking. These guidelines ensure consistent and impactful communication across all touchpoints.
Our Brand Story
Cloud Native Day Bergen embodies the spirit of Norway's tech community: innovative yet grounded, collaborative yet independent, modern yet respectful of tradition.
Our visual identity draws inspiration from Bergen's dramatic landscapesβthe meeting of mountains and sea, the interplay of mist and clarity, the harmony of natural and urban elements.
We celebrate the "nerdy and proud" developer culture while maintaining accessibility and inclusivity for all members of our community.
Brand Values
- Open Source Spirit
- Technical Excellence
- Community First
- Accessibility & Inclusion
Design Principles
These principles guide every design decision and ensure our brand remains consistent, accessible, and true to our community values.
Developer-First
Every design choice considers the developer experience and technical audience.
Accessible by Design
We prioritize accessibility and inclusive design in all brand applications.
Nordic Minimalism
Clean, functional design that lets content shine without unnecessary complexity.
Community Driven
Our brand reflects the collaborative spirit of the open source community.
Color Palette
Our colors reflect Bergen's natural beautyβfrom the deep blues of Norwegian fjords to the fresh greens of nordic forests, balanced with modern tech-inspired accents.
primary Colors
Cloud Blue
#1D4ED8
Used in headlines and CTA buttons. Strong, tech-oriented, and accessible.
Usage
Headlines, primary buttons, key navigation elements
Tailwind Classes
bg-brand-cloud-blue text-brand-cloud-blue
Aqua Gradient
linear-gradient(135deg, #3B82F6, #06B6D4)
For backgrounds, section dividers, or digital badges.
Usage
Hero backgrounds, section dividers, badges
Tailwind Classes
bg-aqua-gradient
Brand Gradient
linear-gradient(135deg, #1D4ED8, #06B6D4)
Enhanced brand gradient for premium sections and hero areas.
Usage
Primary hero sections, premium features, branding headers
Tailwind Classes
bg-brand-gradient
Nordic Gradient
linear-gradient(135deg, #6366F1, #1D4ED8)
Accent gradient combining nordic purple with cloud blue.
Usage
Secondary features, call-to-action sections, accent areas
Tailwind Classes
bg-nordic-gradient
secondary Colors
Sky Mist
#E0F2FE
A soft sky blue for background fills, cards, or hover states.
Usage
Card backgrounds, hover states, subtle highlights
Tailwind Classes
bg-brand-sky-mist
Fresh Green
#10B981
Reflects the green in our logo. Good for highlights, tags, or eco-related themes.
Usage
Success states, tags, eco themes, speaker badges
Tailwind Classes
bg-brand-fresh-green
Glacier White
#F9FAFB
A clean background neutral to keep the interface minimal and modern.
Usage
Page backgrounds, card fills, clean sections
Tailwind Classes
bg-brand-glacier-white
accent Colors
Nordic Purple
#6366F1
Subtle contrast for agenda highlights, speaker names, or session tags.
Usage
Agenda highlights, speaker emphasis, session categories
Tailwind Classes
bg-brand-nordic-purple
Sunbeam Yellow
#FACC15
For urgency, early-bird ticket alerts, and callouts without breaking cool-tone harmony.
Usage
Alerts, early-bird notifications, important callouts
Tailwind Classes
bg-brand-sunbeam-yellow
neutral Colors
Slate Gray
#334155
For body text, navigation, or footer elements.
Usage
Body text, navigation, secondary information
Tailwind Classes
text-brand-slate-gray
Frosted Steel
#CBD5E1
For dividers, secondary buttons, or muted labels.
Usage
Dividers, muted text, secondary elements
Tailwind Classes
bg-brand-frosted-steel
Background Utilities
Our background system includes solid colors and gradients that work seamlessly across all brand applications and maintain proper contrast ratios.
Gradient Backgrounds
Aqua Gradient
Primary hero gradient
bg-aqua-gradient
Brand Gradient
Enhanced brand gradient
bg-brand-gradient
Nordic Gradient
Accent gradient
bg-nordic-gradient
Solid Color Backgrounds
Cloud Blue
bg-brand-cloud-blue
Fresh Green
bg-brand-fresh-green
Nordic Purple
bg-brand-nordic-purple
Sunbeam Yellow
bg-brand-sunbeam-yellow
Sky Mist
bg-brand-sky-mist
Glacier White
bg-brand-glacier-white
Slate Gray
bg-brand-slate-gray
Frosted Steel
bg-brand-frosted-steel
Background Usage Guidelines
When to Use Gradients
- Hero sections and primary call-to-actions
- Section dividers and visual breaks
- Digital badges and highlighting
When to Use Solid Colors
- Content sections and cards
- UI components and interactive elements
- Status indicators and alerts
Typography
Our typography system balances developer-friendly monospace fonts with clean, readable sans-serifs to create a distinctive yet accessible visual voice.
Primary Fonts (Headings & Branding)
JetBrains Mono
font-jetbrains
A monospaced font made for developers. Playful, readable, and distinctly "dev culture."
Space Grotesk
font-space-grotesk
Clean, geometric sans-serif with a slightly quirky personality.
Bricolage Grotesque
font-bricolage
Grotesque-style with some expressive, almost rebellious energy.
Secondary Fonts (Body & UI Text)
Inter
font-inter
Versatile, neutral sans-serif with high legibility.
IBM Plex Sans
font-ibm-plex-sans
A great balance of precision and friendliness.
Atkinson Hyperlegible
font-atkinson
Designed for readability, but with unique, humanistic forms.
Icon Library
A comprehensive set of cloud native and Kubernetes-inspired icons designed to align with our brand principles and represent key technology concepts.
Platform Icons
Cloud Infrastructure
Cloud computing platform representing scalable, distributed infrastructure
Cloud sections, infrastructure topics, platform overviews
Server & Compute
Server infrastructure representing compute resources and workload execution
Compute sections, server management, infrastructure diagrams
Container & Packaging
Container technology representing application packaging and isolation
Containerization topics, Docker sections, packaging concepts
Queue & Lists
Task queues and ordered processing for distributed workloads
Queue management, task processing, workflow systems
Data & Storage Icons
Database & Storage
Data storage and database systems for persistent application state
Database sections, storage topics, persistence patterns
Command Line & CLI
Developer tools and command-line interfaces for system interaction
Developer tools, CLI sections, terminal operations
Configuration & Settings
System configuration and operational settings management
Configuration topics, settings panels, system management
Tools & Utilities
Development and operational tools for system maintenance
DevTools, utilities, maintenance, system operations
Operations Icons
Security & Protection
Security measures and protection mechanisms for cloud native applications
Security sections, compliance topics, trust and safety
Monitoring & Analytics
Observability dashboards with metrics, monitoring, and analytics
Observability topics, monitoring sections, analytics dashboards
Performance & Speed
High-performance computing and rapid deployment capabilities
Performance topics, speed optimization, rapid deployment
Observability & Insights
System visibility and monitoring for operational awareness
Observability, monitoring, system insights, visibility
Network & Connectivity Icons
Global Distribution
Global network distribution and multi-region deployment strategies
Global topics, multi-region, international deployment
Service Mesh & Links
Service interconnection and communication patterns in microservices
Service mesh, microservices communication, API connections
CI/CD & Automation
Continuous integration and deployment with automated workflows
CI/CD sections, automation topics, workflow management
Deployment & Launch
Application deployment and launch processes
Deployment topics, launch processes, go-live activities
Icon Styles & Usage
Outline Style
Clean, stroke-based icons perfect for most UI elements and content sections
General UI, content sections, navigation, feature lists
Solid Style
Filled icons for emphasis, status indicators, and important highlights
Status indicators, CTAs, highlights, success states
Heroicons Usage Guidelines
Sizing & Scale
Color Application
Heroicons inherit text color and work with our full brand palette:
Use brand colors to create visual hierarchy and context
Code Examples
Import from Heroicons:
import { CloudIcon, ServerIcon } from '@heroicons/react/24/outline'
Usage with Tailwind sizing:
<CloudIcon className="w-6 h-6 text-brand-cloud-blue" />
Cloud Native Pattern System
Our animated background patterns incorporate authentic cloud native project logos with intelligent focus/diffusion effects. Smaller icons appear sharp and vibrant (in focus), while larger icons become more diffuse and subtle, creating natural visual depth that enhances readability and engagement.
Interactive Pattern Preview
Cloud Native Elements
Opacity: 0.15 β’ Base Size: 45px β’ Range: 23-72px β’ 50 icons
Pattern Controls
Current Configuration
Quick Presets
Configuration Guidelines
Icon Size
- Content sections: 15-35px icons
- Hero sections: 25-70px icons
- Background fills: 20-50px icons
Icon Count
- Subtle: 10-30 icons for content backgrounds
- Balanced: 30-60 icons for hero sections
- Dense: 60-120 icons for dramatic effects
Focus/Diffusion System
- Small icons (20-30px): High opacity, vibrant colors, sharp focus
- Medium icons (30-50px): Balanced opacity and slight blur
- Large icons (50-70px): Lower opacity, subtle colors, soft blur
- Adjust opacity (0.08-0.15) based on content readability
- Use slow movement animation for engaging backgrounds
- Disable animation for static contexts or better performance
- Combine with gradient backgrounds for optimal contrast
Pattern Elements
Container Orchestration
Kubernetes, containerd, and etcd - the foundation of modern container orchestration.
Observability & Monitoring
Prometheus, Jaeger, and Falco for comprehensive system observability and security.
Service Mesh & Networking
Istio, Envoy, and Cilium for secure, observable service-to-service communication.
Packaging & GitOps
Helm, Argo, and Crossplane for application packaging and deployment automation.
Configuration Examples
See how different settings create unique visual effects for various use cases
Content Background
Content Background
Subtle pattern for content sections and cards
Hero Section (Default)
Hero Section (Default)
Perfect balance for wide hero sections
Dramatic Background
Dramatic Background
Dense, dramatic effect for special sections
Focus/Diffusion Technology
Small Icons (Sharp Focus)
Higher opacity, vibrant colors, no blur. Draw attention as foreground elements.
Medium Icons (Balanced)
Moderate opacity and subtle blur. Provide visual texture without distraction.
Large Icons (Soft Diffusion)
Lower opacity, muted colors, soft blur. Create atmospheric background depth.
Hero Examples
Hero sections showcase our brand's visual impact through compelling combinations of typography, color, and cloud native patterns.
Cloud Native Day Bergen 2025
June 15, 2025 β’ Bergen, Norway
Join the Nordic cloud native community for a day of cutting-edge talks, hands-on workshops, and meaningful connections.
Speaker Examples
Showcase conference speakers with flexible, brand-consistent layouts. From keynote heroes to compact grids, these examples demonstrate various ways to highlight our community experts using real conference data.
Featured Speaker
Streamlined presentation for featured speakers with essential information and clean visual design. Perfect for homepage highlights and key announcements.

David Flanagan
Founder of the Rawkode Academy, open source contributor, and beloved husband and father to my wife, two amazing kids, and a plethora of animals. David has been developing software professionally for nearly 20 years, starting with embedded systems written in C back in 2004, and has spent that entire time learning the paradigms of different programming languages, including C++, PHP, Java, and Haskell - though more recently preferring to work with Go, Rust, and Pony. As a professional technology magpie, David was an early adopter of cloud, containers, and cloud-native technologies. During his time as the Director of Development for a rock and metal media organization called TeamRock (now LouderSound), David was responsible for the software, infrastructure, and website during its biggest test: the unfortunate death of Lemmy Kilmister. Fortunately, due to his desire to experiment and play with new technologies, David and his team had already migrated their slow to provision virtual-machine centric infrastructure to containerised workloads running on Amazon Web Services the year prior, 2014, not long after the public launch of Docker. As much as David enjoys writing software, scaling infrastructure, and leading teams, he quickly realised that his passion was helping others learn and be successful. David started presenting at local user groups in 2016, slowly working up to conferences, before eventually moving into a full-time Developer Advocacy position at InfluxData - where he presented and taught workshops at 42 events in 2019. Outside of technology, David enjoys reading science fiction, drinking craft beer and whisky, and very-very-very slowly learning to play the piano.
Three Featured Speakers
Perfect for highlighting key speakers with balanced visual weight. Ideal for homepage features and conference announcements.

David Flanagan
Rawkode Academy
Founder of the Rawkode Academy, open source contributor, and beloved husband and father to my wife, two amazing kids, and a plethora of animals. David has been developing software professionally for nearly 20 years, starting with embedded systems written in C back in 2004, and has spent that entire time learning the paradigms of different programming languages, including C++, PHP, Java, and Haskell - though more recently preferring to work with Go, Rust, and Pony. As a professional technology magpie, David was an early adopter of cloud, containers, and cloud-native technologies. During his time as the Director of Development for a rock and metal media organization called TeamRock (now LouderSound), David was responsible for the software, infrastructure, and website during its biggest test: the unfortunate death of Lemmy Kilmister. Fortunately, due to his desire to experiment and play with new technologies, David and his team had already migrated their slow to provision virtual-machine centric infrastructure to containerised workloads running on Amazon Web Services the year prior, 2014, not long after the public launch of Docker. As much as David enjoys writing software, scaling infrastructure, and leading teams, he quickly realised that his passion was helping others learn and be successful. David started presenting at local user groups in 2016, slowly working up to conferences, before eventually moving into a full-time Developer Advocacy position at InfluxData - where he presented and taught workshops at 42 events in 2019. Outside of technology, David enjoys reading science fiction, drinking craft beer and whisky, and very-very-very slowly learning to play the piano.
Extreme Microservices: One Service Per Database Column with GraphQL Federation

Gabriele Quaresima
Staff Software Engineer at EDB
I am Software Engineer with focus on Kubernetes operators and PostgreSQL. I have been a speaker on PostgreSQL conferences, KCD events and local events.
CloudNativePG 101

Kasper Borg Nissen
Developer Advocate at Dash0
Kasper is a CNCF Ambassador, former KubeCon+CloudNativeCon Co-Chair, Golden Kubestronaut, KCD Organizer, and CNCG Group Organizer. He co-founded Cloud Native Nordics to unite meetups across the region. As a Developer Advocate at Dash0, he helps make observability easy for developers by advocating for better tooling, best practices, and seamless integrations. Bridging observability and platform engineering, he ensures developers stay productive and gain actionable insights exactly when needed.
The Paved Path to Observability
Compact Speaker List
Space-efficient format for agenda pages and speaker directories. Shows essential information with talk details prominently featured.

David Flanagan
Rawkode Academy

Gabriele Quaresima
Staff Software Engineer at EDB
EDB

Kasper Borg Nissen
Developer Advocate at Dash0
Dash0

Kateryna Firoozi πΊπ¦π³π΄
Platform Engineer/Kubestronaut

Matt Turner
Software Engineer

Michel Murabito
Ambassador CNCF & Developer Advocate @Mia-Platform
Mia-Platform
Speaker Share Images
Branded images speakers can share on their own social media with βIβm speaking at [event]β message. Includes QR code linking to their speaker profile and talk details.
π‘ Try the Download Feature!
Click βDownload as PNGβ below the first speaker card to save a high-quality image. The download may take a few seconds to process as it waits for all content (including QR codes) to load properly.
Cloud Native Day Bergen 2025

David Flanagan
Rawkode Academy
Extreme Microservices: One Service Per Database Column with GraphQL Federation
Scan QR code to view full profile
Cloud Native Day Bergen 2025

Gabriele Quaresima
Staff Software Engineer at EDB
CloudNativePG 101
Scan QR code to view full profile
Cloud Native Day Bergen 2025

Kasper Borg Nissen
Developer Advocate at Dash0
The Paved Path to Observability
Scan QR code to view full profile
Speaker Directory
Comprehensive speaker listing for conference programs and attendee guides. Maximizes information density while maintaining readability.

David Flanagan
Rawkode Academy

Gabriele Quaresima
Staff Software Engineer at EDB
EDB

Kasper Borg Nissen
Developer Advocate at Dash0
Dash0

Kateryna Firoozi πΊπ¦π³π΄
Platform Engineer/Kubestronaut

Matt Turner
Software Engineer

Michel Murabito
Ambassador CNCF & Developer Advocate @Mia-Platform
Mia-Platform

Rustam Mehmandarov
Chief Engineer | Java Champion | Google Developer Expert for Cloud

Sohan Maheshwar
Lead Developer Advocate
Mixed Layout
Combines different speaker presentation styles for dynamic, engaging layouts. Perfect for conference websites that need visual variety and clear hierarchy.

David Flanagan
Founder of the Rawkode Academy, open source contributor, and beloved husband and father to my wife, two amazing kids, and a plethora of animals. David has been developing software professionally for nearly 20 years, starting with embedded systems written in C back in 2004, and has spent that entire time learning the paradigms of different programming languages, including C++, PHP, Java, and Haskell - though more recently preferring to work with Go, Rust, and Pony. As a professional technology magpie, David was an early adopter of cloud, containers, and cloud-native technologies. During his time as the Director of Development for a rock and metal media organization called TeamRock (now LouderSound), David was responsible for the software, infrastructure, and website during its biggest test: the unfortunate death of Lemmy Kilmister. Fortunately, due to his desire to experiment and play with new technologies, David and his team had already migrated their slow to provision virtual-machine centric infrastructure to containerised workloads running on Amazon Web Services the year prior, 2014, not long after the public launch of Docker. As much as David enjoys writing software, scaling infrastructure, and leading teams, he quickly realised that his passion was helping others learn and be successful. David started presenting at local user groups in 2016, slowly working up to conferences, before eventually moving into a full-time Developer Advocacy position at InfluxData - where he presented and taught workshops at 42 events in 2019. Outside of technology, David enjoys reading science fiction, drinking craft beer and whisky, and very-very-very slowly learning to play the piano.

Gabriele Quaresima
Staff Software Engineer at EDB
I am Software Engineer with focus on Kubernetes operators and PostgreSQL. I have been a speaker on PostgreSQL conferences, KCD events and local events.
CloudNativePG 101

Kasper Borg Nissen
Developer Advocate at Dash0
Kasper is a CNCF Ambassador, former KubeCon+CloudNativeCon Co-Chair, Golden Kubestronaut, KCD Organizer, and CNCG Group Organizer. He co-founded Cloud Native Nordics to unite meetups across the region. As a Developer Advocate at Dash0, he helps make observability easy for developers by advocating for better tooling, best practices, and seamless integrations. Bridging observability and platform engineering, he ensures developers stay productive and gain actionable insights exactly when needed.
The Paved Path to Observability

Kateryna Firoozi πΊπ¦π³π΄
Platform Engineer/Kubestronaut
Kateryna is a Platform Engineer whose journey into the field began from Security and Site Reliability Engineering (SRE). With over half of her career dedicated to building developer platforms, she has navigated multiple trends and challenges to help customers achieve their goals. She is a part of the Cloud Native Community at Sopra Steria.
Platform Engineering: La utviklere være utviklere

Matt Turner
Software Engineer

Michel Murabito
Ambassador CNCF & Developer Advocate @Mia-Platform
Mia-Platform

Rustam Mehmandarov
Chief Engineer | Java Champion | Google Developer Expert for Cloud

Sohan Maheshwar
Lead Developer Advocate
Speaker Display Guidelines
Layout Recommendations
- Featured Layout: Compact yet impactful design for keynote speakers and main announcements
- 3-Speaker Grid: Perfect for homepage highlights and featured speaker sections
- 6-Speaker Grid: Ideal for complete conference lineups and speaker pages
- Compact Format: Use for agenda pages and speaker directories
- Speaker Share Images: Branded 4:5 ratio images for speakers to share βIβm speaking at [event]β with QR codes
- Speaker Spotlight Images: Conference-branded 4:5 ratio promotional images with QR codes for speaker promotion
Content Hierarchy
- Name: Primary focus with largest text size
- Title & Company: Secondary information for context
- Talk Information: Shows format badges and talk titles when available
- Biography: Included in featured and card layouts for depth
- Keynote Badge: Special highlighting for keynote speakers
QR Code Integration
- β’ Automatically generated for social image variants
- β’ Links to full speaker profile and talk details
- β’ High contrast design for reliable scanning
- β’ Optimized size for mobile camera scanning
- β’ White background with dark QR pattern
- β’ Rounded corners to match design language
- β’ Positioned for easy access without UI overlap
- β’ Error correction level ensures scanning reliability
Accessibility & Performance
- β’ High contrast ratios for all text elements
- β’ Keyboard navigation support throughout
- β’ Screen reader optimized alt text and labels
- β’ Focus indicators on all interactive elements
- β’ Optimized images with proper sizing
- β’ Lazy loading for large speaker grids
- β’ Responsive layouts for all screen sizes
- β’ Progressive enhancement for slower connections
Talk Examples
Talk cards and promotions showcase conference presentations with format-specific styling and clear visual hierarchy.
Talk Card Examples
Talk cards showcase conference presentations with format-specific styling and branding elements.
Card Variants
Building Resilient Microservices
Learn how to design fault-tolerant microservices that can handle failures gracefully and maintain system reliability.
Kubernetes Security Best Practices
by Marcus Rodriguez
Essential security patterns and practices for running Kubernetes in production environments.
Learn MoreQuick Start with Helm
Talk Format Showcase
CI/CD in 10 Minutes
Container Orchestration
Deep Dive: Service Mesh
Hands-on GitOps
Talk Promotion Examples
Promotional components for highlighting featured talks and driving engagement.
Banner Promotion
The Future of Cloud Native Computing
by Dr. Kubernetes Expert
Explore the next generation of cloud native technologies and their impact on modern software development. This keynote will cover emerging trends in container orchestration, serverless computing, and edge computing.
Card & Social Promotions
Workshop: GitOps with ArgoCD
by DevOps Specialist
Hands-on workshop covering GitOps principles and practical implementation with ArgoCD.
Lightning: WebAssembly & Cloud
by WASM Enthusiast
Quick dive into how WebAssembly is changing cloud computing.
Observability at Scale
by SRE Lead
Learn to monitor and observe large-scale distributed systems effectively.
Alert/Notice Example
Early Bird Special Ending Soon!
Register before January 31st to secure your spot at 40% off the regular price. Limited seats available for this community-driven event.
Call to Action Examples
Call to action components drive engagement and conversions across the conference website. These reusable components can be customized for different contexts while maintaining consistent branding and accessibility standards.
Standard Call to Action
The default configuration encourages both speaker submissions and ticket reservations with balanced messaging.
Ready to Join the Cloud Native Journey?
Don't miss this opportunity to learn from industry experts and connect with the Bergen cloud native community.
Speaking applications close soon. Secure your spot today!
Organizers Context
When used in organizer-facing contexts, the messaging and button styling adapt to focus on community engagement.
Join Our Community
Whether you're looking to share your expertise or learn from the best, we'd love to have you at Cloud Native Bergen.
Speaker Submission Focus
Configuration that emphasizes speaker submissions while hiding ticket reservations for CFP-focused pages.
Share Your Expertise
Join our community of cloud native experts and share your knowledge with the Bergen tech community.
Speaking applications close soon. Secure your spot today!
Ticket Reservation Focus
Configuration that focuses solely on ticket sales when the CFP period has ended.
Secure Your Spot
Don't miss this opportunity to learn from industry experts and connect with the Bergen cloud native community.
Custom Messaging
Fully customizable title and description for specific campaigns or landing pages.
Early Bird Special
Register now and save 40% on your conference ticket. Limited time offer for the Bergen cloud native community.
Speaking applications close soon. Secure your spot today!
Component Features & Usage
Customizable Props
isOrganizers
- Changes messaging and button stylestitle
- Custom headline textdescription
- Custom description textshowSpeakerSubmission
- Toggle CFP buttonshowTicketReservation
- Toggle ticket button
Design Features
- Gradient background with brand colors
- Responsive button layout (stacked to horizontal)
- Accessible ARIA labels and semantic markup
- Icons from Heroicons for visual clarity
- Conditional urgency messaging
Usage Guidelines
Placement
Use at natural break points in content flow, typically after speaker showcases or information sections.
Frequency
Limit to 1-2 instances per page to avoid overwhelming users while maintaining conversion opportunities.
Context
Adapt button visibility and messaging based on page purpose (CFP pages vs. general conference info).