Astrologia Clássica

Overview

Astrologia Clássica is a scholarly platform dedicated to classical and traditional astrology, serving practitioners and students seeking authentic ancient wisdom applied to contemporary life. The aesthetic embodies 'Warm Classicism'—a design philosophy that marries timeless elegance with approachable warmth. The interface uses a soft, earthy palette anchored by warm terracotta (#e6b08d) and cream (#f9f7f5), evoking aged parchment and candlelit study. The typography hierarchy (Montserrat for headings, Open Sans for body) creates a scholarly yet accessible voice. Users experience a sense of grounded authority: the UI feels like a well-curated library, not a mystical gimmick.

The brand voice is precise, respectful, and contemplative. Vocabulary leans toward classical terminology ('natal chart', 'traditional rulerships', 'dignities') without condescension. Tone is measured and educational, never breathless or sensationalized. Example sentence in brand voice: 'Saturn's placement in your tenth house reveals the karmic lessons embedded in your professional path—study its aspects carefully.'

Colors

The color system prioritizes warmth and scholarly credibility. Primary (#e6b08d) is a warm terracotta used for CTAs, highlights, and interactive focus states—it evokes aged parchment and candlelight, reinforcing the classical aesthetic. On-primary text (#3d2817) is a deep brown ensuring 7:1 contrast for accessibility. Secondary (#0693e3) is a vivid blue reserved for data visualization, links, and secondary actions; it provides visual relief against the warm palette. Tertiary (#ff6900) is a bright orange used sparingly for alerts, badges, and tertiary CTAs. The surface stack ranges from cream (#f9f7f5) at the brightest to warm gray (#d4d2cd) at the highest container level, creating subtle depth without harsh contrast. On-surface text (#1a1a1a) is near-black for readability. Outline (#999999

Typography

The type system balances classical authority with modern readability. Montserrat (weights 300, 400, 500, 700) serves all headings and labels, its geometric precision evoking scholarly precision and timeless elegance. Open Sans (400, 500) handles body copy and longer-form content, providing warm, approachable legibility at 16px base size with 24px line-height. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section breaks. Headline-lg (40px, 600 weight) anchors primary content sections. Headline-md (28px, 600 weight) introduces subsections. Title-lg (20px, 600 weight) labels cards and modules. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and callouts. Body-md (16px, 400 weight, 24px line-height) is the standard

Layout

The layout follows a 12-column grid with a max-width of 1024px, maintaining a fixed-width container on desktop to preserve reading rhythm and visual hierarchy. The spacing scale uses semantic tokens: unit (8px) as the base increment, sm (12px) for tight grouping, md (24px) for standard section padding and component spacing, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Gutter spacing is 24px, applied consistently to container left/right padding. The page rhythm alternates between full-width hero sections (no container constraint) and contained content blocks, creating visual breathing room. White-space philosophy emphasizes clarity: sections are separated by lg spacing (40px), cards within sections use md spacing (24px), and internal card padding is

Elevation & Depth

Depth is conveyed through subtle shadows and layering, avoiding harsh drop-shadows that would contradict the warm, scholarly aesthetic. Level 1 (Base/Surface): no shadow, flat background at {colors.surface}. Level 2 (Standard Card): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), background {colors.surface-container-lowest}, 1px solid border at {colors.outline-variant}. Level 3 (Elevated/Modal): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12), background {colors.surface-container-low}, 1px solid border at {colors.outline}. Hover states on interactive elements (cards, list items) transition to Level 3 shad

Shapes

The shape philosophy is 'Scholarly Softness'—rounded corners are applied judiciously to soften the interface without sacrificing authority. Buttons use {rounded.md} (0.75rem / 12px) for a gentle, approachable feel while maintaining professional appearance. Cards and containers use {rounded.md} (12px) for consistency. Input fields use {rounded.DEFAULT} (0.5rem / 8px) for a more minimal, focused appearance. Badges and pills use {rounded.full} (9999px) for maximum softness, signaling secondary or decorative content. Dividers and borders are sharp (0px radius) to maintain visual clarity. This hier

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses {colors.primary} (#e6b08d) background with {colors.on-primary} (#3d2817) text, {typography.label-md} (14px, 600 weight, 0.05em letter-spacing), {rounded.md} (12px), padding 12px 24px, and height 44px. On hover, background transitions to #d4a878 (darker terracotta) over 200ms with {elevation.md} shadow. Button-secondary is transparent with a 2px solid border at {colors.primary}, same text color, and same padding/height. On hover, background fills with {colors.primary-container} (#f5e8dc) and text shifts to {colors.on-primary-container} (#5c3d24). All buttons use cursor: pointer and transition: all 200ms ease-in-out.

Containers & Surfaces Cards are the primary content container. Base card uses {col

Do's and Don'ts

**Do**

• Do use {colors.primary} (#e6b08d) for primary CTAs, focus states, and interactive highlights—it's the signature warm accent that anchors the brand.
• Do maintain the 24px gutter and md spacing (24px) between sections to preserve the scholarly, breathing layout rhythm.
• Do apply {typography.label-md} (14px, 600 weight, 0.05em letter-spacing) to all button text and form labels for consistent visual hierarchy.
• Do use {rounded.md} (12px) for buttons and cards, and {rounded.full} (9999px) only for badges and pills to signal secondary content.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and {elevation.lg} on hover to create subtle, warm depth without harshness.
• Do pair Montserrat headings with Open Sans body copy to balance scholarly authority with approachable warmth.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—use {colors.on-surface} (#1a1a1a) and {colors.surface} (#f9f7f5) to maintain warmth.
• Don't apply border-radius > {rounded.lg} (16px) to buttons or cards; it dilutes the scholarly precision.
• Don't use {colors.secondary} (#0693e3) or {colors.tertiary} (#ff6900) as primary CTAs—reserve them for secondary actions, data visualization, and alerts.
• Don't exceed {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) shadow depth; harsh shadows contradict the warm, classical aesthetic.
• Don't mix Montserrat and Open Sans weights inconsistently; use Montserrat 600+ for headings/labels, Open Sans 400 for body.
• Don't apply letter-spacing > 0.08em on body text; it reduces legibility and contradicts the scholarly voice.