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

# Luro · Design System

> A luminous product story on a deep plum canvas

**Theme:** dark · **Industry:** saas · **Source:** https://luroapp.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._

Luro presents design-system analytics through a spacious dark landing page, pairing oversized white typography with glowing magenta accents. Dashboard captures and product diagrams make the software itself the central visual proof.

## North star

Keep the canvas near-black plum and let bold white typography and softly glowing product visuals carry the story.

## Overview

The page uses a nearly continuous deep-plum canvas (#10020a), giving its long sequence of sections a unified, immersive backdrop. White (#ffffff) carries the logo, navigation, headlines, body copy, and calls to action; the measured palette is deliberately restrained, while vivid pink and orange glows visible in the screenshots belong to decorative chart lines and illuminated product panels rather than the measured brand palette. Graphik web provides a clean, confident sans-serif voice. Headlines are heavy, large, and tightly tracked; supporting text stays smaller and open. The hero leads with a left-aligned statement and a rising analytics graphic, followed by broad product imagery, alternating feature content, diagrams, a testimonial, and grouped capability cards. Spacious section breaks keep the long page from feeling crowded. Rounded dark panels and soft neon halos separate product evidence from the background without relying on prominent borders. Preserve the contrast between bold copy, dark negative space, and detailed interface imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Plum | `#10020a` | `--color-deep-plum` | brand | Dominant page canvas across the hero, section bands, and footer. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Logo, headlines, navigation, body copy, and button text against the dark canvas. |
| Mulberry Panel | `#1e0313` | `--color-mulberry-panel` | surface | Measured card surface for dark feature panels; product screenshots also contain other interface colors. |

### Semantic aliases

`--color-canvas` → `#10020a` (Deep Plum) · `--color-surface` → `#1e0313` (Mulberry Panel) · `--color-text` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#10020a` | 20.29:1 | AAA |
| `#ffffff` | `#1e0313` | 19.49:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik web | `--font-body` | webfont | 400, 700, 600 | Primary typeface for display, headings, body copy, navigation, links, and buttons. | Inter |

- **Graphik web:** Use bold weights for headlines and regular weights for copy; headlines are tightly tracked, while body text remains comfortably open.

### Type scale — Augmented Fourth (ratio ≈ 1.42, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 104px | 700 | 0.95 | -0.012em | — | Graphik web | Oversized hero statement and high-impact introductory display copy. |
| h1 | 61.5px | 700 | 1.1 | -0.021em | — | Graphik web | Primary page and major section headlines. |
| h2 | 50.5px | 700 | 1.1 | -0.025em | — | Graphik web | Prominent feature and section headings. |
| h3 | 40px | 700 | 1.2 | -0.032em | — | Graphik web | Secondary headings within feature blocks and cards. |
| h4 | 38.5px | 400 | 1 | 0 | — | Graphik Cond Web | Select lower-level headings in a condensed face. |
| body | 18px | 400 | 2 | 0 | — | Graphik web | Feature descriptions and explanatory paragraphs. |
| caption | 16px | 400 | 1.3 | 0 | — | Graphik web | Small labels and supporting image or interface captions. |
| button | 18px | 400 | 1.5 | 0 | — | Graphik web | Primary Discord call-to-action text. |
| nav | 18px | 400 | 1.5 | 0 | — | Graphik web | Header navigation, including the Blog link. |
| link | 18px | 400 | 2 | 0 | — | Graphik web | Inline links and footer navigation. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 8, 10, 12, 14, 15, 16, 18, 22, 24, 27, 28, 32, 36, 41, 45 px.
- Section rhythm 54px · element gap 32px · card padding 32px · max content width 1272px.

A spacious, vertically flowing page organized within a measured 1272px maximum content width. The hero starts with left-aligned copy and large product media; later sections alternate between centered introductions, two-column feature groupings, and multi-card capability layouts. Generous section breaks give the dark canvas room to breathe, while cards use consistent inset padding. Keep feature copy short and close to the interface or diagram it explains; use centered alignment for social proof and calls to action, and a compact footer.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `24px` · xs `12px` · sm `24px`
- Shadow `xl` (card, media, button): `rgba(255, 0, 104, 0.54) 0px 0px 33px 0px, rgba(255, 0, 104, 0.4) 0px 0px 99px -21px`
- Shadow `lg` (media): `rgba(255, 0, 104, 0.9) 0px 0px 21px -5px, rgba(255, 0, 104, 0.6) 0px 0px 27px -3px`
- Shadow `lg-2` (other): `rgb(255, 0, 104) 0px 50px 40px 0px`
- Shadow `xl-2` (card): `rgba(255, 0, 104, 0.36) 0px 0px 90px 0px`
- Motion: standard transition `0.4s ease-in-out` on interactive elements.

The canvas stays visually flat between sections, while rounded product cards and media are raised with conspicuous soft magenta glows. Borders are not a defining measured treatment. Use depth to spotlight interface evidence, preserving dark panel fills and avoiding hard, bright outlines that compete with the halo.

## Imagery

Use product UI captures, analytics charts, component catalog views, and simple connected-system diagrams; photography is not the visual focus. Frame software screens inside rounded panels and let them occupy substantial space. The screenshots show vivid magenta halos and pink-to-orange graph lines, plus varied colors inside interface mockups. Treat these as illustrative product content, not replacements for the restrained measured brand palette.

## Components

### Hero

Pair a large, left-aligned white headline and short supporting copy with a rising analytics visual against the Deep Plum canvas.

### Product showcase

Present large dashboard captures in rounded media panels, using a soft neon halo and enough space for interface details to read.

### Feature card

Use Mulberry Panel (#1e0313) for measured card surfaces, white text, generous inset spacing, and a 24px measured card radius.

### How-it-works diagram

Connect component and page inputs to a central Luro mark and a tracking outcome with fine paths and illuminated data accents.

### Testimonial

Center one concise endorsement on the dark canvas, framed by glowing horizontal decorative lines.

### Discord CTA

Center a short invitation and a pill-shaped Discord link, with a magenta glow separating it from the canvas.

### Footer

Keep copyright, legal links, and social links in a compact, single-row layout on the dark canvas.

### Measured component styles

- **Primary button** (“Join the Luro Discord”): transparent background · text #ffffff · border 1px solid · radius 180px · padding 13.6px 32px · 400 18px Graphik web · shadow rgba(255, 0, 104, 0.54) 0px 0px 33px 0px, rgba(255, 0, 104, 0.4) 0px 0px 99px -2
- **Link** (“Getting started”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px Graphik web
- **Card** (“Figma sync Sync your styles and componen”): transparent background · text #ffffff · radius 24px · padding 32px · 400 18px Graphik web · shadow rgba(255, 0, 104, 0.54) 0px 0px 33px 0px, rgba(255, 0, 104, 0.4) 0px 0px 99px -2
- **Navigation item** (“Blog”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px Graphik web

## Do

- Use Deep Plum (#10020a) as the dominant canvas.
- Set key headlines in bold white Graphik-style sans serif.
- Give the hero and section introductions ample negative space.
- Show real-looking product interfaces as the main visual evidence.
- Use soft magenta glow to lift selected media and cards.
- Keep supporting copy concise and close to its related visual.

## Don't

- Do not introduce extra measured brand colors.
- Do not turn the page into a bright, white-background layout.
- Do not apply neon glows indiscriminately to every text element.
- Do not replace product UI evidence with generic lifestyle photography.
- Do not crowd cards with long blocks of copy.
- Do not add prominent borders where soft elevation does the work.

## Agent prompt

Build a new SaaS page in Luro’s visual style. Use Deep Plum (#10020a) for the main canvas, Gallery White (#ffffff) for typography and controls, and Mulberry Panel (#1e0313) for selected card surfaces. Keep the palette restrained; reserve vivid pink and orange gradients for illustrative chart or mockup details, not invented semantic tokens. Use a Graphik-like sans serif, oversized bold tightly tracked headlines, and readable regular-weight supporting text. Create a spacious long-form layout with a confident hero, large product UI panels, clear feature groupings, and centered CTA moments. Use rounded cards and soft magenta halos to lift product evidence from the background. Maintain generous gaps between sections, keep copy concise, and make the software interface the visual proof. Avoid bright section bands, heavy borders, and generic stock photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and intro over dark canvas, with analytics artwork extending across the lower hero. | Brand recognition, Value proposition | Large white headline, Rising glowing chart, Dark canvas |
| 2 | product-showcase | A large dashboard capture followed by a row of four smaller preview tiles. | Product proof, Preview navigation | Rounded screenshot panel, Neon media glow, Video preview tiles |
| 3 | logo-cloud | Four evenly arranged preview links with small thumbnails and captions. | Quick discovery, Resource links | Compact thumbnail cards, Caption labels, Play icons |
| 4 | how-it-works | Centered heading above two input cards, a connected brand mark, and a tracking outcome card. | Process explanation, Outcome preview | Connected diagram, Glowing dark cards, Usage bars |
| 5 | testimonials | Centered quote and attribution, framed by horizontal illuminated lines. | Social proof | Centered bold quote, Neon line accents |
| 6 | feature-split | Alternating feature content and interface captures in a spacious two-column flow. | Benefit explanation, Feature discovery | Dashboard cards, Alternating alignment, Glowing media |
| 7 | cta | Centered short invitation and pill CTA between glowing horizontal accents. | Community conversion | Centered content, Pill button, Soft glow |
| 8 | feature-grid | Centered section intro above a two-column grid of varied-width feature cards. | Capability scanning, Integration overview | Uneven card grid, Product mockups, Rounded glowing panels |
| 9 | feature-grid | Centered introduction above a three-column arrangement of product capability cards. | Capability discovery | Three-column cards, Embedded UI fragments, Dark surfaces |
| 10 | footer | Single compact row with legal links on the left and social links on the right. | Legal navigation, Social navigation | Small text links, Social icons, Dark canvas |

## Source CSS custom properties (selected)

```css
--heavy-text: #1f1f1f;
--primary: #f41445;
--border: #dcd9d9;
--bg-alt: rgb(23.35,23.35,23.35);
--bg: $darker-purple;
```

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