Anytype Design System

Overview

Anytype's hero does something rare among productivity tools: it commits to typographic voice as the primary brand signal. Serif-sans editorial split. The headline breaks mid-sentence between Inter at weight 300 and Riccionets — a display serif with bracketed letterforms — giving the second half of the phrase a literary presence that no competing workspace tool (Notion, Coda, Craft, Obsidian) attempts. The rest of the system is almost aggressively quiet: black, white, and a pastel gradient.

This quietness is the argument. Where Notion uses cobalt-blue CTAs and Linear uses violet-graphite as a surface layer, Anytype offers no chromatic brand signal at all. Button-primary is ink on white canvas with a hairline border, the same move Arc and Patagonia make when they want the product to speak before the brand does.

Key Characteristics:

• Serif-sans headline split: Inter weight 300 for the first clause, Riccionets at 96px for the emotional second clause — Riccionets appears nowhere else on the page.
• Zero chromatic brand primary: no color with brand-layer status and usage above 5; the closest accent is mint-teal (#3cd9b3) at 5 total occurrences.
• Pastel gradient backdrop: warm cream, rose, mint, sky blue, and lavender gradient fills bleed across the lower hero, never touching the text layer.
• 1-bit pixel-art illustration: black-and-white Macintosh-era workspace icons (desktop, calendar, folder) contrast the soft gradient and position Anytype against cloud-first tools visually.
• Uppercase tracking labels at 1px letter-spacing serve as section navigation pills (WHAT / WHY / WHO) — the system's only typographic uppercase treatment.
• Pill rounding dominates: the nav pills and CTA buttons use full-pill radius; feature grid cards have zero rounding.
• Weight 300 body copy: lighter than any competing workspace brand; signals deliberateness over density.

Colors

Structural

• Ink ({colors.ink} — #000000): frequency 169. Used as text (88), bg (7), border (74). The dominant canvas color and the only text tone above the fold — pure black against a white surface, unmodulated by alpha.
• Canvas ({colors.canvas} — #ffffff): frequency 306. Used as text (162), bg (4), border (139). The page floor; also used for text on dark surfaces and as the headline background.
• Ink-muted ({colors.ink-muted} — #5b5b5b): frequency 33. Used as border (33). Mid-gray for dividers and secondary borders.
• Surface-1 ({colors.surface-1} — #3c3c3c): frequency 8. Used as bg (1), border (7). Dark surface for the nav pill (WHAT / WHY / WHO) — the system's only elevated surface.
• Ink-subtle ({colors.ink-subtle} — #808080): frequency 10. Used as text (5), border (5). Tertiary label color.
• Ink-faint ({colors.ink-faint} — #666666): frequency 4. Used as text (2), border (2). Quaternary subtle text.

Accent

• Mint-teal ({colors.mint-teal} — #3cd9b3): frequency 5. Used as text (4), border (1). The only chromatic signal on the marketing surface. Appears in testimonial quote marks and a single inline label — a trace accent rather than a brand primary.

Gradient stops (hero background only)

• Gradient-cream ({colors.gradient-cream} — #ffedbe): gradient fill only, frequency 1. Warm cream stop in the lower-hero gradient.
• Gradient-rose ({colors.gradient-rose} — #ffbcc3): gradient fill only, frequency 1. Pale rose stop.
• Gradient-mint ({colors.gradient-mint} — #cdffea): gradient fill only, frequency 1. Mint green stop.
• Gradient-sky ({colors.gradient-sky} — #b9eeff): gradient fill only, frequency 1. Sky blue stop.
• Gradient-lavender ({colors.gradient-lavender} — #e7d4ff): gradient fill only, frequency 1. Pale lavender stop.
• Gradient-lime ({colors.gradient-lime} — #f1ffc9): gradient fill only, frequency 1. Chartreuse stop at the far end of the gradient.

Typography

Font Families

The system runs two families: Inter (wired as --font-primary: "inter", Helvetica, sans-serif) as the functional voice for every surface, and Riccionets (wired as --font-secondary: "riccionets", Helvetica, sans-serif) as the display serif reserved for the hero headline's emotional second clause.

Hierarchy

Principles

The heaviest weight anywhere on the page is 500 — used for headings and button labels. Body copy at weight 300 is intentionally lighter than most workspace brands, creating a reading texture closer to a newspaper opinion column than a SaaS feature grid. The -5.2px letter-spacing on the 80-88px Inter super-display tier is the most extreme tracking in the system — compress, then release at the Riccionets serif line above.

Note on Font Substitutes

Riccionets is a proprietary display serif. The closest open-source substitute with bracketed serifs and editorial proportions at 96px display scale is Playfair Display (weight 400) or Cormorant Garamond. For the Inter body, Inter is already open-source.

Layout

Spacing System

• Base unit: 4px, with 16px as the dominant page module.
• Tokens: {spacing.xs} 4px · {spacing.sm} 14px · {spacing.md} 16px · {spacing.base} 22px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 44px · {spacing.3xl} 80px.
• Section padding (vertical): ~80px between major sections.
• Card internal padding: 40px top, 32px sides, 62px bottom — deliberate asymmetry that creates breathing room at the base of the feature cards.
• Nav padding: 0px vertical, 16px horizontal — flush to the top edge.

Grid & Container

• Max content width: ~1200px, with a two-column split above the fold (headline left, pixel-art illustration right).
• Feature grid: 4-column row below the fold (Private & Secure / Offline & Online / Work & Play / video thumbnail), each divided by a full-height hairline border.
• Hero: white canvas with the gradient bleeding in from the lower right; headline floats left-aligned with generous top padding.

Rhythm

The page alternates between the editorial headline area (white canvas, serif moment, large negative tracking) and the feature grid area (hairline dividers, functional sans, weight 500 labels). There is no gradient transition between zones — the hero area ends abruptly at the hairline border above the feature grid.

Elevation

The system uses essentially no shadow tier. Elevation is achieved through a single mechanism: the nav pill ({colors.surface-1} — dark charcoal #3c3c3c on white) creates the only tonal lift on the page. Feature cards use hairline borders rather than shadows or background fills to delineate edges.

• Flat (no shadow): all body surfaces, hero, footer.
• Tonal lift: {colors.surface-1} dark pill on {colors.canvas} white — used only for the section navigation (WHAT / WHY / WHO) row.
• Hairline borders: feature grid cards use 1px black borders as dividers; there is no card background differentiation.

Shapes

The radius philosophy is binary:

• {rounded.none} 0px — feature grid cards and structural dividers; the system's sharp moment.
• {rounded.md} 16px — text inputs and form fields.
• {rounded.pill} 9999px — CTA buttons and the WHAT / WHY / WHO nav pills.

There is no intermediate rounding tier. The contrast between sharp feature cards and fully-rounded CTAs is intentional — the product grid is functional, the call-to-action is human-scaled.

Components

button-primary — Ink-black {colors.ink} fill, white text, {rounded.pill} radius, 10x16 padding, 44px height. There is no chromatic primary to fill here; the CTA's authority comes from contrast and the pill shape, not color.

button-secondary — Transparent fill, black text, 1px black hairline border, {rounded.pill} radius. Used for "Log in" and secondary download CTAs.

top-nav — White canvas, black text, 0px vertical padding, 16px horizontal padding, 44px height. The Anytype wordmark sits flush left; "Download" and a hamburger icon sit flush right — no center-aligned nav links, which is unusual for a SaaS marketing site.

nav-link — Transparent, black text at {typography.body-sm}, 10x0 padding. The only nav links are the top-right "Download" text.

hero-heading — Black text on transparent, {typography.display-xl} (96px Riccionets). Zero horizontal padding; the serif headline sits flush left with no safe zone.

hero-heading-serif — The split-voice version: the first clause uses Inter weight 300 at matching scale, then the second clause drops to Riccionets. Both share the display-xl token scale.

body-paragraph — White text (for the testimonial dark card surface) at {typography.body-lg} (18px / weight 300). The below-fold testimonials invert to a black or near-black card.

body-paragraph-dark — Black text at {typography.body-md} for feature grid descriptions under each column heading.

section-heading — Black text, {typography.heading-lg} (48px / 500), used for section h2 labels like "Private & Secure" inside the feature columns.

card — White canvas fill, black text, zero radius, 1px black hairline border. Asymmetric padding: 40px top / 32px sides / 62px bottom. Used for the 4-column feature grid below the fold.

feature-label — Black text, {typography.body-sm} at weight 500. The bolded label above each feature description in the 4-column grid.

nav-pill — Dark charcoal {colors.surface-1} fill, white text at {typography.label-caps} (14px / uppercase / 1px tracking), {rounded.pill} radius. The WHAT / WHY / WHO section-navigation row.

text-input — White canvas fill, black text, {rounded.md} 16px radius, 1px black border, 16px padding. Used for any inline form fields.

footer — White canvas, ink-muted text at {typography.body-sm}, 52x20x48 padding (top / sides / bottom). Continuous with the page canvas — no surface lift.

Do's and Don'ts

Do use Riccionets (or an editorial serif substitute) exclusively for the headline's emotional clause. The rule is one voice per role — the functional product copy stays in Inter; only the brand statement gets the serif.

Do keep body weight at 300 for paragraph and testimonial copy. The lighter weight is load-bearing: it creates reading texture that separates Anytype from grid-heavy SaaS docs tools without requiring a second font.

Do use {rounded.pill} on all interactive surfaces (buttons, nav pills) and {rounded.none} on all content cards. The binary contrast between round-interactive and sharp-structural is the system's shape language.

Do limit mint-teal ({colors.mint-teal} — #3cd9b3) to trace use — at most 5 occurrences, as in the extraction. Expanding it to fill buttons or card borders would transform a trace accent into a brand primary, which is not what the system does.

Don't add a chromatic primary color to the button-primary component. The ink-on-white button with a hairline border is deliberate — introducing a color fill (cobalt, violet, teal) would signal that the brand color is doing the persuasion, which undercuts the data-sovereignty positioning.

Don't use gradient stops ({colors.gradient-cream} through {colors.gradient-lavender}) as text or border colors. They live exclusively in background fills. Applying them as text would destroy the ink-black / white contrast discipline the rest of the system depends on.

Don't apply the -5.2px letter-spacing from {typography.display-md} to any size below 80px. Extreme negative tracking at body size reads as broken text; it only resolves at large display scale where inter-letter distances remain legible.

Don't use uppercase {typography.label-caps} for body-length copy. The 1px positive tracking is calibrated for 3-6 character labels (WHAT / WHY / WHO); at paragraph length it reads as shouting.

Known Gaps

• Primary CTA hover state: the ink-on-white button's hover behavior is not captured. Common practice would be an ink-muted fill or a border-only inverse, but the captured surface does not confirm either.
• Dark surfaces: the testimonial section appears to use a dark or near-black card, but the extraction captures body text color as white — the card background value is not confirmed.
• Gradient position and timing: the pastel gradient appears to fade in on scroll or be positioned absolutely in the lower-right of the hero; exact positioning, z-index, and any scroll parallax are not captured.
• Mobile type scale: the extraction reflects desktop sizes. Riccionets at 96px would require significant downscaling on mobile; the responsive breakpoints are not represented here.
• Riccionets character set: the extraction confirms the family name but not the weight range, style variants, or language coverage of the Riccionets typeface.
• Form states: text-input error, focus, and disabled states are not captured from the marketing surface.
• Animation: the hero pixel-art illustration and gradient may animate on load; the spec captures static end-state values only.