Reactor Lime
#ebfb10Primary action fill (CTA buttons), announcement bar background, and the sole warm accent — acid yellow-green against black creates instant focal hierarchy
Aaru
aaru.comWebsite preview
The design language
Aaru operates as a dark-mode scientific observatory: pure black canvas interrupted by one vivid electric-blue section and a single acid-yellow-green accent that reads like an instrument-panel indicator light. Typography is deliberately inverted from convention — weight 330 ultra-light runs through every role, body text carries positive letter-spacing (0.025–0.080em) for a data-label cadence, and only display headings tighten to negative tracking. Surfaces are flat and shadowless; hierarchy is built through thin 1px borders, generous whitespace, and numbered annotations rather than elevation. The visual language is terminal, measured, and anti-decorative — every element earns its place like a readout on a control panel.
Color palette
brand
Plasma Blue
#1019ecSection background and chromatic border accent — vivid electric violet-blue that shifts the entire page into instrument-mode for feature blocks
neutral
Void Black
#000000Page canvas, primary background — the dominant surface across all dark sections
Carbon
#0a0a0aElevated surface for nav borders, button outlines, and secondary structural elements against the black canvas
Graphite
#18181bSubtle raised surface for cards or containers sitting on the black canvas — the lightest neutral step before chromatic sections
Frost
#ffffffPrimary text, hairline borders on dark sections, and inverted backgrounds — the most-used color after black
Ash
#bababaMuted helper text, icon strokes, and secondary surface fills
Smoke
#9d9d9dMedium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color
Slate
#858484Body text borders and the quietest readable gray — used where content recedes into the background
Typography
Type scale
Major Second (1.125) · 16px basedisplay
50px · 330 · 1.2 · -1.25px trackingThe quick brown fox jumps
heading-lg
40px · 330 · 1.2 · -2px trackingThe quick brown fox jumps
heading
34px · 330 · 1.25 · -0.85px trackingThe quick brown fox jumps
heading-sm
30px · 330 · 1.25 · -0.75px trackingThe quick brown fox jumps
subheading
20px · 330 · 1.25 · -0.5px trackingThe quick brown fox jumps
text-16
16px · 330 · 1.5The quick brown fox jumps
body
15px · 330 · 1.5 · 0.6px trackingThe quick brown fox jumps
text-14
14px · 330 · 1.43The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
abcOracle
- Weights
- 330, 400
- Sizes
- 12, 13, 14, 15, 16, 34, 50
- Line height
- 1.25–1.50
- Letter spacing
- -0.025em at 50px and 34px, 0.025–0.040em at 12–16px
- Fallback
- Inter, Söhne, or General Sans
- Features
- "ss01" on, "tnum" on, "ss02" on
Primary UI and body typeface — used for navigation, body copy, labels, buttons, and medium-scale headings. Weight 330 ultra-light is the default; 400 is reserved for body paragraphs and readable text blocks. Positive letter-spacing on sizes ≤16px creates a data-label cadence.
Additional typeface
gtPantheon
- Weights
- 330
- Sizes
- 20, 30, 40
- Line height
- 1.20–1.25
- Letter spacing
- -0.050em at 40px, -0.025em at 20–30px
- Fallback
- GT Pantheon (closest free alternative: Söhne Schmal, or Suisse Int'l Light)
Display and subheading typeface — weight 330 only, paired with tight negative tracking. Used for section openers and mid-scale titles. The contrast between its lighter cut and abcOracle's 330 creates two distinct text registers without using bold.
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 30px
- Element gap
- 8px
Border radius
tags
0pxcards
6pxinputs
0pxbuttons
0pxSpacing scale
2px8px10px12px14px16px20px24px28px30px32px40px48px64px80px96px128px265pxGuidelines
Do
- Use weight 330 as the default text weight for all UI elements; reserve weight 400 only for body paragraphs longer than two lines
- Apply positive letter-spacing (0.025–0.080em) to all text at 16px and below; apply negative tracking (-0.025 to -0.050em) at 20px and above
- Use #ebfb10 only for the single most important action per view — announcement bars and primary CTAs only
- Use #1019ec as a full-bleed section background to signal a tonal shift; never use it as a small accent fill
- Use 1px borders in inverted colors (white on dark, black on blue) instead of shadows to separate layers
- Maintain an 8px base-unit rhythm: all padding and gaps should resolve to 8, 10, 12, 16, 20, 24, 30, 32, or 40px
- Keep corner radii at 0px for buttons, inputs, and tags; the only permitted radius is 6px for card surfaces
Don’t
- Do not use bold (600+) or semibold (500+) weights — the system reads through weight contrast between 330 and 400 only
- Do not apply drop shadows, box-shadows, or glow effects to any element
- Do not introduce additional chromatic colors — the palette is exactly black, white, three grays, lime, and electric blue
- Do not use the blue or lime as text color on light backgrounds; both are background or button-fill colors only
- Do not center-align body text — the system reads left-aligned throughout, with asymmetric compositions
- Do not use border-radius above 6px on any component — the system is angular and terminal
- Do not use uppercase letter-spacing on text below 12px; the smallest sizes already carry enough cadence
Components
Announcement Bar
Top-of-page alert barFull-bleed #ebfb10 background, 12–14px abcOracle weight 330, uppercase, letter-spacing 0.040–0.080em, color #000000. Height ~40px. Contains a short label and a 'READ MORE →' link. Padding 10px top/bottom.
Ghost Navigation Button
Secondary nav action (LOG IN)Transparent background, 1px white border, white text, abcOracle 330 at 12–14px, uppercase, letter-spacing 0.040em. Padding 12px 32px. No radius.
Filled Navigation Button
Primary nav action (CONTACT)White background (#ffffff), black text, abcOracle 330 at 12–14px, uppercase, letter-spacing 0.040em. Padding 12px 32px. No radius. Inverted from the ghost variant to create a clear two-step nav hierarchy.
Hero Headline
Primary page headlineabcOracle weight 330 at 50px, line-height 1.20, letter-spacing -0.025em, white on #000000. Sentence-case, not uppercase — the whisper-weight does the typographic work. Left-aligned, max-width ~600px.
Section Statement
Mid-page section openerWhite text on #1019ec background, abcOracle 330 at ~34–40px, tight tracking. Max-width ~480px, left-aligned. Sets the tone for each feature block.
Numbered Annotation Row
Labeled section header with indexTwo-part label: a small numeric prefix (01–04) in abcOracle 330 at 13px, #ffffff, paired with an uppercase label at 12–13px, letter-spacing 0.040em. A thin 1px white horizontal rule sits above the row. Used as section markers inside the blue block.
Accordion Body Text
Expandable content under a numbered rowWhite text on #1019ec, abcOracle 400 at 15px, line-height 1.50, normal tracking. Indented to align with the label, not the number. Max-width ~560px for comfortable reading width.
Filled CTA Button
Primary action button#ebfb10 background, #000000 text, abcOracle 330 at 14px, uppercase, letter-spacing 0.040em. Padding 14px 30px. No radius. The acid green-on-black pairing is the highest-contrast action in the system.
Hairline Divider
Section separator1px solid line, color shifts by section: #ffffff on dark, #000000 on blue. Full-width within the content column, used above numbered rows and below group labels.
Particle Scatter Visualization
Decorative data graphic in heroHundreds of small white/gray dashes and dots scattered across a vertical field on the right side of the hero. Functions as abstract brand mark — suggests population granularity. No fixed grid; reads as a scatter plot of human data points.
Muted Link
Inline or footer text linkabcOracle 330 at 13–14px, color #9d9d9d, no underline by default. Hover state lightens to #ffffff. Letter-spacing inherits the body cadence at 0.025–0.040em.
Logo Lockup
Brand mark in navigationSmall geometric icon (4-dot cluster) + lowercase wordmark 'aaru' in abcOracle 330 white, 16px. Sits left-aligned in the nav bar.
Surfaces & elevation
Level 0
Void Canvas
#000000Base page background — the dominant surface
Level 1
Carbon
#0a0a0aSubtle elevation for borders and outlines on the dark canvas
Level 2
Graphite
#18181bContainer surface for cards or callouts sitting on black
Level 3
Plasma Blue
#1019ecChromatic section break — full-bleed feature background
The design intentionally avoids shadows and drop-shadow elevation. Hierarchy is created through three mechanisms only: surface color shifts (black → graphite → blue), 1px hairline borders in contrasting colors, and generous whitespace. This flat approach reinforces the instrument-panel metaphor — real data readouts don't cast shadows.
Layout & imagery
Layout
The page alternates between two full-bleed tonal zones: a dominant black canvas and a single vivid blue section. The hero is dark with a left-aligned headline and a right-side particle visualization; the body shifts to #1019ec for the feature manifesto, then returns to black. Content within each zone is constrained to a max-width of ~1280px and left-aligned. The blue section uses a numbered accordion pattern: four labeled rows (01–04) stacked vertically, with thin dividers between them and expandable body text under the first row. Vertical rhythm is generous — 80px section gaps, 30px card padding, 8px element gaps — creating a spacious, slow-reading cadence. Navigation is a minimal top bar: logo left, three text links + two buttons right, sitting over a yellow-green announcement strip.
Imagery
Imagery is abstract and data-driven, not photographic. The hero features a particle-scatter visualization — hundreds of small dashes and dots forming a vertical cloud that suggests population data points or agent trajectories. The visual treatment is monochromatic (white/gray marks on black) with no photographic subjects, no people, no lifestyle shots. The overall image role is atmospheric and brand-defining rather than explanatory — it signals the product's domain (simulation, agents, data) without illustrating a specific use case. Decorative graphics are flat, sharp-edged, and terminal in feel — no gradients, no blurs, no organic shapes.
Design notes
Agent Guide
Quick Color Reference: - text: #ffffff (primary), #9d9d9d (muted), #000000 (on light/blue surfaces) - background: #000000 (canvas), #1019ec (feature section), #ebfb10 (announcement/CTA) - border: #ffffff (on dark), #000000 (on blue), #9d9d9d (muted) - accent: #ebfb10 (lime — CTA fill) - primary action: #ebfb10 (filled action) Example Component Prompts: 1. Build a hero section on #000000 canvas. Headline at 50px abcOracle weight 330, #ffffff, letter-spacing -1.25px, line-height 1.20, left-aligned, max-width 600px. Subtext at 15px abcOracle weight 400, #9d9d9d, letter-spacing 0.375px. A filled CTA button: #ebfb10 background, #000000 text, 14px abcOracle 330 uppercase, letter-spacing 0.56px, padding 14px 30px, 0px radius. To the right, a particle-scatter graphic: ~200 small white and #bababa dashes/dots distributed across a vertical 400×600px field. 2. Build a numbered accordion row on #1019ec background. A 1px white hairline divider sits above. The row shows '01' in abcOracle 330 at 13px #ffffff, followed by an uppercase label at 12px abcOracle 330, letter-spacing 0.48px, #ffffff. Body text below at 15px abcOracle 400, #ffffff, line-height 1.50, max-width 560px. Vertical spacing between rows: 40px. 3. Build a navigation bar on #000000. Left: a 4-dot cluster icon + 'aaru' wordmark in abcOracle 330 at 16px #ffffff. Right: three text links (HOME, PRODUCTS, ABOUT) in abcOracle 330 at 13px #ffffff, letter-spacing 0.52px, with 32px column gap. Then a ghost button: 1px #ffffff border, transparent fill, 12px abcOracle 330 uppercase white, padding 12px 32px, 0px radius. Then a filled button: #ffffff background, #000000 text, same type spec, same padding and radius. 4. Build an announcement bar at the very top. Full-bleed #ebfb10 background, 40px tall. Centered text in abcOracle 330 at 12px #000000, uppercase, letter-spacing 0.96px, with a 'READ MORE →' link inline. 5. Build a muted footer link list on #000000. Items in abcOracle 330 at 13px, color #9d9d9d, letter-spacing 0.325px, stacked vertically with 10px row gap. A 1px #0a0a0a hairline sits above the list. No icons, no underlines.
Similar brands
Linear
Same dark-mode scientific aesthetic with ultra-light typography, generous whitespace, and flat borderless surfaces
Vercel
Same minimal terminal-style navigation, weight 300 display type, and reliance on color contrast over shadows for hierarchy
Anthropic
Same observatory-like dark canvas with a single chromatic accent color used for primary actions and announcement bars
Runway
Same data-visualization-forward hero treatment and dark-canvas + single-vivid-accent color logic
Weights & Biases
Same instrument-panel feel with numbered annotations, tracked uppercase labels, and flat hairlines instead of cards
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
