--- title: "Altius Labs design system" variant: extended source: https://www.altiuslabs.xyz/ captured_at: 2026-10-12 theme: dark industry: crypto generator: Design DNA (https://four.wiralomi.com/style/altiuslabs-xyz) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Altius Labs · Design System > Dark infrastructure, illuminated in signal red. **Theme:** dark · **Industry:** crypto · **Source:** https://www.altiuslabs.xyz/ · **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._ Altius Labs presents custom blockchain infrastructure through a dramatic dark canvas, warm red accents, and clear, editorial messaging. A glowing bar-wave hero gives way to investor logos, pale feature bands, outlined benefit cards, and a layered technical architecture diagram. ## North star Use the deep brown-black canvas and warm red signal accents to frame precise, spacious infrastructure storytelling. ## Overview The visual strategy pairs a near-black brown canvas (#190501) with warm off-white surfaces (#f7f6ff and #feeae6) and a concentrated red-orange accent range. The hero stays restrained: centered headline and copy sit above compact paired CTAs, while an abstract luminous bar-wave anchors the bottom. Matter carries nearly all interface text, with rounded, closely tracked display and body typography; Fabrikatmono is reserved for terse technical labels. The page alternates dark investor and feature sections with pale explanatory bands, creating contrast without introducing a new visual language. Content moves from centered introduction to split text-and-diagram storytelling, then a three-card benefit grid and an architecture showcase. Fine red borders, square corners, and sparse inset button glow keep components technical rather than soft or ornamental. Spacious section breaks and a constrained content width let the dense infrastructure claims remain scannable. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Ember Panel | `#340a01` | `--color-ember-panel` | surface | Deep reddish-brown fill for benefit cards and selected footer or button surfaces. | | Oxide Red | `#951c04` | `--color-oxide-red` | brand | Dark red for accent text, borders, and the warm-toned primary call-to-action treatment. | | Kiln Black | `#190501` | `--color-kiln-black` | brand | Dominant page canvas across navigation, hero, investor band, feature cards, and footer. | | Blush Paper | `#feeae6` | `--color-blush-paper` | surface | Warm pale text on dark areas and the filled Schedule a 30-min call button. | | Cool Porcelain | `#f7f6ff` | `--color-cool-porcelain` | surface | Pale alternate canvas for explanatory sections, architecture content, and card text. | | Coral Glow | `#fcac9c` | `--color-coral-glow` | accent | Soft coral accent for outlined CTA text and secondary highlights. | | Signal Coral | `#fa5838` | `--color-signal-coral` | accent | Bright coral for thin card and footer borders, icons, and emphatic text details. | | Muted Mauve | `#887d81` | `--color-muted-mauve` | neutral | Low-emphasis footer detail; not a defining page-wide brand color. | ### Semantic aliases `--color-canvas` → `#190501` (Kiln Black) · `--color-surface` → `#f7f6ff` (Cool Porcelain) · `--color-surface-2` → `#feeae6` (Blush Paper) · `--color-surface-3` → `#340a01` (Ember Panel) · `--color-text` → `#feeae6` (Blush Paper) · `--color-border` → `#fa5838` (Signal Coral) · `--color-accent` → `#951c04` (Oxide Red) · `--color-accent-2` → `#fcac9c` (Coral Glow) · `--color-accent-3` → `#fa5838` (Signal Coral) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#feeae6` | `#190501` | 17.04:1 | AAA | | `#feeae6` | `#f7f6ff` | 1.08:1 | fail | | `#feeae6` | `#340a01` | 15.23:1 | AAA | | `#951c04` | `#190501` | 2.3:1 | fail | | `#951c04` | `#f7f6ff` | 8.01:1 | AAA | | `#951c04` | `#feeae6` | 7.41:1 | AAA | | `#951c04` | `#340a01` | 2.06:1 | fail | ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | Matter | `--font-body` | webfont | 400, 500, 700 | Primary display, heading, body, navigation, caption, and button type. | Inter | | Fabrikatmono | `--font-mono` | webfont | 400, 500 | Compact technical and code-like labels. | IBM Plex Mono | - **Matter:** Use measured weights 400, 500, and 700; display and body are closely tracked, with sentence case. - **Fabrikatmono:** Use measured weights 400 or 500; uppercase labels with tight tracking and generous line height. ### Type scale — Augmented Fourth (ratio ≈ 1.442, base 20px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 60px | 500 | 1.08 | -0.042em | — | Matter | Large hero or section display headings. | | h1 | 48px | 500 | 1.13 | -0.033em | — | Matter | Primary hero title and major page headings. | | h2 | 24px | 700 | 1.16 | 0 | — | Matter | Feature card titles and secondary headings. | | body | 20px | 400 | 1.4 | -0.04em | — | Matter | Hero supporting copy and explanatory paragraphs. | | caption | 16px | 400 | 1.5 | 0 | — | Matter | Small supporting labels and secondary copy. | | button | 16px | 500 | 1.25 | -0.01em | — | Matter | CTA labels and interactive button text. | | nav | 16px | 400 | 1.5 | 0 | — | Matter | Header navigation links. | | code | 14px | 400 | 1.75 | -0.05em | uppercase | Fabrikatmono | Uppercase technical labels and architecture annotations. | ## Spacing & layout - Base unit **8px**, density **spacious**. - Scale (most used values): 4, 8, 10, 14, 16, 20, 24, 32, 40, 48, 100 px. - Section rhythm 100px · element gap 20px · card padding 20px · max content width 1360px. The page uses a spacious single-column narrative with a measured 1360px maximum width and a 100px section rhythm. The hero is centered; later content shifts to left-aligned split layouts, a three-column benefit-card row, and a centered technical showcase. Alternating pale and dark section bands create clear chapter breaks. Keep text blocks compact within generous surrounding space, and group related labels, illustrations, and copy rather than filling every area. ## Shape & elevation - Shadow `inset` (button): `rgb(99, 19, 3) 0px 0px 20px 0px inset` - Shadow `inset-2` (button): `rgb(25, 5, 1) 0px 0px 20px 0px inset` - Shadow `sm` (card): `rgba(0, 0, 0, 0.2) 0px 2px 5px 0px` - Motion: standard transition `0.2s ease` on interactive elements. The design is mostly flat, with square-corner components and fine coral or dark-red borders defining cards and controls. Avoid broad drop shadows; the measured card shadow is subtle, while buttons may use restrained inset glow. Layering comes mainly from diagram artwork and luminous hero graphics, not floating interface panels. ## Imagery The hero uses an abstract symmetrical bar-wave with soft red, coral, and pale highlights against the dark canvas; treat it as a luminous graphic, not a brand palette expansion. Later sections use investor logos, a technical diagram, and a layered chain architecture illustration. Keep diagrams clean and schematic, with warm red-brown outlines and restrained detail; there is no defining photography or video. ## Components ### Navigation Matter 16px links sit on the dark canvas beside a coral wordmark and social icons; use compact, unboxed navigation. ### Hero CTA pair Two square-corner controls use 8px 16px padding: a dark outlined Request a Demo and pale filled Schedule a 30-min call. ### Benefit cards Three dark reddish-brown cards use 20px padding, thin #fa5838 borders, pale text, and short numbered headings. ### Investor logo band A dark full-width section arranges investor and builder marks in a six-column grid with a small uppercase coral label. ### Feature split Pair a technical diagram with a concise heading and paragraph, switching between pale and dark section bands. ### Architecture showcase A pale section combines a heading and short introduction with a layered chain-stack illustration and technical annotations. ### Measured component styles - **Primary button** (“Schedule a 30-min call”): background #feeae6 · text #951c04 · border 1px solid #951c04 · radius 0px · padding 8px 16px · 500 16px Matter - **Secondary button** (“Request a Demo”): transparent background · text #fa5838 · border 1px solid #951c04 · radius 0px · padding 8px 16px · 500 16px Matter · shadow rgb(99, 19, 3) 0px 0px 20px 0px inset - **Card** (“01 Own the Economics. Gas fees, sequenci”): background #340a01 · text #f7f6ff · border 1px solid #fa5838 · radius 0px · padding 20px · 400 16px Matter - **Navigation item** (“Home About Us Blog Resources”): transparent background · text #feeae6 · radius 0px · padding 0px · 400 16px Matter ## Do - Anchor dark sections in Kiln Black (#190501). - Use pale section bands to punctuate the dark narrative. - Reserve Signal Coral (#fa5838) for crisp accents and hairlines. - Keep CTAs square-cornered and visibly distinct. - Use Matter for interface copy and Fabrikatmono for technical labels. - Give diagrams clear space and a schematic, engineering-led treatment. ## Don't - Do not introduce unmeasured brand colors. - Do not round cards or buttons into soft pills. - Do not cover the hero with dense copy or controls. - Do not use broad, dramatic drop shadows. - Do not make every section dark or every section pale. - Do not treat colors inside illustrations as core interface tokens. ## Agent prompt Build a new Altius Labs page with a dark, technical editorial feel. Use Kiln Black (#190501) as the main canvas, Cool Porcelain (#f7f6ff) and Blush Paper (#feeae6) for alternating light bands and readable type, and Signal Coral (#fa5838) with Oxide Red (#951c04) for precise borders, links, and CTA accents. Set interface typography in Matter, with Fabrikatmono reserved for uppercase technical annotations. Use spacious section breaks, a constrained content width, square-corner cards, and fine borders rather than heavy shadows. Balance concise engineering-focused copy with schematic diagrams or luminous abstract graphics. Keep layouts centered for introductions, then use clean split sections and compact feature grids; avoid decorative clutter and unmeasured colors. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Centered hero with navigation, paired CTAs, and a wide luminous bar-wave graphic below. | Clear positioning statement, Paired demo and call CTAs | Dark canvas, Centered headline, Coral glow graphic | | 2 | logo-cloud | Dark full-width band with a small centered label and a six-column logo arrangement. | Social proof, Investor and builder recognition | Muted logo marks, Thin corner details, Dark background | | 3 | feature-split | Pale band with a technical illustration on one side and heading plus body copy on the other. | Problem explanation, Diagram-supported reading | Pale canvas, Split composition, Technical schematic | | 4 | feature-grid | Dark section with a left-aligned introduction above three horizontally arranged bordered cards. | Benefit comparison, Scannable numbered points | Three-column cards, Coral hairlines, Square corners | | 5 | product-showcase | Pale showcase with heading and copy above a layered architecture illustration and supporting annotations. | Technical proof, Layer-by-layer explanation | Pale canvas, Stacked diagram, Monospaced labels | | 6 | footer | Dark two-column footer with brand and social links at left, navigation and legal links at right. | Secondary navigation, Legal and policy access | Small coral wordmark, Compact link groups, Dark canvas | ## Source CSS custom properties (selected) ```css --base-color-neutral--white: #f7f6ff; --base-color-neutral--black: #190501; --background-color--background-primary: #190501; --text-color--text-alternate: #f7f6ff; --text-color--text-primary: #190501; --text-color--text-secondary: #222; --base-color-brand--200: #fcac9c; --border-color--border-primary: #eee; --background-color--background-alternate: #f7f6ff; --background-color--background-secondary: #190501; --background-color--background-tertiary: #dd23bb; --base-color-brand--600: #951c04; --base-color-brand--100: #feeae6; --base-color-neutral--transparent: #fff0; --base-color-brand--500: #fa5838; --base-color-neutral--gray: #baadab; --radius--radius-0: 0px; --background-color--background-warning: #fcf8d8; --text-color--text-warning: #5e5515; --base-color-brand--900: #190501; --base-color-brand--700: #631303; --base-color-brand--800: #340a01; --radius--radius-20: 1.25rem; --base-color-brand--300: #fa826b; --radius--radius-6: .375rem; --base-color-brand--400: #fb8951; --spacing--navbar-link: 2rem; --spacing--navbar-block-spacing: 2rem; --radius--radius-50rem: 50rem; --base-color-brand--subdued: #bc8276; --size--gap-general: 1.25rem; --radius--radius-4: .25rem; --radius--radius-8: .5rem; --radius--radius-12: .75rem; --radius--radius-16: 1rem; --base-color-neutral--neutral-darker: #222; --base-color-neutral--neutral-lightest: #eee; --base-color-brand--pink: #dd23bb; --base-color-system--warning-yellow: #fcf8d8; --base-color-system--warning-yellow-dark: #5e5515; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/altiuslabs-xyz