Styleguide

A buyer-ready component and motion reference.

Use this page to inspect Northframe's palette, typography, cards, image treatment, forms and reduced-motion behavior.

Color tokens

Premium Nordic palette.

Colors are defined in Tailwind and CSS variables for easy customization.

Snow

#F7F4EE

Primary editorial background

Chalk

#E9E4DA

Quiet surfaces and image mats

Fog

#D4D0C7

Subtle panels and dividers

Stone

#8B867D

Metadata and captions

Graphite

#232323

Primary text

Deep North

#111111

High-contrast type and footer

Pine

#3F5146

Primary accent

Clay

#A66A4A

Warm editorial accent

Ice Blue

#9DB7C7

Cool supporting accent

Typography

Editorial type scale.

Small uppercase labels with positive tracking

Display headline for strong project storytelling.

Readable body copy should stay calm, generous and direct. Northframe avoids long line lengths, tiny metadata and decorative type choices that reduce trust.

Small caps metadata label

Buttons and badges

Understated controls.

Pine Badge Clay Badge Ice Badge

Cards

Reusable editorial surfaces.

Basic Card

A quiet surface for grouped content.

48+

projects shipped

Across portfolios, studio sites and focused campaign pages.

2-3 weeks

Foundation Sprint

A focused engagement for independent creatives who need a polished portfolio foundation quickly.

Best for

Freelancers, consultants and personal brands

Homepage direction
Work archive
Contact flow
Launch checklist

Discuss a Sprint

Project cards

Index and image frames.

01 2026

Kinfold House

Architecture Design direction, interface design, Astro build

A calmer project archive with clearer inquiry paths and more time spent on case-study pages.

Open case study →

Styleguide image frame example — Image frame component with Astro optimization.

Service cards

Numbered practice modules.

Web Design

Calm, conversion-aware website design with editorial hierarchy, strong layouts and polished responsive details.

UI/UX Design

Structured interface design for digital products, landing flows and content-heavy experiences.

Creative Direction

Visual and verbal direction for brands that need a more precise point of view online.

Brand Systems

Flexible identity foundations for typography, color, imagery, spacing, components and launch-ready pages.

Forms and accordions

Accessible static patterns.

A focused portfolio can be customized in a few days once content and images are ready. A more involved studio website with several case studies usually takes one to three weeks depending on writing and asset preparation.

Motion notes

Subtle movement, clear fallback.

This panel uses MotionReveal.

Motion effects use opacity, transform and clip-path where appropriate. Visitors with reduced-motion enabled receive immediate content without scroll-linked transforms.