Visual companion
Assets Moodboard
A 20-tile bento showing the system in use. Best for exploring the character of the brand.
grid_viewOpen Assets Moodboardstars01 · Foundation
The internauts design system
A calm, restrained, considered system for building anything under the internauts name — websites, apps, proposals, decks, checkout pages. This document is the written reference. The moodboard is the visual companion.
The system rests on three fonts, eight colors, one wordmark family, and one mark. Everything else — buttons, layouts, iconography — flows from those primitives.
Font library
fonts.internauts.app
Source files for Sharp Grotesk, NORD, and Cygnito Mono. Internauts team members only — sign in with your Internauts credentials.
open_in_newGet the fontsexplore02 · Foundation
Principles
Four rules the system was built around. When a decision feels off, one of these is usually why.
Restraint over range
Three fonts is enough. Eight colors is enough. One accent is enough. The system's confidence comes from what it refuses to add.
Editorial over decorative
Whitespace, rules, and hierarchy do the work. Gradients, shadows, and glassmorphism don't. If a border-radius, a shadow, or a fill is decorative rather than functional, it's wrong.
Readability over cleverness
The wordmark is always lowercase — except in ALL CAPS NORD moments. Headlines never take a period. Body copy uses Sharp Grotesk Book 20, sized for reading, not for volume.
Honest failure
When a color pairing fails WCAG, the system shows the failure — dimmed, labeled, ratio visible. It doesn't hide it. This applies to type, color, contrast, and every component decision.
text_fields03 · Visual language
Type system
Three fonts, five roles. Every text element on every internauts surface uses one of these five styles.
Display
Site redesign
Sharp Grotesk Thin 2544 / 44-0.02em
Headline
A calmer checkout
Sharp Grotesk Book 2532 / 34-0.025em
Body
We build accessible websites, research-led products, and the occasional strange side-project — each one considered.
Sharp Grotesk Book 2015 / 220em
Statement
we are internauts
NORD Regular16 · ALL CAPS+0.2em
Label
INV-2026-0142 · USD 4,850.00
Cygnito Mono13+0.06em
The three fonts
Sharp Grotesk — everything readable. Headlines, body, amounts. Comes in Book 20/25, Light 25, Thin 20/25 — the width numbers control expansion.
NORD — statement moments only. ALL CAPS. Used sparingly for one loud moment per surface, never for body copy.
Cygnito Mono — labels, numerals, invoice IDs, tiny metadata. Anywhere a mono adds precision or texture.
palette04 · Visual language
Color palette
Eight colors. Ink is the anchor. Paper is the surface. Orange is the accent. Everything else is earned. Click any swatch to copy its hex.
ink
#12103A
navy
#24335F
periwinkle
#B9B1FC
orange
#FF7700
forest
#263F04
moss
#638D32
neon
#00FF00
paper
#F5F5F5
Body copy on dark surfaces = paper #F5F5F5. Periwinkle replaces white for headlines and labels on ink. Two darks never touch.
Roles
Anchor
Ink #12103A is the primary dark. Every headline, wordmark, and border defaults to ink.
Surface
Paper #F5F5F5 is the base. All pages start on paper unless a specific moment calls for ink.
Accent
Orange #FF7700 is the single loud moment. Use it for one high-emphasis action per surface — never as body color.
Earned
Periwinkle, forest, moss, neon, and navy are earned. Each has a specific job — see the moodboard's contrast matrix for sanctioned pairings.
apps05 · Visual language
Iconography
Google Material Symbols · Sharp · weight 300. Loaded once from Google Fonts, used everywhere as CSS-inflected glyphs.
The Sharp variant matches the calm-geometric character of the wordmark. Weight 300 keeps icons quiet enough to sit alongside body text without pulling focus.
Recommended set
arrow_forwardarrow_forward
arrow_backarrow_back
checkcheck
closeclose
expand_moreexpand_more
chevron_rightchevron_right
downloaddownload
content_copycontent_copy
open_in_newopen_in_new
searchsearch
menumenu
locklock
credit_cardcredit_card
receipt_longreceipt_long
paymentspayments
verifiedverified
infoinfo
errorerror
Usage
Load once in <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,300,0,0" />
Then anywhere:
<span class="msym">arrow_forward</span>
title06 · Brand
Wordmark family
Four lockups. Each has a job. All share the same letterforms and the same detached-pixel mark.
Rules
Lowercase always. The word "internauts" is always lowercase — except in the ALL CAPS NORD moment, where it becomes INTERNAUTS.
Never rotate. Never mix cases. Never modify the letterforms. The wordmark is a designed object, not typed text.
Clear space equals the mark's own height on every side. Anything closer breaks the identity.
crop_square07 · Brand
The mark
The ◯ standing alone. Two pieces — chunky T-body plus detached pixel to its left. Uses currentColor so any palette value colors it.
16 · min
24
40
64
96
128
Minimum size · 16px
Below 16px the detached pixel starts to blend with the main body. Below 12px it becomes indistinguishable. Never render the mark smaller than 16px.
Clear space
Reserve at least the mark's own height as clear space on every side. Type, other marks, or graphic elements must not enter that reserve.
image09 · Components
Imagery
Editorial-first. When we don't have a photograph, we lean on the palette itself — flat color blocks with a single mark, wordmark, or icon carrying the meaning.
Color-block portraits
01 · Ink surface · mark hero
02 · Accent surface · mark hero
Editorial fills
Forest
Moss
Periwinkle
Rules
One subject per frame. A mark, a wordmark, or a single strong photograph — never two competing subjects.
Caption underneath the image, not overlaid on it. Except for editorial hero moments where the caption sits inside the frame at the bottom, always separated by a thin rule.
Aspect ratios: 4:3 for editorial tiles, 16:9 for video, 1:1 for square avatars. No arbitrary crops.
play_circle10 · Components
Motion & video
Motion is functional. State transitions, hover lifts, focus rings, page enter. Never decorative loops, parallax gimmicks, or scroll-triggered narratives without purpose.
01 · Showreel
play_circle
Showreel · placeholder
00:00 / 02:14
Motion tokens
Duration
.16s for micro-interactions (hover color change, focus ring appearing).18s for state transitions (button hover lift, sidebar highlight).24s for enter/exit (modal, drawer)
Easing
ease for most interactions. ease-out for enter transitions. ease-in only when something is dismissed.
What we don't do
No autoplaying video. Every video is user-initiated. Hero video reels sit behind a play button.
No parallax scroll. The eye should track content, not fight it.
No looping background animations unless they carry information (a loading state, a live data stream).
verified11 · Brand
Signature seals
The "made by internauts" mark we drop into apps and sites we build. Embed only, not for download.
How to embed
Click copy embed on either seal. The inline SVG snippet lands in your clipboard, ready to paste into any HTML file — app footer, PDF cover page, project sign-off.
Do not host these as files on external sites. The seals live here as inline HTML to keep the geometry, colors, and any future updates under one canonical source.
download12 · Resources
Downloads
Every downloadable asset in one place. SVG only — export to PNG from your design tool if you need raster.
Wordmarks · on paper
title
internauts-logo
Primary wordmark · whisper mark · ink on paper
apps
internauts-icon-logo
Mark + wordmark signature · ink on paper
description
internauts-design-wordmark
Stacked formal lockup · ink on paper
campaign
we-r-internauts-wordmark
Two-line editorial lockup · ink on paper
Wordmarks · on ink
title
internauts-logo · light
Primary wordmark · paper fill for use on ink
apps
internauts-icon-logo · light
Mark + wordmark · paper fill
description
internauts-design-wordmark · light
Stacked · paper fill
campaign
we-r-internauts-wordmark · light
Two-line · paper fill
Mark · standalone
crop_square
internauts-mark
Standalone glyph · currentColor · 86×55 viewBox
favorite
favicon
Square canvas · ink fill · ready for <link rel="icon">
Fonts
font_download
Sharp Grotesk · NORD · Cygnito Mono
Source files at fonts.internauts.app · Internauts team credentials required