Indigo Switch
#374fd5Violet action color for filled buttons, selected navigation states, and focused conversion moments.
Aninix
aninix.comWebsite preview
The design language
Aninix operates on near-total chromatic restraint: a white canvas, bold confident type, and a single electric indigo that activates only where human intent lives. The page reads like a minimalist product gallery — every element is either pure structural gray or that one vivid blue-violet, which makes the brand color feel like a switch being thrown rather than decoration. Components are flat, lightly bordered, and generous with whitespace; the layout alternates light and dark showcase cards to let the product work breathe. Typography is large, heavy, and unapologetic — a 64px-plus display headline against a quiet field, with body text that stays at human scale.
Color palette
brand
neutral
Pure White
#ffffffPage canvas, button surfaces, card backgrounds, reverse text on dark blocks
Soft Mist
#f0f0f0Secondary card surfaces, subtle fill blocks beneath product showcases
Carbon Black
#000000Primary text, heavy icon strokes, structural borders, divider lines
Ink Black
#171717Heading text, deep borders where pure black feels too sharp
Shadow Gray
#333333Body text secondary weight, supporting borders
Steel
#89909aMuted helper text, ghost button borders, icon strokes at lower prominence
Midnight
#0b1118Dark showcase card surfaces, near-black panels for gallery contrast
Fog
#ced3d9Hairline borders, button shadow ambient layer, subtle dividers
Typography
Type scale
Minor Second (1.067) · 12px basedisplay
72px · 1.05 · -0.72px trackingThe quick brown fox jumps
heading-lg
48px · 1.15 · -0.48px trackingThe quick brown fox jumps
heading
32px · 1.2 · -0.32px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.4The quick brown fox jumps
body-lg
18px · 400 · 1.44The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
body-sm
14px · 1.5The quick brown fox jumps
caption
12px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
Euclid Circular A
- Weights
- 700-800
- Sizes
- 18px, 20px
- Line height
- 1.05-1.30
- Letter spacing
- -0.0100em
- Fallback
- Inter (700/800) or Söhne Breit
Display and heading — the site loads heavy custom geometric type at 700+ for hero and section titles. The slightly tight tracking (-0.01em) and condensed geometric forms give headlines a monolithic, confident feel against the white field
Additional typeface
system-ui
- Weights
- 400, 500, 700
- Sizes
- 16px, 18px
- Line height
- 1.40-1.50
- Fallback
- Inter or system sans
Body and subhead text — leans on the native sans stack, letting the display face do the heavy lifting. Weight 500 appears in nav and subheadings, 700 for inline emphasis
Additional typeface
P22 Mackinac Pro
- Weights
- 400
- Sizes
- 20px
- Line height
- 1.40-1.50
- Fallback
- Source Serif Pro or PT Serif
Editorial body accent — a slab-influenced serif used sparingly in testimonial or contextual blocks, adding human warmth where the geometric display would feel cold
Additional typeface
system-ui
- Weights
- 400
- Sizes
- 16px, 18px
- Line height
- 1.20
- Fallback
- system sans
Captions, micro-labels, badge text — tiny, quiet, never decorative
Additional typeface
P22 Mackinac Pro Medium Italic
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
P22 Mackinac Pro Medium Italic — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 10px
Border radius
cards
16pxbadges
4pxbuttons
8pxlargeShowcase
24pxSpacing scale
4px8px10px12px13px16px20px24px28px40px48px80px120pxGuidelines
Do
- Use #374fd5 exclusively for the CTA fill, the logo mark, and the 'by Aninix' attribution chip — never as background fill for large sections
- Set the hero headline at 72px / weight 700+ with -0.72px tracking in #000 — the large type against white is the page's identity
- Apply 16px radius to all card surfaces and 8px radius to all buttons — these two values define the component geometry
- Let the dual-layer button shadow be the only shadow in the system; keep cards and nav completely flat
- Alternate light (#f0f0f0 or #ffffff) and dark (#0b1118) showcase cards to create visual rhythm without adding color
- Keep body text at 16-18px in system-ui weight 400-500; let the display face carry the brand voice
- Use 80px horizontal padding on the nav and 80px section gaps — the page breathes
Don’t
- Never use a chromatic color other than #374fd5 — the 1% colorfulness is the entire brand strategy
- Never apply the dual-shadow elevation to anything except the primary CTA button
- Never use more than 2 type families on a single screen — Euclid Circular A for display, system-ui for body, Mackinac only for editorial pull-quotes
- Never add gradients — the system is flat by philosophy
- Never use #000000 for body text at small sizes; switch to #171717 or #333333 for anything below 24px
- Never add icons inside body text or cards — iconography is restricted to the logo, CTA prefixes, and the nav
- Never use the indigo accent on text longer than a single word; it is for chips, buttons, and the glyph only
Components
Primary CTA Button
Main call-to-action ('Install plugin') — the one interactive element that demands visual presenceIndigo Switch (#374fd5) fill, white text, 8px radius, 24px horizontal × 13px vertical padding. Body weight, 16px. Carries a dual-layer cool gray shadow (rgba(104,116,123,0.15) 2px 7px + rgba(104,116,123,0.3) 5px 15px) — the only shadow in the system. Often paired with a small Figma icon prefix.
Ghost / Outlined Button
Secondary actions in the nav ('Log in', 'Install plugin' outline variant)Transparent fill, 1px Steel (#89909a) border, 8px radius, 24px × 10px padding. Text in body or muted gray. No shadow.
Aninix Attribution Chip
Brand watermark on showcase cards — 'by Aninix' tag overlaid on gallery contentIndigo Switch (#374fd5) fill, white text at 12px caption weight, 4px radius, compact 4-8px padding. Appears bottom-left on both light and dark showcase cards as a consistent brand signature.
Light Showcase Card
Product gallery block on white canvas — displays the Figma app icon or light product workWhite or Soft Mist (#f0f0f0) surface, 16px radius, generous internal padding (40px+), no border, no shadow. Contains centered product visual. Anchored by the indigo attribution chip.
Dark Showcase Card
Product gallery block for dark-mode product work — phone mockups, video stills, animation framesMidnight (#0b1118) surface, 16px radius, 40px+ internal padding, no shadow. White or light-gray content sits on the dark ground. The indigo attribution chip is the only color in the card.
Navigation Bar
Top-level site navigationWhite transparent, full-width, with 80px horizontal padding. Left: logo + wordmark. Center: text links (16px, body weight, #333). Right: ghost 'Install plugin' button + ghost 'Log in' button. No background fill, no border, no sticky shadow.
Hero Display Block
Above-the-fold headline and subhead stackCentered on white. Display type at 72px / weight 700-800 / -0.72px tracking in Carbon Black (#000). Subhead at 20px system-ui weight 400 in Shadow Gray (#333). 40-48px vertical gap between headline and subhead.
Social Proof Line
User count reassurance beneath primary CTA14px body-sm, muted gray (#333), centered, unadorned. No badge, no icon — a single quiet line of trust.
Logo Mark
Brand identity — play-button glyph in a rounded squareIndigo Switch (#374fd5) rounded square (~20px), white play triangle centered. Paired with 'Aninix' wordmark in body weight.
Section Heading
Mid-page section titles ('Hard to believe these animations...')Heading-lg scale (48px), system-ui or Euclid Circular A weight 700, -0.48px tracking, Carbon Black (#000). Centered or left-aligned depending on section rhythm.
Surfaces & elevation
Level 0
Canvas
#ffffffPage-level background; the void everything else sits on
Level 1
Card Light
#f0f0f0Soft secondary surface beneath product showcases and highlight blocks
Level 2
Card Dark
#0b1118Gallery cards showcasing dark-mode product work; the contrast beat
Level 3
Accent Surface
#374fd5CTA fills and brand chips; the chromatic punctuation point
The system is deliberately flat. The only shadow in the entire palette lives on the primary CTA — a dual-layer cool gray shadow that lifts the button just enough to feel pressable. Cards, nav, and content blocks stay shadow-free, relying on surface color contrast and 16px radii to separate layers. This keeps the page feeling like a gallery rather than a dashboard.
Primary CTA button
rgba(104, 116, 123, 0.15) 0px 2px 7px 0px, rgba(104, 116, 123, 0.3) 0px 5px 15px 0px
Layout & imagery
Layout
Max-width 1200px centered, with 80px outer horizontal padding on the nav. Hero is a centered single-column stack: massive display headline → subhead → CTA → social proof → two-card gallery row. Section rhythm alternates white and light-gray bands, each section separated by 80px vertical gap. Content is predominantly centered stacks with occasional 2-column or 3-column card grids. Dark showcase cards break the white-field monotony mid-page. The overall density is spacious — one focal element per viewport, no information-dense blocks.
Imagery
Product-first gallery aesthetic. The visuals are full-bleed product work — app icons, animation frames, UI mockups — displayed in flat cards rather than lifestyle photography. No people, no environments. Dark and light product cards alternate to create rhythm. Accent artwork (a vivid yellow block with building icons) appears as deliberate chromatic punctuation, breaking the monochrome rule. Iconography is minimal: the logo play-glyph, a small Figma mark on CTAs, and social glyphs. No decorative illustration or stock photography anywhere.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 (headings), #333333 (body), #89909a (muted) - background: #ffffff (canvas), #f0f0f0 (light card), #0b1118 (dark card) - border: #000000 (structural), #89909a (ghost button), #ced3d9 (hairline) No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. - primary action: no distinct CTA color **Example Component Prompts** 2. **Light Showcase Card**: #f0f0f0 surface, 16px radius, 40px padding, no border, no shadow. Centered product visual (app icon or mockup). Bottom-left indigo chip: #374fd5 fill, white 'by Aninix' text at 12px, 4px radius, 4px × 8px padding. 3. **Dark Showcase Card**: #0b1118 surface, 16px radius, 40px padding, no shadow. Phone or device mockup centered. Same indigo attribution chip in bottom-left. 4. **Ghost Nav Button**: Transparent fill, 1px #89909a border, 8px radius, 24px × 10px padding. Text at 16px system-ui weight 500, #333333. No shadow. 5. **Section Heading**: 48px Euclid Circular A weight 700, #000, letter-spacing -0.48px, centered. Followed by 40px gap to content below.
Similar brands
Linear
Same near-monochrome palette with a single vivid accent, bold geometric display type, and card-based gallery layouts
Vercel
White-canvas minimalism, heavy display headlines at 64-72px, generous 80px section spacing, and flat cards with large radii
Framer
Dark-and-light alternating showcase cards, single accent color for CTAs and brand chips, spacious gallery rhythm
Pitch
Restrained colorfulness, confident geometric type, and product-first imagery over decorative photography
Figma Config
Plugin-marketplace aesthetic with indigo accent, Figma-branded CTA buttons, and community social proof lines
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
