Anytype — design system & UI screens
Secure, Swiss-based encrypted workspace software for running your company and collaborating digitally with absolute data privacy. The landing page hero features a bold headline pairing "A safe haven" with "for digital collaboration" in large serif typography, accompanied by an illustrated icon system showing computer, calendar, files, and productivity tools. Below the hero, three feature cards with color-blocked backgrounds explain core benefits: Private & Secure (data privacy/ownership), Offline & Online (no connectivity required), and Work & Play (communication and collaboration tools), with a centered video call-to-action below.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/anytype.
Decoded design system
Anytype's decoded design system: background #000000, text #ECECEE, accent #3CD9B3, link #C1C8D1, primary #3CD9B3; type scale h1 18px / h2 88px / body 18px; 8px spacing base; 0px base radius. The single interactive/action color is #000000 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #000000 |
| surface | #0E0E0E |
| border | #232323 |
| text | #ECECEE |
| text_muted | #929293 |
| primary | #3CD9B3 |
| accent | #3CD9B3 |
| link | #C1C8D1 |
| button_bg | #000000 |
| button_text | #FFFFFF |
Using these colors
- Action color
#000000— the single interactive color; only on things you click or must notice, never large fills. primary,accentare all#3CD9B3— one role, not several (the action color).- accent
#3CD9B3— accent for emphasis — keep it rare on the page. - link
#C1C8D1— reads as a neutral UI color, not a link accent — verify against the reference (action = #000000).
Typography
- Heading: Helvetica
- Body: Helvetica
- h1: 18px
- h2: 88px
- body: 18px
Spacing
- base unit: 8px
- scale: 4px, 10px, 14px, 16px, 20px, 32px, 40px, 48px, 62px, 64px
Radii
- base: 0px
- button: 6px
Motion
Micro-interactions run at 1000ms (dominant) with ease.
- durations: 1000ms · 500ms · 150ms
- easings:
ease·cubic-bezier(0.4, 0, 0.2, 1) - animated properties: opacity, color, background-color, border-color
Native design tokens
| Token | Value |
|---|---|
--default-transition-duration | .15s |
--default-transition-timing-function | cubic-bezier(.4,0,.2,1) |
--font-secondary | "riccionets",Helvetica,sans-serif |
--font-weight-thin | 100 |
--font-primary | "inter",Helvetica,sans-serif |
--offset-desktop | 16rem |
--offset-mobile | 10rem |
Button states (measured)
- primary hover: background
oklab(0 none none / 0.9) - primary focus: outline
1px auto rgb(16, 16, 16)
Layout (measured)
- container max-width:
1680px - nav: 80px
- common grid: 3 columns
Motion choreography (measured)
Load order: div.h-full → h1.viewport-element-fade-in → div.viewport-element-fade-in×4
Scroll reveal: 20 elements rest at opacity 0, animate in over 1s ease.
Responsive (measured)
- breakpoints: 480px · 768px · 1024px · 1240px · 1440px
- mobile (390px): hero 18px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →