Dodona Design System

Brand colors, typography, and component library for the Dodona platform.

Color Palette

Primary (Oracle Orange)

Base: #F59127

#FEF6EB

100

#FDEAD3

200

#FBD5A7

300

#F9C07B

400

#F7AB4F

500

#F59127

600

#D97A0E

700

#A35B0A

800

#6D3D07

900

#371E03

950

#1C0F01

Secondary (Stone Gray)

Base: #857A6F

#F5F4F2

100

#E8E6E3

200

#D1CCC7

300

#BAB3AB

400

#A39A8F

500

#857A6F

600

#6B6259

700

#514A43

800

#37322D

900

#1C1917

950

#0E0D0B

Tertiary (Warm Taupe)

Base: #A19282

#F7F5F3

100

#EBE8E4

200

#D7D1C9

300

#C3BAAE

400

#AFA393

500

#A19282

600

#857668

700

#645A4E

800

#433D34

900

#211F1A

950

#110F0D

Semantic Colors

Colors mapped to CSS variables for theme support

Background

#f1f1f1

Foreground

#101010

Card

#ffffff

Muted

varies

Destructive

varies

Typography

Heading Scale

Font: Inter (system-ui fallback)

Display - 3.5rem

text-display

Heading 1 - 2.5rem

text-h1 / <h1>

Heading 2 - 2rem

text-h2 / <h2>

Heading 3 - 1.5rem

text-h3 / <h3>

Heading 4 - 1.25rem

text-h4 / <h4>

Heading 5 - 1.125rem

text-h5 / <h5>

Heading 6 - 1rem

text-h6 / <h6>

Body Text

Body Large - 1.125rem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-body-lg

Body - 1rem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

text-body

Body Small - 0.875rem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.

text-body-sm

Caption - 0.75rem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-caption

Buttons

Button Variants

All available button styles

Variants

Sizes

States

Form Elements

Input Fields

Default Input

Email Input

Password Input

Disabled Input

Card Variants

Nested Card

This is a card inside another card

Cards can be nested and used for grouping related content.

Sample Form

A complete form example with all elements

Layout & Spacing

Responsive Breakpoints

sm - 640px

md - 768px

lg - 1024px

xl - 1280px

2xl - 1536px

Border Radius

rounded-sm

rounded-md

rounded-lg

rounded-full

Dark Mode

Theme Support

Click the theme toggle in the header to switch between light and dark modes.

All components and colors automatically adjust to support both light and dark themes. The theme preference is detected from system settings and can be toggled manually.