Principality of KaharagiaDesign System

Cheat Sheet

Quick reference for developers implementing Kaharagian government websites.

Typography

Font Family

UseFontVariable
HeadingsNoto Sans--font-heading
BodyNoto Sans--font-body
CodeSF Mono, Consolas--font-mono

Font Weights

WeightValueVariable
Regular400--weight-regular
Medium500--weight-medium
Semibold600--weight-semibold
Bold700--weight-bold

Letter Spacing

NameValueVariable
Tight-0.01em--tracking-tight
Normal0--tracking-normal
Wide0.02em--tracking-wide
Wider0.05em--tracking-wider

Heading Sizes

ElementMobileTablet (768px+)Desktop (1280px+)Line HeightVariable
H136px40px48px1.25--heading-xl
H228px32px36px1.25--heading-lg
H320px24px28px1.5--heading-md
H420px20px24px1.5--heading-sm
H518px18px18px1.5--heading-xs
H616px16px16px1.5--heading-2xs

Note: Never use H1 tags. Page titles start at H2.

Body Text Sizes

TypeSizeVariable
Extra Small14px--text-xs
Small16px--text-sm
Base18px--text-base
Large / Lead20px--text-lg
XL24px--text-xl

Line Heights

NameValueVariable
None1--leading-none
Tight1.25--leading-tight
Snug1.35--leading-snug
Normal1.5--leading-normal
Relaxed1.6--leading-relaxed
Loose1.75--leading-loose

Spacing Scale (4px base)

Variablerempx
--space-000
--space-px-1px
--space-0-50.125rem2px
--space-10.25rem4px
--space-1-50.375rem6px
--space-20.5rem8px
--space-2-50.625rem10px
--space-30.75rem12px
--space-3-50.875rem14px
--space-41rem16px
--space-51.25rem20px
--space-61.5rem24px
Variablerempx
--space-71.75rem28px
--space-82rem32px
--space-92.25rem36px
--space-102.5rem40px
--space-112.75rem44px
--space-123rem48px
--space-143.5rem56px
--space-164rem64px
--space-205rem80px
--space-246rem96px

Colors

Primary Brand (Kaharagian Red)

900
800
700
Primary
500
400
300
200
100

Secondary (Kaharagian Gold)

900
800
700
Gold
400
300
200
100

Gray Scale

950#0B0C0C
900#1D1D1B
800#2E2E2C
700#505A5F
600#626A6E
500#8B9196
400#B1B4B6
300#D1D3D4
200#E6E7E8
100#F3F4F5
50#F8F9FA
White#FFFFFF

Semantic Colors

PurposeHexLight VariantVariablePreview
Success#00703C#E6F4ED--color-success
Warning#FEBC0A#FFF8E0--color-warning
Error#D4351C#FCEAEA--color-error
Info#1D70B8#E8F1F8--color-info

Buttons

Button Sizes

SizePaddingFont SizeClass
Small6px 12px16px.btn-sm
Default10px 16px18px.btn
Large12px 24px20px.btn-lg
Start12px 24px18px.btn-start

Button Types

TypeClassBackground
Primary.btn-primaryKaharagian Red
Secondary.btn-secondaryTransparent (outline)
Tertiary.btn-tertiaryTransparent (underline)
Start.btn-startGreen (#00703C)

Live Examples

Form Elements

Input Fields

SizePaddingClass
Small4px 8px.form-input-sm
Default8px 12px.form-input
Large12px 16px.form-input-lg

Input Width Classes

ClassMax Width
.form-input-width-272px
.form-input-width-388px
.form-input-width-4112px
.form-input-width-5128px
.form-input-width-10224px
.form-input-width-20384px
.form-input-width-30576px

Form Group Spacing

  • Form group margin bottom: --space-6 (24px)
  • Label margin bottom: --space-2 (8px)
  • Hint text margin bottom: --space-2 (8px)
  • Textarea min height: 10rem (160px)

Live Examples

This is helper text

Layout

Container Widths

TypeMax WidthVariable
Narrow720px--container-narrow
Default1200px--container-max
Wide1400px--container-wide
Content672px--content-width
Content Wide992px--content-wide

Container Padding

BreakpointPadding
Mobile16px (--space-4)
Tablet (768px+)24px (--space-6)
Desktop (1280px+)32px (--space-8)

Focus States

PropertyValueVariable
Focus colorGold (#FEBC0A)--focus-color
Focus width3px--focus-width
Focus text color#0B0C0C--focus-text-color
Box shadow0 0 0 3px var(--focus-color)
This is how focus states look

Borders

Border Widths

VariableValue
--border-width-11px
--border-width-22px
--border-width-33px
--border-width-44px

Border Colors

VariableUse
--border-defaultStandard borders
--border-subtleLight borders
--border-strongEmphasis
--border-accentBrand color

Border Radius

All corners are sharp (0) for government authority style.

Exception: Use --radius-circle: 50% for circular elements (avatars, radio buttons).

Shadows

VariableValueUse
--shadow-xs0 1px 2px rgba(0,0,0,0.05)Subtle elevation
--shadow-sm0 1px 3px rgba(0,0,0,0.1)Cards, buttons
--shadow-md0 4px 6px -1px rgba(0,0,0,0.1)Dropdowns
--shadow-lg0 10px 15px -3px rgba(0,0,0,0.1)Modals
--shadow-xl0 20px 25px -5px rgba(0,0,0,0.1)Dialogs
xs
sm
md
lg
xl

Transitions

SpeedDurationVariableUse
Fast100ms--duration-fastMicro-interactions
Normal200ms--duration-normalStandard transitions
Slow300ms--duration-slowComplex animations

Easing: cubic-bezier(0.4, 0, 0.2, 1) (--ease-default)

Fast
Normal
Slow

Hover over the boxes to see different transition speeds

Z-Index Scale

LayerValueVariableExample Use
Base0--z-baseNormal content
Dropdown100--z-dropdownDropdown menus
Sticky200--z-stickySticky headers
Fixed300--z-fixedFixed navigation
Modal500--z-modalModal dialogs
Tooltip700--z-tooltipTooltips, popovers

Quick Reference CSS Classes

Typography

.lead          /* 20px intro text */
small          /* 16px small text */

Layout

.container            /* Centered max-width */
.content-container    /* Narrow (42rem) */

Buttons

.btn                  /* Base styles */
.btn-primary          /* Red filled */
.btn-secondary        /* Red outline */
.btn-tertiary         /* Text link */
.btn-start            /* Green start */
.btn-sm / .btn-lg     /* Sizes */

Forms

.form-group           /* Container with 24px margin-bottom */
.form-label           /* 18px bold label */
.form-label-lg        /* 20px bold label */
.form-hint            /* 16px gray hint text */
.form-input           /* Standard text input */
.form-input-sm        /* Small input */
.form-input-lg        /* Large input */
.form-textarea        /* Multi-line input */
.form-select          /* Dropdown select */
.form-error-message   /* Red error text */
.form-group-error     /* Error state wrapper */

Example Usage

<!-- Page Title (use H2, not H1) -->
<h2>Apply for a passport</h2>

<!-- Lead paragraph -->
<p class="lead">Use this service to apply for or renew your Kaharagian passport.</p>

<!-- Form field -->
<div class="form-group">
  <label class="form-label" for="name">Full name</label>
  <span class="form-hint">As shown on your birth certificate</span>
  <input class="form-input" type="text" id="name" name="name">
</div>

<!-- Error state -->
<div class="form-group form-group-error">
  <label class="form-label" for="email">Email address</label>
  <span class="form-error-message">Enter a valid email address</span>
  <input class="form-input" type="email" id="email" name="email">
</div>

<!-- Buttons -->
<button class="btn btn-primary">Continue</button>
<button class="btn btn-secondary">Save as draft</button>