v1.1 / October 7, 2026: Paired hex values, named scales, heading roles, layout and motion guidance, interactive forms and states, portable tokens, Figma importer, slide and print recommendations.
v1.0: Initial palette, type scale, CTA state matrix, four card templates and case study patterns.
Warm paper, ink, and one teal accent
The foundations, components and rules behind this portfolio. A Scandinavian editorial system built on semantic tokens, so every page stays consistent in light and dark mode.
01 Foundations
Colour
Every colour is a semantic token defined once and mapped to both themes. Components never use raw colour values, which keeps dark mode and future changes safe.
Surfaces
--background
Light: #FAF7F3 Dark: #110E0B
Page canvas, warm paper
--surface
Light: #F3F0EA Dark: #1A1613
Alternating sections
--card
Light: #FDFCF9 Dark: #1A1612
Cards and popovers
--muted
Light: #EFECE7 Dark: #23201C
Quiet fills
--secondary
Light: #EEEBE5 Dark: #23201C
Hover fills
Ink and accent
--foreground
Light: #1B1612 Dark: #EFECE8
Primary text, ink
--muted-foreground
Light: #5C554F Dark: #ADA8A1
Supporting text
--accent
Light: #05A695 Dark: #49BAA9
Teal signature, hover, focus
--accent-soft
Light: #D3EFE9 Dark: #13342F
Teal tint backgrounds
--destructive
Light: #BE2323 Dark: #EF6661
Errors only
Lines
--border
Light: #DDD8D2 Dark: #322E2A
Dividers, card edges
--border-strong
Light: #BFBAB2 Dark: #514C47
Outline buttons, scrollbars
--ring
Light: #05A695 Dark: #49BAA9
Keyboard focus ring
Complete semantic palette. Hex is an sRGB approximation; eight digits include opacity. The site keeps OKLCH for rendering.
Token
Light
Dark
--background
#FAF7F3
#110E0B
--foreground
#1B1612
#EFECE8
--surface
#F3F0EA
#1A1613
--surface-foreground
#1B1612
#EFECE8
--card
#FDFCF9
#1A1612
--card-foreground
#1B1612
#EFECE8
--popover
#FDFCF9
#1A1612
--popover-foreground
#1B1612
#EFECE8
--primary
#1B1612
#EFECE8
--primary-foreground
#FCFAF6
#110E0B
--secondary
#EEEBE5
#23201C
--secondary-foreground
#2A241F
#EFECE8
--muted
#EFECE7
#23201C
--muted-foreground
#5C554F
#ADA8A1
--accent
#05A695
#49BAA9
--accent-foreground
#15110D
#110E0B
--accent-soft
#D3EFE9
#13342F
--destructive
#BE2323
#EF6661
--destructive-foreground
#FCFAF6
#110E0B
--border
#DDD8D2
#322E2A
--border-strong
#BFBAB2
#514C47
--input
#DDD8D2
#322E2A
--ring
#05A695
#49BAA9
--quote-color
#1B1612D9
#EFECE8D9
Brand reference: #01A695. The accent token uses OKLCH and its sRGB conversion can differ slightly. Match the semantic token in product UI; use the approved brand hex for external artwork. Use foreground/background for body text and accent-foreground/accent for teal fills; test at least 4.5:1 for normal text and 3:1 for large text.
Contrast pair
Ink on paper, AAA body text
Accent pair
Ink on teal, used for hover and highlights
02 Foundations
Typography
An editorial serif carries the voice, a precise grotesque carries the information, and a monospace marks metadata. Display sizes are fluid, so headlines scale smoothly from phone to desktop.
Aa
Instrument Serif
Display and headlines
Aa
Schibsted Grotesk
Body, UI and CTAs
Aa
JetBrains Mono
Labels, tags, numbers
Display XL
Instrument Serif, clamp 52-152px, 0.92
Listen Think Feel Design
Display LG
Instrument Serif, clamp 40-84px, 0.98
Listen Think Feel Design
Display MD
Instrument Serif, clamp 32-52px, 1.04
Listen Think Feel Design
Display SM
Instrument Serif, clamp 24-34px, 1.14
Listen Think Feel Design
Lede
Schibsted Grotesk, clamp 17-22px, 1.55
Listen Think Feel Design
Body
Schibsted Grotesk, 16px, 1.625
Listen Think Feel Design
Small
Schibsted Grotesk, 14px
Listen Think Feel Design
Label
Mono, 11px, uppercase, 0.16em tracking
Listen Think Feel Design
Heading roles and size choices
Display XL is the oversized homepage signature. Display LG leads case studies and utility pages. Semantics follow document structure, not visual size; choose the heading level first, then the type token. Existing fluid sizes are preserved in the export.
h1
Display XL / LG
XL: homepage motto only. LG: case study and utility page title. One h1 per page.
h2
Display MD
Main page sections and case study chapters.
h3
Display SM
Subsections within a chapter.
h4
Body large, 18px / 1.4, medium
Small template titles and nested groups.
h5
Body, 16px / 1.625, medium
Rare, only beneath an h4.
h6
Small, 14px / 1.5, medium
Rare, only beneath an h5. Never use labels as headings solely for size.
Body = 16px / 1.625; Small = 14px / 1.5; Label = 11px / 1.1, uppercase. Display tokens currently include negative tracking and fluid clamps as legacy site values, retained to avoid changing the portfolio. For new layouts, use fixed size steps and zero tracking.
03 Foundations
Spacing and shape
An 8pt rhythm with a 4px half step. Corners stay nearly square for an editorial feel, while every interactive pill is fully rounded so actions are easy to recognise.
Spacing tokens, 4px base unit
space-1 = 4px / 0.25rem
Icon micro-gaps
space-2 = 8px / 0.5rem
Icon and label gaps
space-3 = 12px / 0.75rem
Compact control padding
space-4 = 16px / 1rem
Related content gaps
space-6 = 24px / 1.5rem
Phone page gutters, card padding
space-8 = 32px / 2rem
Tablet gutters, card padding
space-12 = 48px / 3rem
Desktop gutters, related groups
space-16 = 64px / 4rem
Large content groups
space-24 = 96px / 6rem
Phone section spacing
space-32 = 128px / 8rem
Tablet section spacing
space-40 = 160px / 10rem
Desktop section spacing
Radius tokens
radius-0 / none = 0px
Unframed sections
radius-1 / sm = 1px
Subtle image corners
radius-2 / md = 3px
Inputs and small media
radius-3 / lg = 4px
Cards and figures
radius-4 / xl = 8px
Larger framed tools
radius-5 / 2xl = 14px
Reserved, not for new cards
radius-6 / full = 9999px
Action pills and circular icons
Elevation tokens
elevation-0 / none
none Page bands and ordinary cards stay flat
elevation-1 / raised
0 10px 24px -14px, ink at 45% Raised action, hover only
elevation-2 / panel
0 1px 2px ink 6%, 0 6px 20px ink 8%, 0 2px 8px teal 10% Open chat and floating tools
Prefer a border and a surface change over a shadow. Raised uses theme ink; panel uses ink and teal. Glow is reserved for the chat launcher, not ordinary cards.
04 Components
CTA states
Three levels of emphasis, each with five states. Hover lifts the action slightly and turns primary teal, focus always shows a visible ring for keyboard users, and disabled states fade without changing shape.
Four templates cover every piece of content on the site. Each has one job, one primary action and a fixed anatomy, so new work slots in without design decisions.
Selected work card
Media 4:3, alternates sides
01 SaaS · LLM · B2C
Project name
One-line positioning of the product
Short narrative of the problem, the role and the result, with key metrics in bold.
"Highlighted testimonials use a teal name to signal a key reference.
Long quotes scroll inside the card with an always-visible grey scrollbar."
Highlighted referenceRole, TitleProject or company
"Standard testimonials keep the name in ink. Quote text is 16px Schibsted Grotesk in a softened ink."
Standard referenceRole, TitleProject or company
06 Patterns
Case study patterns
Case studies are assembled from a small set of blocks: chapters, prose, meta grids, figures, metrics and callouts. Sections alternate between paper and surface to pace long reads.
Chapter 03
Chapter heading
Eyebrow number, serif heading, then prose capped at a readable line length.
Role
Product designer
Timeline
6 months
Platform
iOS, Android
Team
4 people
Metric
+38%
Short label explaining the number
Zoomable figure
Captions describe what to notice, not what is shown.
Decision
Callouts hold a single strategic decision and the reason behind it.
07 Rules
Usage rules
A few rules keep the system honest as the portfolio grows.
One primary action per card
Secondary and tertiary actions support, never compete.
Teal is a signal, not a fill
Use the accent for hover, focus, highlights and eyebrows; soft teal also supports callouts.
Tokens, never raw colours
Every colour comes from the theme so dark mode works for free.
Bold carries the proof
Only numbers and decisions are bolded in prose.
No em dashes
Use commas or a short hyphen in all copy.
Motion is quiet
UI transitions use 150-300ms; content entrances take 700-850ms. Respect reduced motion.
08 / Breakpoints and grid
Mobile-first. Start with one column, add columns only when the content fits. Breakpoints describe available space, not specific devices.
Roomier navigation; containers retain maximum widths
1
2
3
4
5
6
7
8
9
10
11
12
container-default
1344px / 84rem Main page content. Max-width includes gutters.
container-wide
1600px / 100rem Wide media. Max-width includes gutters.
container-text
736px / 46rem Long-form reading. Max-width includes gutters.
Grid gaps: space-8 (32px) on compact layouts, space-12 (48px) on desktop. Section spacing: space-24 / space-32 / space-40 at base / sm / lg. The design guide uses tighter 64px / 96px bands.
09 / Motion
motion-fast = 150ms
Small icon feedback, recommended
motion-base = 250ms
CTA color and lift; existing text links use 220ms
motion-slow = 300ms
Header show/hide and navigation
motion-reveal = 850ms
Hero word entrance; content reveals use 700ms
ease-standard = cubic-bezier(0.16, 1, 0.3, 1), for entrances. UI colors use ease. Flipbook is an exception: 620ms, cubic-bezier(0.45, 0.05, 0.25, 1). Magnetic springs: stiffness 120, damping 30. Reduced motion disables entrances and nearly removes transitions; no information may depend on movement.
Think
10 / Forms and inputs
Labels stay visible above controls. Use 16px input text and at least 44px height on phones. Put errors beside the field, preserve the entered value and do not rely on color alone.
Enter a complete email address.
Default: input border. Hover: stronger border. Focus: ring token and visible outline. Disabled: 50% opacity, no interaction. Error: destructive border plus clear text. Loading submission: keep button width, label and spinner; prevent duplicate submission.
11 / Navigation
Header identity returns to the top. Active section gets a teal underline and an accessible current state. Below 1280px, use a named menu button; Escape closes the menu and a selected link closes it too. On phones below 768px the header hides on downward scroll and returns upward.
In-page anchors are for one page; separate case studies use distinct pages. Visible link labels describe the destination. External links need a clear destination and safe new-tab behavior.
12 / Icons and images
Icons
Lucide, 1.5px stroke. icon-1 = 16px for buttons, icon-2 = 20px for navigation, icon-3 = 24px for status. Keep touch targets at least 44 × 44px. Decorative icons are hidden from assistive technology; icon-only controls need names and tooltips. Do not mix filled and outlined styles.
Images and video
Portrait: 4:5. Article covers: 16:10. Experiment media: 16:9. Selected-work 4:3 is a template suggestion, not a crop rule; existing mockups keep their natural proportions at 220-300px high. Screenshots use contain, never crop away UI. Use WebP for photos, PNG for transparent details and original-quality videos. Set dimensions or aspect ratio before loading, provide meaningful alt text, zoom for detail and captions for video. Only the first portrait is eagerly loaded; preload and image must share responsive candidates.
13 / Empty, loading and error states
No articles yet
New writing will appear here.
Reserve the same media area in every state. Empty is not an error. Loading uses a named status and stable skeleton. Errors offer one recovery action and never expose technical diagnostics. Keep unrelated content usable.
In Figma Desktop, open a file you own. Choose Plugins, Development, Import plugin from manifest, and select manifest.json.
Run the imported plugin once. It creates a local collection with Light and Dark modes and named color, spacing, radius, breakpoint and motion variables.
Publish that collection to your team library if your Figma plan supports it. Re-running creates a new collection; remove the old one before updating.
This is a working local importer, not a live published Figma file. Colors are sRGB approximations of the source OKLCH values. Numeric dimensions bind directly; motion uses milliseconds. Font, fluid typography, easing and elevation strings are reference variables, not ready-made text or effect styles. The ZIP includes instructions and the token data. No account connection or API key is needed.
CSS: apply the variables to your own elements and toggle the .dark class. JSON: color has light/dark values, scales include units and typography retains source expressions. These files are plain portable tokens, not a proprietary plugin format.
15 / Do and don’t
Do
Use one solid CTA: Read the case study; keep View live outlined.
Keep screenshot labels and product screens visible.
Use semantic color pairs in both themes.
Keep h1 → h2 → h3 in reading order.
Use only measured results as results; label targets as assumptions.
Don’t
Give every action equal primary emphasis.
Stretch images or crop essential UI.
Lock text to light-mode colors.
Skip heading levels just to make text small.
Present illustrative metrics as measured outcomes.
ReadVisitContact
16 / Slide decks and print
Slide decks
Use a 16:9 canvas, a 12-column grid and 48px outer margins at 1920 × 1080. These are adaptation recommendations, not website layout values. Translate fluid headings to fixed 48-64pt titles, 24-28pt body and at least 18pt labels. One argument per slide. Keep the serif title, grotesk body, paper canvas and teal emphasis. Embed fonts or export to PDF; verify projector contrast.
Print
Use the light theme on white paper. A4: 18-20mm margins, 24-32pt titles, 10-12pt body with 1.4-1.5 line height. Use solid ink for body text instead of transparent quote ink. Supply 300dpi photos and vector logos, remove animation and hover dependency, expand scrollable quotes and add written destinations to links. Request a printer-specific CMYK conversion and a proof; a hex color is not a guaranteed print match.