# Crepuscular Corporate Style Reference

Professional Design System | Twilight Palette | Subtle Rounded Corners

## Crepuscular Color Palette

Dawn 1 #e89547
Dawn 2 #d4a574
Dusk 1 #6b8cae
Dusk 2 #4a6b8a
Alert 1 #d47d6a
Alert 2 #c5a86f
Slate #8b95a8
Primary Text #e8eaf0

Twilight-inspired palette: Dawn (warm sunrise tones), Dusk (cool blue-grays), Alert (muted warnings). Designed for professional contexts with WCAG AA contrast compliance.

## Typography System

# H1: Steel Blue Gradient

## H2: Steel Blue Heading

### H3: Slate Gray Subheading

#### H4: Muted Gold Accent

##### H5: Primary Text Weight

###### H6: Uppercase Label

Body text uses IBM Plex Sans at 1rem with 1.7 line-height for optimal readability. Strong emphasis uses dawn orange, while italic emphasis uses dusk blue. Inter serves as the header font with negative letter-spacing for a modern, technical feel.

Inline `code snippets` use JetBrains Mono with subtle rounded borders.

    // Code block example
    function twilight() {
        return "Professional aesthetic";
    }

> Blockquotes use muted secondary text with a steel blue left border. Suitable for callouts, citations, or highlighted content in technical documentation.

## Button Variants

### Primary Button (Dusk Gradient)

### Secondary Button (Dawn Gradient)

### Outline Button

### Ghost Button

### Alert Button

All buttons use subtle 1px translateY on hover. Corner radius: 3px (--radius-sm).

## Card Components

#### Dawn Accent

Warm orange left border. Use for sunrise-themed content or warm highlights.

#### Dusk Accent

Cool blue left border. Use for twilight-themed content or cool highlights.

##### Standard Card

Default card with rgba(200,210,230,0.08) background.

### Elevated Card

Uses rgba(200,210,230,0.04) for subtle depth differentiation. Ideal for nested content.

### Solid Card

Opaque slate background (#2a2d3e) for high-contrast sections or featured content.

## Highlight Card (Light Mode)

### Featured Content Section

The highlight card uses rgba(245, 247, 250, 0.95) for maximum contrast and readability. Suitable for important announcements, featured articles, or executive summaries.

#### Specifications:

- Background: rgba(245, 247, 250, 0.95)
- Border: 2px steel blue (#6b8cae)
- Border radius: 6px (--radius-lg)
- Text color: #2a2d3e (high contrast)
- Heading color: #1a1d2e (near-black)

Use this variant for content requiring extended reading or when maximum accessibility is needed. The `card-highlight` class overrides all child element colors for optimal light-mode presentation.

## Data Tables

Metric | Q1 2024 | Q2 2024 | Status
--- | --- | --- | ---
Revenue | $2.4M | $2.8M | On Track
Users | 45,200 | 52,800 | Growing
Churn Rate | 3.2% | 2.8% | Improved
Support Tickets | 1,240 | 980 | Critical
Overall Performance | Above Target

## Form Elements

Username
Email Address
Department
Notes
Permissions
Read Access
Write Access
Admin Access

## Progress Indicators

### Native Progress Elements

### Custom Progress Bars

Project Completion 85%
Budget Utilized 62%
Team Capacity 25%

## Badges & Labels

New Feature In Progress Critical Archived Priority Verified

### Use Cases

Status: Active Pending Blocked

Tiers: Standard Premium Enterprise

## Tab Navigation

### Overview

System overview and key metrics. Tabs use a minimal underline indicator with no background on inactive states.

### Analytics Dashboard

- Monthly Active Users: 52,800
- Conversion Rate: 3.2%
- Average Session: 8m 45s
- Retention Rate: 76%

### System Settings

Configuration options and preferences.

API v2.1 Auto-update: ON

## Timeline Component

Q1 2024

#### Platform Launch

Initial product release with core features and basic integrations.

Q2 2024

#### Enterprise Features

Added SSO, advanced analytics, and team collaboration tools.

Q3 2024

#### API v2 Release

New API version with improved performance and expanded endpoints.

Q4 2024

#### Mobile Apps

Launch of iOS and Android applications with offline support.

## Statistics Display

52.8K
Active Users
97.2%
Uptime
$2.8M
Revenue
8.4
NPS Score

## Chart Components

### Performance Metrics

System Performance 92/100
Code Coverage 78/100
Documentation 65/100
Team Velocity 88/100

## Alert Messages

Information: System maintenance scheduled for Sunday 2:00 AM UTC. Expected downtime: 30 minutes.
Success: Configuration changes saved successfully. Changes will take effect immediately.
Warning: API rate limit approaching threshold. Consider upgrading your plan.
Error: Unable to connect to database. Please check your connection settings.

## Implementation Guide

### Border Radius System

Variable | Value | Use Case
--- | --- | ---
`--radius-xs` | 2px | Badges, small elements
`--radius-sm` | 3px | Buttons, inputs, code blocks
`--radius-md` | 4px | Cards, tables, standard components
`--radius-lg` | 6px | Large sections, highlight cards

### Color System Usage

Dawn: Warm accents for primary actions, highlights, and positive states.

Dusk: Cool accents for secondary actions, information, and neutral states.

Alert: Warning and error states requiring user attention.

All colors maintain WCAG AA contrast ratios against dark backgrounds.

### Typography Guidelines

Headers: Inter with negative letter-spacing (-0.02em to -0.01em) for modern feel.

Body: IBM Plex Sans at 0.9375rem (15px) with 1.7 line-height.

Code: JetBrains Mono for technical content.

### Design Constraints

- Corner radius: Sharp-but-round (2-6px range), never exceed 6px
- Border widths: 1px standard, 2px medium, 3px thick
- Opacity: bg-elevated: 0.04, bg-card: 0.08, bg-darker: 0.35
- Hover effects: Subtle 1px translateY, avoid excessive animation
- Color temperature: Balance warm (dawn) and cool (dusk) accents
- Fonts: Inter (headers), IBM Plex Sans (body), professional aesthetic
- Spacing: Consistent 0.5rem increments for padding/margins
- Accessibility: Maintain WCAG AA contrast ratios minimum