Design System

A comprehensive guide to the design tokens, components, and patterns used in AVM Archives.

Color Palette

Brand Colors

--color-brand-primary

#DF8D25

--color-brand-secondary

#D91133

--color-brand-neutral

#1E1C0B

Primary Palette

primary-100

primary-200

primary-300

primary-400

primary-500

Secondary Palette

secondary-100

secondary-200

secondary-300

secondary-400

secondary-500

Neutral Palette

100

200

300

400

500

600

700

800

900

Semantic Colors

--color-foreground

--color-background

--color-link

--color-link-hover

--color-border

--color-border-subtle

--color-icon

--color-text-decoration

Typography

Font Families

--font-family-default

Noto Sans Malayalam - നമസ്കാരം

--font-keraleeyam

Keraleeyam Regular - കേരളീയം

Font Size Scale (Fluid Typography)

--font-size--2 The quick brown fox jumps
--font-size--1 The quick brown fox jumps
--font-size-0 The quick brown fox jumps
--font-size-1 The quick brown fox jumps
--font-size-2 The quick brown fox jumps
--font-size-3 The quick brown fox jumps
--font-size-4 The quick brown fox jumps
--font-size-5 The quick brown fox jumps
--font-size-6 The quick brown fox jumps

Spacing Scale

--spacing-5xs
--spacing-4xs
--spacing-3xs
--spacing-2xs
--spacing-xs
--spacing-s
--spacing-m
--spacing-l
--spacing-xl
--spacing-2xl
--spacing-3xl
--spacing-4xl
--spacing-5xl

Border Radius

--radius-xs

--radius-s

--radius-m

--radius-l

--radius-xl

Elevations (Shadows)

--elevation-1

--elevation-2

--elevation-3

--elevation-4

--elevation-5

Z-Index Scale

-1
0
1
2
3
4
5
6
7
8
9
10

Each box shows its z-index value. Higher numbers appear on top.

Component Examples

Buttons

Cards

Card Title

This is a sample card component showing how design tokens work together.

Elevated Card

This card has more elevation for emphasis.

Colored Card

Cards can use brand colors for special emphasis.

Links

This is a standard link

This is an underlined link

Form Elements

Animation Speeds

--animation-speed-instant
Instant (0.1s)
--animation-speed-fast
Fast (0.2s)
--animation-speed-medium
Medium (0.3s)
--animation-speed-slow
Slow (0.4s)

Hover over the colored boxes to see the animation speed in action.

Usage Guide

In CSS/SCSS

.my-component {
  color: var(--color-link);
  padding: var(--spacing-m);
  border-radius: var(--radius-l);
  box-shadow: var(--elevation-2);
}

In Inline Styles (Astro)

<div style="background-color: var(--color-primary-400);">
  Content here
</div>

With Tailwind Utilities

<div class="bg-primary-400 text-white p-m rounded-l">
  Content here
</div>

Dark Mode

This design system uses the light-dark() CSS function for automatic dark mode support.

Add the .darkmode class to the html or body element to enable dark mode.