Remixes of arrakis.finance
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Arrakis
description: |
Arrakis Finance presents a sophisticated, tech-forward aesthetic rooted in
deep minimalism and precision. The visual language prioritizes clarity and
confidence through high contrast—pure black (#000000) paired with luminous
whites and warm accents. The interface employs subtle, sophisticated gradients
layered across section backgrounds to create perceived depth without visual
clutter. Typography is deliberately oversized and bold at display sizes,
emphasizing authority and impact. The color palette draws on muted earth tones
(#F0E6DF) for body text, creating a refined, professional tone that sits
comfortably against the near-black surfaces (#0D0D0D). Decorative accent
colors—vibrant teals, oranges, purples, and blues—are reserved for
illustrations, badges, and hero imagery, never dominating functional UI. The
overall mood is austere, intelligent, and aspirational: this is a platform for
serious financial infrastructure.
source:
url: "https://arrakis.finance/"
pagesAnalyzed: 1
extractedAt: 2026-10-21
tokensMeasured: true
colors:
primary: "#000000"
link: "#0000EE"
surface-alt: "#0D0D0D"
ink: "#FFFFFF"
body: "#F0E6DF"
muted: "#D8D3D1"
faint: "#9B8F79"
hairline: "#FF0064"
accent-1: "#EC9117"
accent-2: "#3E966A"
accent-3: "#CC4637"
accent-4: "#00FFC8"
accent-5: "#69A6F4"
accent-6: "#C667D1"
neutral-1: "#5C5C5C"
neutral-2: "#8E8882"
typography:
display-xl:
fontFamily: "PP Eiko Italic Light"
fontSize: 66px
fontWeight: 300
lineHeight: 1.36
letterSpacing: 0px
display-xl-strong:
fontFamily: "PP Eiko Italic Light"
fontSize: 66px
fontWeight: 400
lineHeight: 1.36
letterSpacing: 0px
display-lg:
fontFamily: "ES Build Regular"
fontSize: 44.96px
fontWeight: 400
lineHeight: 1.11
letterSpacing: -1.9px
display-md:
fontFamily: "PP Eiko Italic Light"
fontSize: 42px
fontWeight: 300
lineHeight: 1.2
letterSpacing: -1.26px
display-md-strong:
fontFamily: "ES Build Regular"
fontSize: 42px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -1.26px
display-sm:
fontFamily: "ES Build Regular"
fontSize: 41px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
heading-xl:
fontFamily: "ES Build Regular"
fontSize: 35.04px
fontWeight: 400
lineHeight: 1.1
letterSpacing: 0px
heading-lg:
fontFamily: "PP Eiko Italic Light"
fontSize: 35px
fontWeight: 300
lineHeight: 1.1
letterSpacing: 0px
heading-md:
fontFamily: "ES Build Regular"
fontSize: 24px
fontWeight: 400
lineHeight: 1.33
letterSpacing: -0.48px
heading-sm:
fontFamily: "ES Build Regular"
fontSize: 19.04px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
heading-xs:
fontFamily: "ES Build Regular"
fontSize: 16px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
heading-xs-tight:
fontFamily: "ES Build Regular"
fontSize: 16px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
body-xl:
fontFamily: "ES Build Regular"
fontSize: 17px
fontWeight: 500
letterSpacing: 0px
body-lg:
fontFamily: "ES Build Regular"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 14.4px
fontWeight: 500
lineHeight: 1.1
letterSpacing: -0.14px
body-sm:
fontFamily: "ES Build Medium"
fontSize: 12.8px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
body-sm-inter:
fontFamily: Inter
fontSize: 12.8px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
body-xs:
fontFamily: sans-serif
fontSize: 12px
fontWeight: 400
letterSpacing: 0px
code-xl:
fontFamily: "JetBrains Mono"
fontSize: 14.4px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
code-lg:
fontFamily: "JetBrains Mono"
fontSize: 14px
fontWeight: 600
lineHeight: 1.2
letterSpacing: 0px
code-md:
fontFamily: "JetBrains Mono"
fontSize: 12.8px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
code-sm:
fontFamily: "JetBrains Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: -0.48px
code-xs:
fontFamily: "JetBrains Mono"
fontSize: 11.2px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
rounded:
none: 0px
xs: 12px
sm: 20px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 36px
section: 40px
band: 48px
borderWidths:
thin: 2px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#F8F8FE"
surface: "#EEEEF4"
surfaceRaised: "#E7E7EC"
text: "#10101C"
textMuted: "#71717B"
border: "#D5D5DA"
accent: "#0000EE"
accentFg: "#FFFFFF"
focusRing: "#0000EE"
elevation: shadow
dark:
bg: "#0F1011"
surface: "#0D0D0D"
surfaceRaised: "#202020"
text: "#FFFFFF"
textMuted: "#F0E6DF"
border: "#FF0064"
accent: "#4141FF"
accentFg: "#FFFFFF"
focusRing: "#0000EE"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(135deg, rgba(255, 255, 255, 0.082) 0%, rgba(255, 255, 255, 0.055) 50%, rgba(0, 0, 0, 0.035) 100%)"
filter: "drop-shadow(rgba(255, 255, 255, 0.3) 0px 0px 0px)"
- context: section
kind: radial
value: "radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) 100%)"
- context: section
kind: linear
value: "linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%)"
filter: "blur(2px)"
- context: section
kind: linear
value: "linear-gradient(rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%)"
- context: section
kind: linear
value: "linear-gradient(rgba(255, 255, 255, 0.08) -100%, rgba(255, 255, 255, 0.05) 100%)"
- context: section
kind: conic
value: "conic-gradient(rgba(255, 255, 255, 0.15) 0deg, rgba(255, 255, 255, 0) 72deg, rgba(79, 26, 214, 0.2) 171.892deg, rgba(255, 255, 255, 0) 270deg, rgba(255, 255, 255, 0.15) 360deg)"
components:
button-filled:
typography: "{typography.body-xs}"
textColor: "{colors.primary}"
height: 41.2031px
padding: "11px 14px 11px 14px"
boxShadow: "rgba(12, 14, 18, 0.18) 0px 0px 0px 1px inset, rgba(12, 14, 18, 0.05) 0px -2px 0px 0px inset, rgba(255, 255, 255, 0) 0px 1px 2px 0px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.accent-1}"
button-filled-2:
typography: "{typography.body-xs}"
textColor: "{colors.link}"
height: 41.2031px
padding: "11px 14px 11px 14px"
boxShadow: "rgba(12, 14, 18, 0.18) 0px 0px 0px 1px inset, rgba(12, 14, 18, 0.05) 0px -2px 0px 0px inset, rgba(255, 255, 255, 0) 0px 1px 2px 0px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.accent-1}"
footer:
typography: "{typography.body-xs}"
textColor: "{colors.primary}"
padding: "25px 16px 25px 16px"
backgroundColor: "{colors.surface-alt}"
link:
typography: "{typography.body-xs}"
textColor: "{colors.link}"
link-sm:
typography: "{typography.body-xs}"
textColor: "{colors.primary}"
states:
input-focus-visible:
target: input
state: focus-visible
outline: none
button-focus:
target: button
state: focus
outlineColor: "rgba(0, 0, 0, 0)"
breakpoints:
- width: 375
containerWidth: 358
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 49
bodyPx: 12
sectionPaddingX: 16
- width: 768
containerWidth: 736
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 49
bodyPx: 12
sectionPaddingX: 16
- width: 1024
containerWidth: 924
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 66
bodyPx: 12
sectionPaddingX: 24
- width: 1280
containerWidth: 1120
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 66
bodyPx: 12
sectionPaddingX: 24
- width: 1440
containerWidth: 1280
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 66
bodyPx: 12
sectionPaddingX: 24
coverage:
statesFound: 15
gradientsFound: 6
rolesUnassigned: 8
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Arrakis Finance presents a sophisticated, tech-forward aesthetic rooted in deep minimalism and precision. The visual language prioritizes clarity and confidence through high contrast—pure black ({colors.primary} — #000000) paired with luminous whites and warm accents. The interface employs subtle, sophisticated gradients layered across section backgrounds to create perceived depth without visual clutter. Typography is deliberately oversized and bold at display sizes, emphasizing authority and impact. The color palette draws on muted earth tones ({colors.body} — #F0E6DF) for body text, creating a refined, professional tone that sits comfortably against the near-black surfaces ({colors.surface-alt} — #0D0D0D). Decorative accent colors—vibrant teals, oranges, purples, and blues—are reserved for illustrations, badges, and hero imagery, never dominating functional UI. The overall mood is austere, intelligent, and aspirational: this is a platform for serious financial infrastructure.
Key Characteristics
{colors.primary} — #000000): Primary CTA background, brand mark, active states, core text{colors.link} — #0000EE): Inline hyperlinks and interactive text{colors.accent-1} — #EC9117): Badge backgrounds, illustrative highlight, secondary CTA fill{colors.accent-2} — #3E966A): Illustrative and decorative elements{colors.accent-3} — #CC4637): Decorative accent, hero imagery{colors.accent-4} — #00FFC8): Illustrative highlight, vibrant accent{colors.accent-5} — #69A6F4): Decorative and illustrative use (e.g., Morpho icon){colors.accent-6} — #C667D1): Decorative accent, gradient overlays{colors.accent-1} — #EC9117) on Contact and Report badges{colors.link} — #0000EE){colors.surface-alt} — #0D0D0D): Alternating section backgrounds, deep surface{colors.ink} — #FFFFFF): Primary text, display headings, high-contrast content{colors.body} — #F0E6DF): Body copy, secondary headings, main text color{colors.muted} — #D8D3D1): Captions, secondary text, reduced emphasis{colors.faint} — #9B8F79): Tertiary text, placeholders, de-emphasized labels{colors.neutral-2} — #8E8882): Intermediate neutral for borders and dividers{colors.neutral-1} — #5C5C5C): Secondary neutral, text on light backgrounds{colors.hairline} — #FF0064): Fine borders and dividers (1px weight)Primary Display Font: PP Eiko Italic Light, PP Eiko (weight 300–400)
Fallback stack: 'PP Eiko', 'PP Eiko Italic', serif
Secondary Font: ES Build Regular, ES Build Medium (weight 400–500)
Fallback stack: 'ES Build', 'Inter', sans-serif
Monospace Font: JetBrains Mono (weight 400–600)
Fallback stack: 'JetBrains Mono', 'Courier New', monospace
Default Body Font: Inter, sans-serif (weight 500)
Fallback stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | PP Eiko Italic | 66px | 300 | 1.36 | 0px | Hero heading, maximum impact |
| Display XL Strong | PP Eiko | 66px | 400 | 1.36 | 0px | Bold variant of display XL |
| Display LG | ES Build | 44.96px | 400 | 1.11 | -1.9px | Large secondary headline |
| Display MD | PP Eiko Italic | 42px | 300 | 1.2 | -1.26px | Medium display, negative tracking |
| Display MD Strong | ES Build | 42px | 400 | 1.2 | -1.26px | Bold medium display |
| Display SM | ES Build | 41px | 400 | 1 | 0px | Small display, tight line height |
| Heading XL | ES Build | 35.04px | 400 | 1.1 | 0px | Extra-large heading |
| Heading LG | PP Eiko Italic | 35px | 300 | 1.1 | 0px | Large section heading |
| Heading MD | ES Build | 24px | 400 | 1.33 | -0.48px | Medium heading with tracking |
| Heading SM | ES Build | 19.04px | 400 | 1.3 | 0px | Small heading, UI sections |
| Heading XS | ES Build | 16px | 400 | 1.3 | 0px | Extra-small heading, labels |
| Heading XS Tight | ES Build | 16px | 400 | 1.2 | 0px | Extra-small, compressed line height |
| Body XL | ES Build | 17px | 500 | (not measured) | 0px | Large body text |
| Body LG | ES Build | 16px | 400 | 1.5 | 0px | Main body copy |
| Body MD | Inter | 14.4px | 500 | 1.1 | -0.14px | Medium body with tracking |
| Body SM | ES Build / Inter | 12.8px | 500 | 1.2 | 0px | Small body, secondary text |
| Body XS | sans-serif | 12px | 400 | (not measured) | 0px | Extra-small body, links |
| Code XL | JetBrains Mono | 14.4px | 400 | 1.2 | 0px | Large code block |
| Code LG | JetBrains Mono | 14px | 600 | 1.2 | 0px | Bold code, input display |
| Code MD | JetBrains Mono | 12.8px | 400 | 1.3 | 0px | Medium code |
| Code SM | JetBrains Mono | 12px | 400 | 1.33 | -0.48px | Small code with tracking |
| Code XS | JetBrains Mono | 11.2px | 500 | 1.5 | 0px | Extra-small code |
Filled (Primary CTA)
{colors.accent-1} — #EC9117{colors.primary} — #000000{rounded.xs} — 12pxrgba(12, 14, 18, 0.18) 0px 0px 0px 1px inset, rgba(12, 14, 18, 0.05) 0px -2px 0px 0px inset, rgba(255, 255, 255, 0) 0px 1px 2px 0pxGhost / Secondary
{colors.primary} — #0000002px solid {colors.primary} — 2px solid #000000{rounded.xs} — 12pxCase Study Card (Morpho, Maple, Bitpanda Tabs)
{colors.surface-alt} — #0D0D0D (with optional overlay gradient){rounded.none} — 0px (sharp corners on content cards){colors.ink} — #FFFFFF (headings), {colors.body} — #F0E6DF (body)Report Badge / Label
{colors.accent-1} — #EC9117{colors.primary} — #000000{typography.heading-xs} — 16px, weight 400{spacing.xs} to {spacing.sm} (8–12px, exact measured){rounded.xs} — 12px (or pill if needed; measure from badge)Text Input (Default)
{colors.surface-alt} — #0D0D0D{colors.body} — #F0E6DF2px solid {colors.hairline} — 2px solid #FF0064 (thin border, pink/red accent){rounded.none} — 0px (sharp corners on inputs){typography.code-xl} — 14.4px, JetBrains Mono, weight 400{spacing.md} (16px, inferred)Header Navigation (Top Bar)
{colors.primary} — #000000{colors.ink} — #FFFFFF (nav links){typography.body-sm} or {typography.body-xs} (12–12.8px){spacing.md} to {spacing.lg} (16–20px, vertical and horizontal){colors.link} — #0000EE or underline effect (explicit state data unavailable; infer from link hover rules)Footer
{colors.surface-alt} — #0D0D0D{colors.ink} — #FFFFFF (headings), {colors.muted} — #D8D3D1 (secondary text){spacing.section} — 40px (vertical and horizontal, measured as 25px 16px 25px 16px at 1440px){rounded.none} — 0pxInline Link
{colors.link} — #0000EE{rounded.none} — 0pxBase unit: {spacing.xs} — 8px
Scale:
{spacing.xxs} — 4px (micro gaps, inline spacing){spacing.xs} — 8px (tight component spacing){spacing.sm} — 12px (small spacing between elements){spacing.md} — 16px (default component padding){spacing.lg} — 20px (medium spacing){spacing.xl} — 24px (generous spacing){spacing.xxl} — 32px (large gaps between sections){spacing.xxxl} — 36px (extra-large gaps){spacing.section} — 40px (major section vertical spacing){spacing.band} — 48px (hero and full-width band spacing)Usage Context:
{spacing.xs} to {spacing.md} internal padding{spacing.md} padding, with {spacing.lg} margin between fields{spacing.section} to {spacing.band} vertical gaps{spacing.md} to {spacing.lg}{spacing.band} (48px)Max Width: 1440px at desktop (measured at 1440px viewport)
Content Column Widths (by breakpoint):
{spacing.xl} (24px) section padding-xColumn Strategy: Single-column layout across all measured breakpoints (no multi-column grid observed). Content flows vertically; imagery and text cards stack without columnar arrangement.
Section Patterns:
The system emphasizes generous negative space and breathing room. Large vertical gaps ({spacing.section} — 40px and {spacing.band} — 48px) separate distinct content blocks. No element is crammed or over-padded; containers expand to accommodate text rather than forcing truncation. Headings sit well above body text; imagery receives clear margin on all sides. This creates a refined, uncluttered aesthetic that matches the minimalist color palette.
{rounded.none} — 0px): Input fields, cards, containers, image backgrounds—the default for content surfaces{rounded.xs} — 12px): Buttons, badges, pill-shaped CTA elements{rounded.sm} — 20px): Decorative elements, tertiary UI (if used; exact component context not fully specified)Component-Specific Radius:
{rounded.xs} — 12px{rounded.none} — 0px{rounded.none} — 0px{rounded.xs} — 12px2px): Input field borders, dividers, fine strokesThe design system does not employ a traditional multi-tier shadow system. Instead, depth is achieved through color-blocking and gradient overlays on flat surfaces. There are no measurable drop shadows or elevated card effects observed in the extraction. All elevation comes from surface color changes: sections alternate between pure black ({colors.surface-alt} — #0D0D0D) and deep charcoal, with subtle semi-transparent white or colored gradients layered on top to suggest dimensionality.
| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | No shadow; solid background ({colors.surface-alt} — #0D0D0D or black) | Default surfaces, inputs, text layers |
| Overlay (Subtle Lift) | Semi-transparent gradient overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.082) 0%, rgba(255, 255, 255, 0.055) 50%, rgba(0, 0, 0, 0.035) 100%) | Hero sections, featured containers |
| Radiant (Accent Depth) | Radial gradient: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0) 100%) with filter blur | Atmospheric highlights above text, accent glow |
| Focused (Interactive State) | Linear gradient with motion blur: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%) + filter: blur(2px) | Hover or active container emphasis |
| Tertiary Gradient | Conic gradient: conic-gradient(rgba(255, 255, 255, 0.15) 0deg, rgba(255, 255, 255, 0) 72deg, rgba(79, 26, 214, 0.2) 171.892deg, rgba(255, 255, 255, 0) 270deg, rgba(255, 255, 255, 0.15) 360deg) | Decorative radiant glow, accent overlays |
Shadow Philosophy:
The system favors apparent depth over rendered depth. No CSS box-shadow property is used for elevation; instead, backgrounds are layered using gradients and opacity changes. This creates a flat, modern aesthetic that feels spacious and controlled. Buttons and inputs sit on a shared plane; there is no "lifted" card effect. Focus and hover states are achieved through color shift and subtle gradient brightening, not shadow expansion.
The system employs opacity strategically for layering and emphasis:
0.02 (2%): Barely perceptible background tint, use for faint dividers or borders0.20 (20%): Light overlay for disabled or de-emphasized states0.55 (55%): Medium opacity for secondary gradients and semi-transparent text layers0.72 (72%): Prominent opacity for readable overlays and main gradient layers0.80 (80%): Strong opacity for visible overlays and bright accent layers0.98 (98%): Near-opaque for text and primary content layers| Layer Name | Z-index | Use |
|---|---|---|
| Base | 1–5 | Static page content, default sections |
| Dropdown | 10 | Menu dropdowns, expandable panels |
| Sticky | 100 | Fixed header, persistent nav |
| Modal | 2147483647 | Fullscreen overlays, cookie consent (if used) |
Stacking Strategy: The z-index scale is extreme at the top (2147483647 for modals), indicating a single, universally-layered modal tier that sits absolutely above all content. Sticky navigation (header) uses 100 to sit above most dynamic content. Dropdowns and local UI elements start at 10. This is a simple, robust stacking model suited to marketing sites where modals are rare and navigation is persistent.
{colors.ink} — #FFFFFF or {colors.body} — #F0E6DF text on {colors.surface-alt} — #0D0D0D backgrounds for maximum readability.{rounded.xs} — 12px. This is the only rounded element in functional UI; it signals interactivity.{colors.accent-1} — #EC9117) and blue ({colors.accent-5} — #69A6F4) belong in badges, illustrations, and hero imagery—never in body text or form inputs.{rounded.none} — 0px is the default; roundness signals a button or badge only.{spacing.xs} — 8px (8px, 16px, 24px, 32px, etc.) for all padding, margins, and gaps. Never guess intermediate values.border-radius: 0px; rounding only belongs on buttons.{rounded.none} — 0px, {rounded.xs} — 12px, and {rounded.sm} — 20px. No other radii exist.| Breakpoint | Width | Content Width | Section Padding-X | Largest Heading | Body Font | Changes |
|---|---|---|---|---|---|---|
| Mobile (375px) | 375px | 358px | {spacing.md} (16px) | {typography.display-xl} 49px | {typography.body-xs} 12px | Single column, compact spacing, smaller heading |
| Tablet (768px) | 768px | 736px | {spacing.md} (16px) | {typography.display-xl} 49px | {typography.body-xs} 12px | Content width increases, layout remains single column |
| Desktop (1024px) | 1024px | 924px | {spacing.xl} (24px) | {typography.display-xl} 66px | {typography.body-xs} 12px | Section padding increases, heading scales to full 66px |
| Large Desktop (1280px) | 1280px | 1120px | {spacing.xl} (24px) | {typography.display-xl} 66px | {typography.body-xs} 12px | Further content expansion |
| Max (1440px) | 1440px | 1280px | {spacing.xl} (24px) | {typography.display-xl} 66px | {typography.body-xs} 12px | Maximum width reached |
Key Observations:
{spacing.md} (16px) to {spacing.xl} (24px) at 1024px.{typography.body-xs} 12px) does not change across breakpoints; all responsive scaling is heading-driven.While not explicitly measured, standard touch-friendly sizing applies:
{spacing.md} (16px) margin between interactive elements to prevent accidental taps{spacing.md} (16px); do not reduce further.{typography.display-xl} at smaller viewport or apply media query font-size: 49px.{colors.accent-1} — #EC9117 (Orange){colors.ink} — #FFFFFF (White){colors.body} — #F0E6DF (Warm Beige){colors.surface-alt} — #0D0D0D (Near Black){colors.link} — #0000EE (Blue){colors.primary} — #000000 (Pure Black){colors.muted} — #D8D3D1 (Light Gray){colors.faint} — #9B8F79 (Taupe){colors.accent-5} — #69A6F4{colors.accent-4} — #00FFC8{colors.accent-6} — #C667D1{colors.accent-2} — #3E966A{colors.accent-3} — #CC4637Always use {colors.surface-alt} — #0D0D0D as the default background. All sections sit on a deep, near-black base unless explicitly overridden by a gradient or decorative overlay.
Apply negative letter-spacing to all display text above 35px. Use values from the typography table (e.g., –1.9px for 44.96px text, –1.26px for 42px text). This is non-negotiable brand identity.
Layer gradient overlays for depth, never CSS box-shadow. Use the exact gradient values provided in the token data (e.g., linear-gradient(135deg, rgba(255, 255, 255, 0.082) 0%, rgba(255, 255, 255, 0.055) 50%, rgba(0, 0, 0, 0.035) 100%)) to suggest elevation and dimensionality.
Keep button border-radius at {rounded.xs} — 12px; everything else is {rounded.none} — 0px. Do not round inputs, cards, or content containers. Roundness signals a CTA only.
Use monospace fonts (JetBrains Mono) exclusively for code, inputs, and technical content. Never mix with proportional fonts in these contexts.
Respect the z-index scale: Base content is 1–5, dropdowns are 10, sticky nav is 100, modals are 2147483647. Do not create intermediate levels.
Scale typography in large jumps (66px → 42px → 24px → 12px). Do not use intermediate sizes; the hierarchy relies on dramatic scale shifts.
Apply accent colors (#EC9117, #69A6F4, #00FFC8, etc.) only to non-functional UI elements (badges, illustrations, decorative overlays). Functional text and buttons use black, white, or blue (#0000EE).
Use the spacing scale exclusively. All padding, margins, and gaps must be multiples of {spacing.xs} — 8px (4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 48px). Never invent intermediate values.
Maintain single-column layouts across all breakpoints. No multi-column grids, no card arrangements side-by-side. All content stacks vertically and expands horizontally within the content column width.
At 1024px and above, increase section padding-x to {spacing.xl} — 24px and scale display headings to 66px. Below 1024px, use {spacing.md} — 16px padding and reduce heading size to 49px.
Inputs have a 2px border in #FF0064 (hairline color) with border-radius: 0px. No shadow; maintain sharp corners. Focus state removes visible outline.
Ensure all text layers have sufficient contrast against their background. {colors.ink} — #FFFFFF on {colors.surface-alt} — #0D0D0D is the gold standard (pure contrast). {colors.body} — #F0E6DF on the same dark background also passes WCAG AA.
Hero sections are centered, full-width, and include gradient overlays for atmospheric depth. Use {spacing.band} — 48px for top and bottom margins.
Do not invent CSS properties or values not present in the token data. If a color, size, or spacing value is not listed, omit it and flag it as a gap. Never estimate or round.
Hover and active states for buttons: The extraction captured only a base "filled" button state. Explicit hover, active, and disabled states were not measured. Implementations should apply standard practices (e.g., darkening background or reducing opacity on hover) but confirm with live site review.
Error, success, and warning colors: The site does not expose a semantic status palette. If error messages, success confirmations, or warning alerts are needed, no brand colors have been defined for them. Add custom colors or request brand guidance.
Interaction states for links beyond hover: Link :hover rules were extracted but show complex CSS variable fallbacks, making exact color values unclear. Implementations should test link hover, visited, active, and focus states against the live site.
Elevation and shadow depth: The extraction found no measurable CSS box-shadows or elevation layers. The system appears to use only gradient overlays and color-blocking for depth. If shadows are used on elements not analyzed (e.g., behind authentication or in collapsed sections), they were not captured.
Dark mode or alternative theme: The extraction analyzed one color theme only. If the site offers a dark/light mode toggle or user-selectable theme, only the analyzed theme is documented here.
Responsive behavior above 1440px: The largest measured viewport was 1440px. Content behavior at ultra-wide displays (1600px+) was not tested.
Animation, transition, and motion: The extraction did not measure CSS animations, transitions, or keyframes. Any motion effects (e.g., fade-in, slide, hover animations) were not captured and are not documented here.
Accessibility attributes (ARIA, role, etc.): Component semantics and accessibility markup (ARIA labels, roles) were not extracted. These must be added per WCAG standards.
Form validation and error states: Input :focus and :hover states were partially captured, but validation states (invalid, required, disabled) were not fully measured. Implementations should follow standard form UX patterns.
Breakpoint behavior below 375px: The smallest measured viewport was 375px. Mobile devices with smaller screens (e.g., very old phones) may require additional media queries not documented here.
Icon and image treatment: Icon styling, stroke widths, and fill colors for decorative elements were not individually extracted. Illustrations in the hero use decorative accent colors, but exact specifications for each icon are unavailable.
Advanced gradients and decorative effects: Multiple complex gradients (conic, radial, linear with filters) were extracted but not tied to specific named components. Determine where each gradient applies by reviewing the captured CSS values against the live page.
8 decorative accent colors without assigned roles: {colors.accent-2} through {colors.accent-6} (green, red, cyan, blue, purple) have no measured functional purpose. They appear in illustrations and decorative overlays only; do not repurpose them for status states or functional text.
Line heights not measured for all roles: {typography.body-xl} and {typography.body-xs} do not have explicit line-height values in the extraction; they are flagged as "not measured." Use standard body line-height (1.5) for these unless live-site verification suggests otherwise.
Document Version: 1.0
Extracted Date: Current
Coverage: Arrakis Finance homepage (arrakis.finance/)
Page Title: Crypto Market Making for Token Issuers | Arrakis Finance
Confidence Level: High for colors, typography, and spacing; medium for interaction states and elevation (limited data); low for behind-authentication surfaces and advanced effects.