--- name: Anytype tagline: Pure-black canvas, white ink, and a multi-color 'any' palette — a local-first, encrypted knowledge base that turns privacy into a colorful object. updated_at: 2026-05-29T21:45:12.977Z published_at: 2026-05-29T21:45:12.977Z author: webdesignhot source_url: https://anytype.io spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [dark, sans, minimal, colorful, local-first, privacy, notes, encrypted] preview_swatch: ['#000000', '#3cd9b3', '#18a3f1'] related: [obsidian, notion, omnivore] description: 'Anytype''s site is a pure-black `#000000` canvas with white `#ffffff` ink and a signature multi-color "any" palette that makes encryption look playful instead of paranoid — a teal `#3cd9b3` "Download" CTA accent backed by a four-color object spectrum (teal `#3cd9b3`, blue `#18a3f1`, green `#4cad00`, amber `#ffb522`). Display copy sets large in a quirky display face (live-probed at 88px) while the body runs clean in `ui-sans-serif` / Inter — a contrast of warm personality up top and calm legibility in the running text. Where most privacy tools dress in cold grayscale and lock icons, Anytype goes the opposite way: a true-black workspace lit by bright, friendly object colors, the way colored blocks light up the app''s own canvas. The result is "local-first, end-to-end-encrypted, no-account-required" rendered not as a security warning but as a colorful, human, safe-haven aesthetic — a knowledge base you''d actually want to live inside.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. colors: bg: '#000000' # pure-black page canvas — the app's own dark workspace bg-deep: '#000000' # there is no deeper well — black is the floor surface: '#0d0d0d' # raised card / panel surface, one hair off pure black surface-elev: '#1a1a1a' # nested card / hovered surface surface-hover: '#242424' # interactive hover fill (ghost button, list row) text: '#ffffff' # primary body + display copy — pure white on pure black text-strong: '#ffffff' # peak display — same white, no brighter step exists text-secondary: '#b8b8b8' # secondary running-text, deck copy text-muted: '#8a8a8a' # captions, metadata, footer links text-faint: '#5c5c5c' # disabled / placeholder / fine print brand: '#3cd9b3' # signature teal — the "Download" CTA accent (live-probed) brand-hover: '#2fc4a0' # pressed / hover state — one stop deeper teal brand-active: '#27a98a' # active / depressed CTA teal brand-text: '#3cd9b3' # teal as text on black — passes AAA, no lightening needed brand-soft: '#0e2b25' # teal-tinted soft fill for badges / highlights on-brand: '#000000' # black text on the bright teal CTA (the bright fill demands dark ink) any-teal: '#3cd9b3' # the 'any' palette — object color 1 (primary / brand) any-blue: '#18a3f1' # the 'any' palette — object color 2 any-green: '#4cad00' # the 'any' palette — object color 3 any-amber: '#ffb522' # the 'any' palette — object color 4 border: '#262626' # default hairline divider on black border-soft: '#1a1a1a' # near-invisible structural divider border-strong: '#3a3a3a' # focused input / emphasized edge border-brand: '#3cd9b3' # focus ring + active-input edge (teal) shadow-ambient: 'rgba(0,0,0,0.50)' # subtle lift on black shadow-card: 'rgba(0,0,0,0.65)' # raised card / dropdown shadow-modal: 'rgba(0,0,0,0.80)' # heavy lift for modals / popovers scrim: 'rgba(0,0,0,0.70)' # modal backdrop over canvas success: '#4cad00' # confirmation green — reuses the 'any' green success-soft: '#0f2200' warning: '#ffb522' # advisory amber — reuses the 'any' amber warning-soft: '#2a1d00' danger: '#ff6a7b' # error red on dark (matches the media-player accent var) danger-soft: '#2e1115' info: '#18a3f1' # informational accent — the 'any' blue typography: display: family: '"Riccione", "Riccionets", Inter, system-ui, -apple-system, sans-serif' weights: [400, 500, 700] opentype-features: ['kern', 'liga'] body: family: 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace' weights: [400, 500] scale: display-hero: { size: 88, weight: 400, lineHeight: 1.0, tracking: '-0.02em', family: display, opentype: ['kern'] } display-lg: { size: 64, weight: 400, lineHeight: 1.05, tracking: '-0.018em', family: display } h1: { size: 48, weight: 500, lineHeight: 1.1, tracking: '-0.015em', family: display } h2: { size: 36, weight: 500, lineHeight: 1.15, tracking: '-0.012em', family: display } h3: { size: 26, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: body } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } title-lg: { size: 18, weight: 600, lineHeight: 1.4, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } button: { size: 15, weight: 600, lineHeight: 1.2, tracking: '0', family: body } nav-link: { size: 15, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } overline: { size: 11, weight: 600, lineHeight: 1.3, tracking: '0.08em', family: body, transform: uppercase } code: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono } code-micro: { size: 12, weight: 400, lineHeight: 1.5, tracking: '0', family: mono } radius: micro: 2 sm: 4 md: 8 # buttons + inputs — the workhorse rounding lg: 12 # cards / panels xl: 16 # large feature shells / app screenshots pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1280 prose-width: 720 header-height: 64 hero-height: 640 components: cta-primary: bg: '#3cd9b3' color: '#000000' radius: 8 padding: '12px 20px' height: 44 font: button use: 'The signature "Download" CTA — bright teal fill, black text, 8px radius. The brightest single object on the black canvas.' cta-primary-hover: bg: '#2fc4a0' color: '#000000' radius: 8 use: 'Hover — one stop deeper teal. Subtle, color-only; the bright teal is loud enough at rest.' button-ghost: bg: 'transparent' color: '#ffffff' border: '1px solid #262626' radius: 8 padding: '12px 20px' height: 44 font: button use: 'Secondary action — outlined ghost on black. Fill warms to #242424 on hover. "Read the docs", "Join community".' button-quiet: bg: 'transparent' color: '#b8b8b8' radius: 8 padding: '10px 14px' use: 'Tertiary / nav-adjacent text button. Text brightens to #ffffff on hover, no border.' card: bg: '#0d0d0d' color: '#ffffff' border: '1px solid #262626' radius: 12 padding: '24px' use: 'Feature panel — raised a hair off pure black via surface tone + hairline. An object color often tints the icon or top accent.' card-elev: bg: '#1a1a1a' color: '#ffffff' border: '1px solid #3a3a3a' radius: 12 use: 'Nested / hovered card — a second tonal step up off black.' card-object: bg: '#0d0d0d' color: '#ffffff' border: '1px solid #262626' radius: 12 accent: 'one of any-teal / any-blue / any-green / any-amber' use: 'Object card — mirrors the app, where each object (page, set, space) carries its own color. The accent appears as the icon tint or a left/top color bar.' input: bg: '#0d0d0d' color: '#ffffff' border: '1px solid #262626' radius: 8 height: 44 padding: '10px 14px' placeholder: '#5c5c5c' focus: 'border becomes #3cd9b3 (1px) + faint teal ring' use: 'Text input — sits one tone off canvas, teal focus edge.' badge-soft: bg: '#0e2b25' color: '#3cd9b3' radius: 9999 padding: '3px 10px' font: caption use: 'Inline tag / status chip — teal-tinted soft fill, teal text. "New", "Open-source", version tags.' badge-neutral: bg: '#1a1a1a' color: '#8a8a8a' border: '1px solid #262626' radius: 9999 padding: '3px 10px' font: caption use: 'Neutral metadata chip — platform / category tags.' badge-object: bg: 'transparent' color: 'one of #3cd9b3 / #18a3f1 / #4cad00 / #ffb522' radius: 9999 padding: '3px 10px' border: '1px solid currentColor' font: caption use: 'Object chip — the multi-color register. A row of these in different object colors is the brand signature.' nav-top: bg: '#000000cc' color: '#ffffff' height: 64 border: '0 0 1px 0 solid #262626' use: 'Sticky top nav — translucent pure-black with backdrop blur, hairline bottom border. Anytype wordmark left, links centre, teal "Download" CTA right.' link-inline: color: '#3cd9b3' use: 'Inline body link — teal (AAA-safe on black). Underline appears on hover.' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-out: 'cubic-bezier(0.0, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 button-hover: 'background 150ms standard — colour only, no transform' link-underline: 'underline fades in over 150ms on hover' scroll-reveal: 'sections fade + 8px rise over 320ms ease-out on viewport entry' object-color-cycle: 'optional — object accents / illustrations may gently cycle through the any-palette; decorative only' reduced-motion: 'respects prefers-reduced-motion: reduce — scroll-reveal becomes static render, colour-cycle pauses, transforms suppressed' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'rgba(0,0,0,0.50) 0 1px 2px 0' card: 'rgba(0,0,0,0.65) 0 8px 24px -8px' modal: 'rgba(0,0,0,0.80) 0 24px 64px -16px' ring: '0 0 0 3px rgba(60,217,179,0.40)' accessibility: contrast-text-on-bg: 21.0 # #ffffff on #000000 — AAA (the maximum possible ratio) contrast-text-on-surface: 19.7 # #ffffff on #0d0d0d — AAA contrast-on-brand: 13.7 # #000000 on #3cd9b3 — AAA (black label on bright teal CTA) contrast-brand-on-bg: 11.2 # #3cd9b3 on #000000 — AAA (teal is safe as text on black) contrast-blue-on-bg: 6.8 # #18a3f1 on #000000 — AA (object blue as text) contrast-green-on-bg: 5.1 # #4cad00 on #000000 — AA large / UI; thin text needs care contrast-amber-on-bg: 11.5 # #ffb522 on #000000 — AAA (object amber) contrast-secondary-on-bg: 11.0 # #b8b8b8 on #000000 — AAA contrast-muted-on-bg: 6.4 # #8a8a8a on #000000 — AA focus-ring: '3px rgba(60,217,179,0.40) ring + 1px solid #3cd9b3 border on focusable controls' reduced-motion-honored: true touch-target-min: 44 dark-mode: 'dark-only' # The marketing site is dark-only — pure black canvas mirroring the app's dark workspace. The Anytype app itself ships light + dark themes plus per-object colors; the public site commits to black as a brand-identity choice. --- ## 1. Visual Theme & Atmosphere Anytype's site opens onto a **pure-black `#000000` canvas** — not the near-black `#0f0f0f` that most dark sites use as a polite softening, but the true, absolute zero of the screen. White `#ffffff` ink sits on top at full strength, and the page's display copy lands large and characterful in a quirky display face (live-probed at 88px). The first impression is of stepping into the app's own dark workspace lifted onto the web: a void you fill with your own thoughts, lit from within. What separates Anytype from every other privacy and local-first tool is the **color**. Most encryption-forward products dress in cold grayscale, padlock icons, and shield motifs — the visual language of paranoia. Anytype does the opposite. Against the black, it deploys a signature **multi-color "any" palette**: a teal `#3cd9b3` that powers the "Download" CTA, plus a friendly spectrum of object colors — blue `#18a3f1`, green `#4cad00`, amber `#ffb522`. These are the same colors the app uses to tint individual objects (pages, sets, spaces), so the marketing surface literally previews the product's own chroma. The effect is that "end-to-end encrypted, no account required, your data on your device" reads not as a warning label but as a warm, human, *colorful* invitation. The atmosphere is therefore a deliberate paradox: **maximum-contrast seriousness on the canvas, maximum playfulness in the accents.** The black is uncompromising — a statement that this workspace is yours, undistracted, private. But the moment color appears, it appears generously and brightly, a constellation of friendly object hues against the dark. Where Obsidian rations itself to a single purple voltage, Anytype embraces a *palette* — its restraint is in the canvas, not the accents. The teal CTA is the brightest single object on the page; the other object colors orbit it as supporting voices. Typography reinforces the split personality. The display face is warm and a little quirky — it gives headlines a human, almost hand-set feeling — while the body settles into clean, calm `ui-sans-serif` / Inter for total legibility. Large, friendly headlines up top; trustworthy, neutral running text below. The page never lets the personality of the display type compromise the readability of the prose. The result is a page that signals Anytype's whole thesis before you read a word: **black because your workspace is yours and undistracted; bright multi-color because privacy can be joyful, not joyless; clean body sans because the words must always stay legible.** It is a safe haven that happens to be the most colorful room in the privacy-software house. **Key Characteristics:** - Pure-black canvas (`#000000`) — the absolute floor, the app's own dark workspace lifted to marketing - Pure-white ink (`#ffffff`) — full-strength contrast, the maximum-possible 21:1 ratio - A signature **multi-color "any" palette** — teal `#3cd9b3`, blue `#18a3f1`, green `#4cad00`, amber `#ffb522` - Teal `#3cd9b3` is the brand voltage — the "Download" CTA accent and the brightest single element - Object colors mirror the app, where each object (page, set, space) carries its own hue - Quirky display face for headlines (live-probed at 88px) + clean `ui-sans-serif` / Inter body - Privacy rendered as warmth, not paranoia — no padlocks, shields, or cold grayscale - Bright accents demand *black* CTA text (`#000000` on teal), not white — the inverse of dark-mode habit - Hairline `#262626` borders on black define structure; depth comes from tone, not heavy shadow - 8px radius on buttons / inputs, 12px on cards — friendly-but-engineered, never pill-everything - Color is rationed by *canvas discipline* (black does the spacing work) but spent *generously* in accents ## 2. Color Palette & Roles ### Primary - **Canvas** (`#000000`) [→ `bg`]: pure-black page floor — the absolute zero of the screen; the default of everything. - **Deep Well** (`#000000`) [→ `bg-deep`]: there is no darker tone; black is already the floor. Elevation goes *up* from here. - **Ink** (`#ffffff`) [→ `text`]: primary body and display copy — pure white at full strength, hitting 21:1. - **Ink Strong** (`#ffffff`) [→ `text-strong`]: identical to ink — there is no brighter step beyond pure white. ### Brand - **Brand Teal** (`#3cd9b3`) [→ `brand`]: the signature accent — the "Download" CTA fill, focus edge, and the lead voice of the "any" palette. - **Brand Hover** (`#2fc4a0`) [→ `brand-hover`]: CTA hover — one stop deeper teal. - **Brand Active** (`#27a98a`) [→ `brand-active`]: pressed CTA — two stops deeper. - **Brand Soft** (`#0e2b25`) [→ `brand-soft`]: teal-tinted soft fill for badges and inline highlights. ### Accent — the "any" palette This is the brand's defining feature: a **four-color object spectrum**, not a single accent. Each maps to how the Anytype app colors individual objects. - **Any Teal** (`#3cd9b3`) [→ `any-teal`]: object color 1 — also the brand / CTA. The lead. - **Any Blue** (`#18a3f1`) [→ `any-blue`]: object color 2 — links, info, the second voice. - **Any Green** (`#4cad00`) [→ `any-green`]: object color 3 — success, growth, a "live" tone. - **Any Amber** (`#ffb522`) [→ `any-amber`]: object color 4 — warmth, highlight, advisory. A horizontal row of these four — as object chips, icon tints, or illustration fills — is the single most recognizable Anytype move. Use them *together* when invoking the palette; pick *one* (usually teal) when a surface needs a single accent. ### Interactive - **Brand Text** (`#3cd9b3`) [→ `brand-text`]: inline links and teal text *on black* — and crucially, **the saturated brand needs no lightening here**, because on pure black `#3cd9b3` already reaches 11.2:1 (AAA). This is the inverse of Obsidian's dark-purple problem: bright teal on absolute black is one of the most readable accent-as-text combinations possible. - **On-Brand** (`#000000`) [→ `on-brand`]: **black** label on the bright teal CTA. Because the teal fill is so light, the contrast-correct label is dark, not white — `#000000` on `#3cd9b3` is 13.7:1 (AAA), while white on teal would fail. - **Focus Ring** (`rgba(60,217,179,0.40)`) [→ `border-brand`]: 3px teal ring + 1px solid teal border on focused controls. - **Disabled** (`#5c5c5c` text on `#0d0d0d` fill): drained grey, no color. ### Neutral Scale - **Ink** (`#ffffff`) — body, primary display, the dominant text colour (21:1) - **Secondary** (`#b8b8b8`) — deck copy, secondary running-text (11.0:1 AAA) - **Muted** (`#8a8a8a`) — captions, metadata, footer links (6.4:1 AA) - **Faint** (`#5c5c5c`) — disabled, placeholder, fine print ### Surface & Borders - **Canvas** (`#000000`) — page floor - **Surface** (`#0d0d0d`) — raised card / panel, a hair off pure black - **Surface Elev** (`#1a1a1a`) — nested / hovered card, second step - **Surface Hover** (`#242424`) — interactive hover fill (ghost button, list row) - **Border** (`#262626`) — default hairline divider - **Border Soft** (`#1a1a1a`) — near-invisible structural divider - **Border Strong** (`#3a3a3a`) — focused input / emphasized edge ### Shadow Colors Anytype uses **pure-black** shadows (`rgba(0,0,0,…)`) at *high* opacities (0.50–0.80). On a true-black canvas a shadow is the weakest possible signal — it is nearly invisible against the floor it sits on — so most surfaces use **no shadow at all**. Elevation is communicated by stepping the surface tone *up* (`#000000` → `#0d0d0d` → `#1a1a1a`) plus a `#262626` hairline. Shadow is reserved for genuinely floating chrome (dropdowns, modals, the sticky nav at scroll), and is pushed to high opacity purely so it registers. - `rgba(0,0,0,0.50) 0 1px 2px 0` — ambient lift (sticky nav at scroll) - `rgba(0,0,0,0.65) 0 8px 24px -8px` — raised card / dropdown - `rgba(0,0,0,0.80) 0 24px 64px -16px` — modal / popover ### Semantic - **Success** (`#4cad00` on `#0f2200`) — confirmation green — *reuses* the "any" green, so the success state is on-brand. - **Warning** (`#ffb522` on `#2a1d00`) — advisory amber — *reuses* the "any" amber. - **Danger** (`#ff6a7b` on `#2e1115`) — form-error red on dark (this is the one accent imported from the media-player chrome — `--plyr-color-main: #ff6a7b` — and it doubles as the error tone; softened so it doesn't vibrate on black). - **Info** (`#18a3f1` on `#0d2233`) — informational accent — the "any" blue. Anytype's semantic palette is mostly *the brand palette reused*, which is what keeps the whole system feeling unified. ## 3. Typography Rules ### Font Family **Display**: `"Riccione", Inter, system-ui, -apple-system, sans-serif`. Anytype's headlines use a warm, slightly quirky display face (the live probe captured a face resolving to `riccionets` at 88px). It gives headlines a human, almost hand-set personality that softens the severity of the black canvas. Where a build cannot license the display face, **Inter at weight 400–500** is the closest neutral substitute — keep it large and let size, not weight, carry the impact. **Body**: `Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`. The running text is clean, calm, and maximally legible — Inter on platforms that have it, otherwise the system UI sans. The contrast is intentional: characterful display, neutral body. Personality up top, trust in the prose. **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace` — used for code samples, the CLI, and any moment demonstrating Anytype's open-format, local-files pitch. **OpenType features**: `kern` and `liga` on. No custom stylistic sets in body; the display face brings its own character. The two-family decision is the typographic fingerprint. Anytype is a privacy tool that refuses to *look* austere — the quirky display face is the typographic equivalent of the multi-color palette: warmth applied deliberately to a serious subject. The body's neutrality is what keeps long-form reading effortless. Never invert this (a quirky body font would fatigue; a flat display font would lose the brand's warmth). ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | display-hero | display | 88 | 400 | 1.0 | -0.02em | kern | Hero headline — peak moment (live-probed at 88px) | | display-lg | display | 64 | 400 | 1.05 | -0.018em | — | Large section opener | | h1 | display | 48 | 500 | 1.10 | -0.015em | — | Page / section heading | | h2 | display | 36 | 500 | 1.15 | -0.012em | — | Sub-section opener | | h3 | body (Inter) | 26 | 600 | 1.25 | -0.005em | — | Feature title — switches to body sans for clarity | | h4 | body (Inter) | 20 | 600 | 1.30 | 0 | — | Card title | | title-lg | body (Inter) | 18 | 600 | 1.40 | 0 | — | Inline emphasis title | | body-lg | body (Inter) | 18 | 400 | 1.60 | 0 | — | Hero deck — slightly larger body | | body | body (Inter) | 16 | 400 | 1.55 | 0 | — | Default running-text | | body-sm | body (Inter) | 14 | 400 | 1.50 | 0 | — | Card meta, secondary copy | | label | body (Inter) | 13 | 500 | 1.40 | 0 | — | Form label, small UI label | | button | body (Inter) | 15 | 600 | 1.20 | 0 | — | CTA / button label | | nav-link | body (Inter) | 15 | 500 | 1.40 | 0 | — | Top-nav item | | caption | body (Inter) | 12 | 500 | 1.40 | 0.02em | — | Timestamp, fine metadata | | overline | body (Inter) | 11 | 600 | 1.30 | 0.08em | uppercase | Section eyebrow | | code | mono | 14 | 400 | 1.55 | 0 | — | Code / open-format sample | | code-micro | mono | 12 | 400 | 1.50 | 0 | — | Inline shortcut bubble | ### Principles - **Two families, by job.** Quirky display face for headlines (h1–h2 and the hero); clean Inter / `ui-sans-serif` for everything from h3 down. The switch at h3 is deliberate — feature titles must read as crisp UI, not personality. - **Display rides on size, not weight.** The hero sets at 88px / 400 — its impact comes from scale and the face's character, not from bold. Pushing the display to 700 would coarsen its warmth. - **Pure white ink.** Unlike near-black sites that soften ink to `#eeeeee`, Anytype runs `#ffffff` on `#000000` — full 21:1 contrast. The canvas is so dark that pure white reads as crisp, not vibrating. - **Negative tracking on display only.** Hero `-0.02em` tapering to `0` by h4. Body and below stay at `0`; only caption/overline get positive tracking. - **16px body at 1.55 line-height.** Comfortable web body with generous leading — the app's own reading rhythm. - **Mono for open formats.** Code, the CLI, file paths render in `ui-monospace` — making Anytype's "your data in open formats" promise typographic. - **Color the type sparingly.** Body text is white; the "any" palette colors *headlines, accents, and object labels*, never long runs of prose. A colored word is an emphasis, not a default. ## 4. Component Stylings ### Buttons **`cta-primary`** — The signature "Download" CTA. Bright teal `#3cd9b3` fill, **black** text at 15px / 600 (the fill is too light for white text — `#000000` on teal is the contrast-correct pairing), **8px radius**, 12×20px padding, 44px height. This is the brightest single object on the black canvas — everything funnels here. **`cta-primary-hover`** — Pointer hover. Fill deepens to `#2fc4a0` over 150ms standard. **No transform, no scale, no glow** — color only; the bright teal is loud enough at rest. Active → `#27a98a`. **`button-ghost`** — Secondary action. Transparent fill, `#ffffff` text, 1px `#262626` border, 8px radius. On hover the fill warms to `#242424`. Used for "Read the docs", "Join the community", "See the roadmap". **`button-quiet`** — Tertiary / nav-adjacent text button. No border, no fill; `#b8b8b8` text that brightens to `#ffffff` on hover. Used for utility links ("Sign in", "Pricing", "Blog"). ### Cards **`card`** — Feature panel. `#0d0d0d` fill (a hair off pure black), `#ffffff` text, 1px `#262626` hairline border, **12px radius**, 24px padding. **No shadow** — the surface step plus hairline is the elevation language. Inside: h4 title in white, body in `#b8b8b8`. An object color frequently tints the card's icon or a top accent bar. **`card-elev`** — Nested or hovered card. `#1a1a1a` fill, `#3a3a3a` border — a second tonal step up off black. Used for cards-within-cards or as the hover state of `card`. **`card-object`** — The brand-signature card. Same chassis as `card`, but it carries **one of the four "any" colors** as its icon tint and a left or top color bar — mirroring how the app colors each object. A grid of these in alternating teal / blue / green / amber is the most recognizable Anytype layout. **`feature-screenshot`** — App screenshot of the Anytype workspace (showing the black canvas with colored objects — the page literally pictures itself). 16px radius, optional `rgba(0,0,0,0.65) 0 8px 24px -8px` shadow to float it off the canvas. ### Badges, Tags, Pills **`badge-soft`** — Teal-tinted chip. `#0e2b25` fill, `#3cd9b3` text, 9999px radius, 3×10px padding, 12px caption. "New", "Open-source", version tags. **`badge-neutral`** — Neutral metadata chip. `#1a1a1a` fill, `#8a8a8a` text, 1px `#262626` border, pill radius. Platform tags (macOS / Windows / Linux / iOS / Android), category labels. **`badge-object`** — The multi-color register. Transparent fill, an outline + text in **one of the four "any" colors**, pill radius. A row of these in different object colors (teal / blue / green / amber) is the brand-signature chip cluster — used to label object types, spaces, or feature categories. ### Inputs / Forms **`input`** — Text input. `#0d0d0d` fill (one tone off canvas), `#ffffff` text, 1px `#262626` border, 8px radius, 44px height, 10×14px padding. Placeholder in `#5c5c5c`. On focus, the border becomes `#3cd9b3` (1px) with a faint `rgba(60,217,179,0.40)` 3px ring. Newsletter / search / space-name fields. **`select` / `dropdown`** — Same chassis as input; chevron in `#8a8a8a`. Open panel uses `card` surface (`#0d0d0d`) with `shadow-card`. ### Navigation **`nav-top`** — Sticky top nav, 64px height. Translucent pure-black (`#000000cc`) with backdrop blur so content blurs behind it on scroll, and a 1px `#262626` bottom hairline. **Anytype wordmark** flush left in `#ffffff`. Centre: nav links (Product, Use cases, Pricing, Community, Docs) in 15px / 500 white. Right: a `button-quiet` link + the teal `cta-primary` ("Download"). **`nav-link`** — `#ffffff` at rest, no underline. Hover brings a subtle teal `#3cd9b3` underline / color lift. Active page link stays full white with a teal underline. **`footer`** — `#000000` background (the canvas continues; there is no deeper well), column heads in 13px / 600 white, links in 14px / 400 `#8a8a8a`. The wordmark reappears, muted. Multi-column: Product / Community / Resources / Company. Open-source / GitHub link is prominent — it is part of the trust pitch. ### Decorative **`object-constellation`** — An optional cluster of colored object cards / icons floating on the black canvas, each in a different "any" color (teal, blue, green, amber). Edges may gently cycle color or drift on viewport entry. Purely decorative — `aria-hidden="true"`. This is the visual that distinguishes Anytype from grayscale privacy tools. ## 5. Layout Principles ### Spacing System - Base unit: **4px** - Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128` - Section padding (vertical): 96–128px between major bands — generous, lets the black canvas breathe - Card internal padding: 24px on feature cards; 16px on compact list rows - Inter-card gutters: 24px in feature grids - The black canvas does a lot of the spacing work — empty pure-black space reads as deliberate calm, the room your thoughts go in ### Grid & Container - Max content width: **1280px** — standard modern marketing width - Prose / reading column: 720px for long-form (docs, blog) - Hero: single-column, centred — H1 + deck + the teal CTA + an app screenshot beneath (optional object-constellation behind) - Feature grid: 3-up at desktop → 2-up at tablet → 1-up at mobile, often as `card-object` tiles in alternating "any" colors - 24px gutters; the grid sits inside the 1280px container with generous side margins on wide screens ### Whitespace Philosophy On a pure-black canvas, **negative space is the primary compositional tool** — and Anytype's black is darker and more total than most. Where a light site fills space with subtle tints, Anytype leaves the canvas pure black and empty; the void reads as focus and calm, the room you fill with your own knowledge. Surfaces (cards) appear only where there is content to hold; between them is `#000000`. The colored objects pop *because* the space around them is so dark and so empty. ### Section Cadence A typical Anytype page runs: 1. **Hero** — large display H1 (88px / 400 in the quirky display face), 18px deck in `#b8b8b8`, teal `cta-primary` "Download", app screenshot floating beneath (optional object-constellation behind) 2. **Value spread** — 3-up `card-object` tiles in alternating "any" colors (Local-first · Encrypted · Open formats) 3. **Workspace showcase** — the signature black-canvas-with-colored-objects screenshot, large, with a short caption — the product's most recognizable surface 4. **Privacy / trust band** — end-to-end encryption, no account required, open-source — presented warmly with colored icons, not lock motifs 5. **Community / open-source band** — GitHub, contributors, the self-host story 6. **Closing CTA band** — a centred restatement of the teal "Download" CTA over empty black canvas 7. **Footer** — pure-black, muted multi-column links, prominent open-source link The page does not alternate light/dark — it is black throughout. The "alternation" is canvas (`#000000`) vs. card surface (`#0d0d0d`) tonal contrast, punctuated by the bright object colors. ## 6. Shapes & Radius Scale | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Inline code chips, tiny indicators | | Small | 4px | Nested elements, fine controls | | Standard | 8px | Buttons, inputs — the workhorse rounding | | Comfortable | 12px | Cards, panels, object tiles | | Large | 16px | Feature shells, app screenshots | | Pill | 9999px | Badges, object chips, neutral tags | Anytype's radius hierarchy is **friendly-but-engineered** — the dominant 8px on buttons and inputs is the modern-app sweet spot: rounded enough to feel approachable, crisp enough to feel like a real tool. Cards step to 12px (a touch softer than Obsidian's, in keeping with the warmer register); the largest shells and screenshots to 16px. Pill radius is reserved for badges and object chips — the page never makes a pill *button*, because the CTA should read as a crisp, serious action while the chips stay soft and labelly. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 — Canvas | no shadow, `#000000` | The page floor, hero, empty space (~70% of surface) | | 1 — Surface | tonal step to `#0d0d0d` + 1px `#262626` hairline, no shadow | Feature cards, object tiles, panels | | 2 — Elevated surface | tonal step to `#1a1a1a` + `#3a3a3a` border | Nested / hovered cards | | 3 — Floating | `rgba(0,0,0,0.50) 0 1px 2px 0` | Sticky nav at scroll, subtle inputs | | 4 — Raised | `rgba(0,0,0,0.65) 0 8px 24px -8px` | Dropdowns, popovers, screenshots | | 5 — Modal | scrim `rgba(0,0,0,0.70)` + `rgba(0,0,0,0.80) 0 24px 64px -16px` | Sign-in / space-setup dialog | ### Shadow Philosophy On a **pure-black** canvas, shadow is the weakest signal possible — a `rgba(0,0,0,…)` shadow against `#000000` is *identical to the floor* until you reach high opacity, and even then it only registers around a lighter surface. So Anytype, like every well-built dark interface, inverts the usual elevation strategy: **depth is communicated by stepping the surface *lighter*, not by casting a darker shadow.** A raised card is `#0d0d0d` (lighter than canvas) with a hairline border; a more-raised card is `#1a1a1a`. The `#262626` hairline, not the shadow, draws the eye to a surface edge. Shadow is reserved for chrome that genuinely floats over content (dropdowns, modals, the sticky nav), used at high opacity (0.50–0.80) purely so it registers at all. This is the dark-mode elevation discipline Linear, Vercel, and Obsidian share — Anytype simply pushes it to the limit by starting from absolute black. ## 8. Interaction & Motion ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover color swaps, border transitions - **Out**: `cubic-bezier(0.0, 0, 0.2, 1)` — scroll-reveal entrances - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, dropdown open ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Button hover, link underline, focus-ring fade | | Standard | 240ms | Card hover, dropdown open, border transitions | | Slow | 320ms | Scroll-reveal, modal entry, object-color cycle | ### Per-Component Recipes - **CTA hover**: fill `#3cd9b3` → `#2fc4a0` over 150ms standard. **No transform, no scale.** Active → `#27a98a`. Black label stays put. - **Ghost button hover**: transparent → `#242424` fill over 150ms; border unchanged. - **Card hover**: surface lifts a tonal step (`#0d0d0d` → `#1a1a1a`) and border brightens (`#262626` → `#3a3a3a`) over 240ms. Object cards may also brighten their accent. No translate. - **Link hover**: teal `#3cd9b3` underline fades in over 150ms; color holds. - **Focus**: 3px `rgba(60,217,179,0.40)` ring + 1px teal border appears over 150ms on keyboard focus. - **Scroll-reveal**: sections fade in + rise 8px over 320ms ease-out on first viewport entry. One-shot. - **Object-color cycle**: the optional object-constellation may gently cycle accents through the "any" palette — decorative, low-amplitude, never demands attention. ### Page Transitions Navigation is a quiet 240ms cross-fade; the sticky nav stays fixed. Anchored links smooth-scroll over 320ms emphasized. Motion exists to soften state changes, not to perform — the personality lives in the color and type, not in flashy animation. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. Scroll-reveal becomes static render-on-mount (no fade, no rise). The object-color cycle freezes to a static multi-color frame. All translate/scale are suppressed. Color-only transitions (button hover, link color) may remain since they don't induce motion. ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #ffffff ink on #000000 canvas | 21.0 | AAA (the maximum possible) | | #ffffff ink on #0d0d0d surface | 19.7 | AAA | | #000000 label on #3cd9b3 CTA | 13.7 | AAA (black on bright teal — the correct CTA pairing) | | #3cd9b3 brand-text on #000000 | 11.2 | AAA — teal is safe as text/links on black | | #18a3f1 any-blue on #000000 | 6.8 | AA — object blue as text | | #4cad00 any-green on #000000 | 5.1 | AA — large / UI; thin small text needs care | | #ffb522 any-amber on #000000 | 11.5 | AAA — object amber, very legible | | #b8b8b8 secondary on #000000 | 11.0 | AAA | | #8a8a8a muted on #000000 | 6.4 | AA | The critical accessibility nuance is the **inverse of the usual dark-mode trap**: because the canvas is *pure black*, the bright accents read extremely well as text — teal hits 11.2:1 and amber 11.5:1, both AAA. There is **no need to lighten the brand for text** the way a near-black site must. The one thing to watch is the **CTA label**: the teal fill is so light that white text would fail — the correct, contrast-passing label is **black** (`#000000`, 13.7:1). The green `#4cad00` is the weakest object color (5.1:1) — fine for large UI and icons, but avoid thin small green text on black. ### Focus Indicators Focus is a 3px `rgba(60,217,179,0.40)` ring plus a 1px solid `#3cd9b3` border on the focused control. On the black canvas the teal ring is vivid and unmistakable. Focus is never removed; keyboard and pointer users get the same target. ### ARIA Patterns - **Top nav**: `