---
title: "Aninix design system"
variant: extended
source: https://www.aninix.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/aninix-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Aninix · Design System

> A quiet canvas for motion-rich design

**Theme:** light · **Industry:** design · **Source:** https://www.aninix.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Aninix pairs a restrained white interface with large, expressive motion-work samples. Centered typography and generous whitespace keep the Figma plugin message clear while a gallery of animated examples supplies colour and personality.

## North star

Keep the interface quiet and spacious so the animated work, not the chrome, carries the visual energy.

## Overview

The page uses a white canvas as a quiet frame for its product story, with pale gray cards separating the interface from the motion examples. Near-black headings create strong contrast, while muted gray supports navigation, captions, and supporting copy. Blue appears sparingly in the brand mark and small creator labels; brighter blues and other vivid hues mostly belong to the showcased animation artwork, not the core interface. Large, centered system-sans headlines establish a direct hierarchy, balanced by a distinctive Mackinac body face for softer editorial character. The layout stays within a measured 1120px content width: a compact header leads to a spacious centered hero, followed by a varied gallery of large video samples and a contributor testimonial wall. Rounded media cards and subtle CTA shadows add polish without heavy borders or decoration. Generous vertical intervals keep the long page airy, while the sample work supplies visual density and contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and the open space around the hero, gallery, and footer. |
| Soft Graphite | `#333333` | `--color-soft-graphite` | neutral | Main supporting text and long-form copy, softer than the darkest headings. |
| Mist Surface | `#f0f0f0` | `--color-mist-surface` | surface | Pale card surface behind selected media samples. |
| Motion Blue | `#1d9bf0` | `--color-motion-blue` | accent | Blue gradient accent detected in the interface; keep it secondary to the white canvas. |
| Plugin Indigo | `#374fd5` | `--color-plugin-indigo` | brand | Small brand mark and creator attribution labels; not a large page background. |
| Ink Black | `#171717` | `--color-ink-black` | neutral | High-contrast hero and section headings. |
| Quiet Slate | `#89909a` | `--color-quiet-slate` | semantic | Muted navigation links, captions, and secondary interface text. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Measured text and on-accent text; use only where the screenshot supports near-black content. |
| Night Panel | `#0b1118` | `--color-night-panel` | semantic | Dark tones visible within showcased animation previews, not the main interface canvas. |
| Cool Haze | `#ced3d9` | `--color-cool-haze` | semantic | Subtle gray-blue measured in text details and supporting artwork. |
| Slate Detail | `#5c6574` | `--color-slate-detail` | semantic | Low-emphasis text detail; keep subordinate to the primary text palette. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f0f0` (Mist Surface) · `--color-text` → `#171717` (Ink Black) · `--color-text-muted` → `#333333` (Soft Graphite) · `--color-text-subtle` → `#89909a` (Quiet Slate) · `--color-accent` → `#374fd5` (Plugin Indigo) · `--color-accent-2` → `#1d9bf0` (Motion Blue) · `--color-on-accent` → `#000000` (Pure Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#f0f0f0` | 15.73:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#f0f0f0` | 11.09:1 | AAA |
| `#89909a` | `#ffffff` | 3.22:1 | AA-large |
| `#89909a` | `#f0f0f0` | 2.83:1 | fail |
| `#374fd5` | `#ffffff` | 6.48:1 | AA |
| `#374fd5` | `#f0f0f0` | 5.68:1 | AA |

### Gradients

- `linear-gradient(rgb(29, 155, 240) 0%, rgba(29, 155, 240, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| P22 Mackinac Pro Medium | `--font-body` | webfont | 400 | Body copy and editorial supporting text. | Lora |
| system-ui | `--font-display` | system | 400, 500, 700, 800 | Display headings, section headings, captions, and navigation links. | Inter |
| P22 Mackinac Pro Medium Italic | `--font-p22-mackinac-pro-medium-italic` | webfont | 400 | Occasional italic emphasis within editorial copy. | Lora |
| Euclid Circular A Bold | `--font-euclid-circular-a-bold` | webfont | 400 | Minor emphasized interface text and compact brand-adjacent details. | Inter |

- **P22 Mackinac Pro Medium:** Medium-like, bookish character; use sentence case and comfortable reading rhythm.
- **system-ui:** Strong, clean hierarchy; large headings are weighty and tightly composed, with no uppercase styling.
- **P22 Mackinac Pro Medium Italic:** Use sparingly for emphasis; retain natural sentence casing.
- **Euclid Circular A Bold:** Bold geometric sans presence; reserve for brief emphasis rather than extended reading.

### Type scale — Golden Ratio (ratio ≈ 1.626, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 86px | 800 | 1.04 | -0.023em | — | system-ui | Oversized centered hero headline announcing motion design in Figma. |
| h1 | 64px | 700 | 1.13 | 0 | — | system-ui | Primary page title and prominent headline treatment. |
| h2 | 36px | 500 | 1.14 | -0.028em | — | system-ui | Centered section headings introducing gallery content. |
| body | 20px | 400 | 1.4 | 0 | — | P22 Mackinac Pro Medium | Supporting product explanation and contributor testimonial copy. |
| caption | 16px | 400 | 1.44 | 0 | — | system-ui | Small counts, creator credits, and supporting labels. |
| link | 18px | 400 | 1.44 | 0 | — | system-ui | Navigation and text links in the header and footer. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 24, 28, 40, 48, 80, 120 px.
- Section rhythm 80px · element gap 10px · card padding — · max content width 1120px.

The measured content maximum is 1120px, with a centered desktop composition and a compact horizontal header. The hero stacks its headline, supporting line, plugin CTA, and user count along the center axis. Below, a flexible gallery mixes side-by-side media, wide samples, and narrower mobile-format previews rather than repeating identical tiles. Sections breathe with a measured 80px rhythm and comfortable density; the contributor wall and footer continue the long-form vertical flow.

## Shape & elevation

- Radius: button `8px` · card `16px` · link `16px` · xs `8px` · sm `10px` · md `16px`
- Shadow `hairline` (link): `rgba(11, 67, 103, 0.24) 0px 0px 0px 0px`
- Shadow `md` (link): `rgba(104, 116, 123, 0.15) 0px 2px 7px 0px, rgba(104, 116, 123, 0.3) 0px 5px 15px 0px`

The interface is mostly flat, with no prominent border system. Rounded cards define the media gallery, while the plugin CTA uses a soft, layered shadow to lift it from the white canvas. Keep surrounding content clean; let card surfaces and embedded artwork supply depth rather than adding heavy outlines or broad shadows.

## Imagery

The page is driven by video and animation previews rather than conventional product photography. Samples sit in large rounded rectangular frames, mixing light and dark backdrops, mobile mockups, interface compositions, and vivid graphic artwork. Their colours are intentionally varied and should be treated as content inside the gallery, not as a signal to recolour the surrounding interface. Small creator labels sit close to the media.

## Components

### Header navigation

A compact white top bar with the Aninix mark, muted text links, and right-aligned plugin and login actions, separated from the page by a faint hairline.

### Hero heading

Large, centered system-sans headline above a supporting sentence, with generous clear space before the media gallery.

### Plugin CTA

White, softly shadowed install control with a small Figma mark and concise label; the measured small brand button treatment uses #374fd5 with #000000 text.

### Animation gallery

A varied video-led collection of broad and narrow samples in rounded frames, including light, dark, and colorful works.

### Creator label

Small attribution tags tucked onto showcased media; blue labels use #374fd5 and remain secondary to the artwork.

### Contributor wall

A pale blue-tinted feature area with multiple white testimonial cards, compact copy, and a clear section heading.

### Footer links

Minimal, low-contrast utility links and social icons arranged below a thin divider.

### Measured component styles

- **Primary button** (“by Aninix”): background #374fd5 · text #000000 · radius 8px · padding 4px 8px · 400 12px sans-serif
- **Link** (“In that case, i strongly recommand Anini”): transparent background · text #0000ee · radius 16px · padding 0px · 400 12px sans-serif · shadow rgba(11, 67, 103, 0.24) 0px 0px 0px 0px
- **Card**: background #f0f0f0 · text #000000 · radius 16px · padding 0px · 400 12px sans-serif

## Do

- Keep the main canvas white and visually quiet.
- Center the hero headline and supporting content.
- Use large animation samples as the primary visual feature.
- Reserve #374fd5 for small brand cues and creator tags.
- Use #f0f0f0 as a restrained card surface.
- Leave generous vertical space between major page blocks.

## Don't

- Do not turn the page into a dark interface.
- Do not use gallery artwork colours as global brand colours.
- Do not crowd the hero with extra interface elements.
- Do not add heavy borders around cards.
- Do not repeat a rigid, identical gallery tile layout.
- Do not make muted navigation compete with the headline.

## Agent prompt

Build a new Aninix-style page with a calm white canvas (#ffffff), Ink Black (#171717) headings, and Quiet Slate (#89909a) for secondary navigation and labels. Use a compact top navigation, then a centered hero with a large system-sans headline, a short supporting line, and a softly elevated plugin CTA. Keep the main content within the measured 1120px maximum width and preserve generous vertical breathing room. Showcase the product through a varied gallery of rounded video or animation frames, mixing wide and narrow compositions rather than repeating a uniform grid. Treat vivid artwork as embedded content, not interface palette. Use Mist Surface (#f0f0f0) sparingly behind selected cards and Plugin Indigo (#374fd5) only for small brand marks or creator tags. Finish with a testimonial wall and quiet utility footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero and varied video gallery, followed by a contributor testimonial wall and utility footer. | Primary install-plugin CTA, User-count reassurance, Animated work samples, Creator attribution | Large centered heading, White canvas, Rounded media cards, Varied gallery proportions, Pale testimonial card wall |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/aninix-com