@extends('layouts.admin') @section('header', 'Design System Style Guide') @section('content')

ConsentAngel Design System

Color System

Primary Colors

@foreach(['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as $shade)
primary-{{ $shade }}
@endforeach

Secondary Colors

@foreach(['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as $shade)
secondary-{{ $shade }}
@endforeach

Neutral Colors

@foreach(['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as $shade)
neutral-{{ $shade }}
@endforeach

Semantic Colors

success-600
warning-500
danger-600
info-600
Typography

Headings

Heading 1

text-4xl font-bold

Heading 2

text-3xl font-bold

Heading 3

text-2xl font-bold

Heading 4

text-xl font-bold
Heading 5
text-lg font-bold

Text Styles

Base text - The quick brown fox jumps over the lazy dog.

text-base

Small text - The quick brown fox jumps over the lazy dog.

text-sm

Extra small text - The quick brown fox jumps over the lazy dog.

text-xs

Medium text - The quick brown fox jumps over the lazy dog.

text-base font-medium

Semibold text - The quick brown fox jumps over the lazy dog.

text-base font-semibold

Bold text - The quick brown fox jumps over the lazy dog.

text-base font-bold

Italic text - The quick brown fox jumps over the lazy dog.

text-base italic

Muted text - The quick brown fox jumps over the lazy dog.

text-base text-neutral-500
Link text - The quick brown fox jumps over the lazy dog.
text-primary-600 hover:text-primary-700
Buttons

Button Variants

Primary Button
Primary Button
Secondary Button
Secondary Button
Danger Button
Success Button
Warning Button
Info Button

Button Sizes

Small Button
Small
Default Button
Default
Large Button
Large

Action Buttons

View
View Button
Edit
Edit Button
Delete Button
Cards

Card Variants

Card with Header

This is a card with a header. Cards are used to group related content.

This is a simple card without a header or footer.

Cards provide a flexible container for displaying content.

Card with Header and Footer

This card has both a header and footer section.

Cancel Save

This card uses the large padding option.

Different padding options are available: none, small, normal, and large.

Form Elements

Text Inputs

Select Inputs

Checkboxes & Radios

Feedback Elements

Badges

Primary
Secondary
Success
Danger
Warning
Info

Alerts

Success alert message

Error alert message

Warning alert message

Info alert message

@endsection