Internal Reference

raus.cloud Design System

Living reference for all brand, typography, color, and component decisions. Always use this when building new pages or UI.

Back to Site

Identity

The raus.cloud identity is text-based — no image logo. The wordmark and favicon icon are the two brand marks.

Wordmark (light bg)

raus.cloud

text-3xl font-medium tracking-tight font-display text-brand-dark

Wordmark (dark bg)

raus.cloud

text-3xl font-medium tracking-tight font-display text-white

Favicon / Icon

80px

48px

24px

bg: #10b981, rx: 20, letter: white bold "R"

Wordmark hover state

raus.cloud

hover:text-brand-accent transition-colors

Brand Colors

Emerald green is the primary accent. The palette supports both light and dark mode.

brand-accent

#10b981

Primary CTA, links

brand-accentDark

#059669

Hover states

brand-light

#ecfdf5

Light section bg

brand-border

#d1fae5

Card borders

brand-dark

#0a0a0a

Body text

brand-primary

#0f1419

Dark section bg

brand-secondary

#6b7280

Muted text

white

#ffffff

Card backgrounds

Neutral Scale

gray-100

gray-200

gray-400

gray-700

gray-800

gray-950

Typography

Space Grotesk for display/headings, Inter for body. Self-hosted in static/fonts/.

Space Grotesk — Display

The Quick Brown

Fox Jumps Over

The Lazy Dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

font-family: 'Space Grotesk'
Headings, hero, wordmark, CTAs

Inter — Body

Body copy reads cleanly at any size. Inter is optimized for screen legibility across all weights from light to bold.

Secondary text, metadata, captions, and UI labels use Inter at smaller sizes.

font-family: 'Inter'
Body, UI text, captions

Type Scale

text-hero Hero 3.5rem / lh 1.1 / ls -0.02em

text-display Display 2.5rem / lh 1.2 / ls -0.01em

text-3xl Section Heading 1.875rem

text-2xl Sub-heading 1.5rem

text-xl Lead paragraph 1.25rem

text-lg Body large 1.125rem

text-base Body default 1rem

text-sm Caption / metadata 0.875rem

text-xs Label / eyebrow 0.75rem

Font Weights

Light

font-light (300)

Normal

font-normal (400)

Medium

font-medium (500)

Semibold

font-semibold (600)

Bold

font-bold (700)

Components

Reusable CSS component classes defined in assets/css/main.css.

Buttons

.btn.btn-primary bg-brand-accent, white text, hover → bg-brand-accentDark

.btn.btn-secondary transparent, border-brand-border, hover → border-brand-accent

Card

Card Title

Description text explaining the feature or concept in a concise way.

Another Card

Cards use rounded-2xl, shadow-card, border-brand-border with hover shadow-lg.

Third Card

Dark mode: bg-gray-800, border-gray-700 — automatically applied via dark: variants.

.card → bg-white rounded-2xl p-8 shadow-card border border-brand-border hover:shadow-lg dark:bg-gray-800 dark:border-gray-700

Section Backgrounds

.section-light

bg-brand-light (emerald tint) / dark: bg-gray-800

.section (default)

bg-white / dark: bg-gray-900 — py-20

.section-dark

bg-brand-primary (#0f1419) / dark: bg-gray-950

Code & Prose

Inline code:

Use hugo server -D to start development.

Code block:

cd apps/landing && hugo server -D
# Server running on http://localhost:1313

Blockquote:

Stop spending runway on AWS, spend it on customers instead.

Badge / tag:

Case Study Infrastructure Docker

Shadows

All shadows use emerald-tinted values for cohesion with the brand accent.

shadow-subtle

rgba(16,185,129,0.1)

Hover cards, inputs

shadow-card

rgba(16,185,129,0.08)

Default card shadow (.card)

shadow-glow

rgba(16,185,129,0.3)

Accent elements, CTAs

Border Radius

Generous rounding gives the brand a modern, friendly feel.

rounded-lg

0.5rem (8px)

Buttons, tags, inputs

rounded-xl

1rem (16px)

Sections, containers

rounded-2xl

1.5rem (24px)

Cards (.card)

rounded-full

9999px

Badges, pills

Spacing

Key spacing values used consistently across the site.

py-20

5rem — section padding

p-8

2rem — card padding

py-4 px-6

button padding

px-6 lg:px-8

container horizontal

Animation

CSS-only marquee for the logo/tech strip. Dark mode aware via dark: variants.

Marquee (.marquee-container + .marquee-content)

Docker Swarm · Coolify · Hetzner CAX21 · PostgreSQL · Terraform · Let's Encrypt · Docker Swarm · Coolify · Hetzner CAX21 · PostgreSQL · Terraform · Let's Encrypt

--marquee-speed: 20s (default: 100s, fast: 10s)

Pause on hover: .marquee-content:hover { animation-play-state: paused }

Dark Mode

Class-based dark mode via dark: Tailwind variants. The .dark class is toggled on <html>. Persisted in localStorage.

Light Mode

Heading text (#0a0a0a)

Secondary text (#6b7280)

Light section background

Dark Mode

Heading text (white)

Secondary text (gray-400)

Dark section background

Implementation

<!-- In <head>, before body renders -->
<script>
  const theme = localStorage.getItem('theme') ||
    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  if (theme === 'dark') document.documentElement.classList.add('dark');
</script>

<!-- Toggle function -->
function toggleTheme() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
}

Identity Colors Typography Components Shadows Radius Spacing Animation Dark Mode ← Back to raus.cloud