# Legal Information design system

> Legal Information design system measured from legalinformation.asia: Georgia font, 12 color hex codes, type scale and spacing. Light theme with pill corners.

Canonical page: https://sitepeel.dev/design-md/legalinformation.asia/

Legal Information’s website (legalinformation.asia) uses the Georgia font and #D9AE5C as its main color on a white background. Measured by Sitepeel on November 7, 2026.

## What font does Legal Information use?

Legal Information uses Georgia (weight 600) and Roboto (weight 700) on legalinformation.asia. Page titles are 39px at weight 700 (28px on phones) and body text is 16px. Measured on November 7, 2026.

- Georgia (weights 600)
- Roboto (weights 700)
- DM Sans (weights 400, 500)
- Instrument Sans (weights 400, 500)

## Legal Information colors: palette and hex codes

Legal Information’s main colors are #FFFFFF (white) for the background, #151515 (charcoal) for text and #D9AE5C (orange) as the main accent, with #B46500 (dark orange) and #C98230 (orange) as other accents. Measured on November 7, 2026.

- #FFFFFF: white
- #151515: charcoal
- #000000: near black
- #0B1C2C: deep blue
- #B3BCC4: cool silver
- #D9AE5C: orange
- #B46500: dark orange
- #C98230: orange

## What is Legal Information built with?

Legal Information’s website (legalinformation.asia) is built with Elementor, WordPress, jQuery, Bootstrap and PHP. Measured on November 7, 2026.

- Site builder & CMS: Elementor 4.3.6, WordPress 7.1.4
- JavaScript framework: jQuery 3.7.1
- Server: PHP 8.3.36, Apache HTTP Server
- Animation & 3D: GSAP
- Fonts & icons: Bootstrap Icons, Font Awesome 5.12.0, Google Fonts
- UI & CSS: Bootstrap 4.x

## Questions and answers

### What font does Legal Information use?

Legal Information’s website uses Georgia (weight 600) and Roboto (weight 700). Page titles are 39px at weight 700 (28px on phones) and body text is 16px. Measured on November 7, 2026.

### What are the Legal Information colors and hex codes?

On legalinformation.asia: #FFFFFF (white) for the background, #151515 (charcoal) for text and #D9AE5C (orange) as the main accent, with #B46500 (dark orange) and #C98230 (orange) as other accents. The color palette above lists all 12 colors with their hex codes and where each one is used.

### What is the Legal Information design system?

The design system on this page is legalinformation.asia’s, as measured on November 7, 2026: Georgia type, #D9AE5C as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Legal Information’s own documentation.

### What is Legal Information built with?

Legal Information’s website (legalinformation.asia) is built with Elementor, WordPress, jQuery, Bootstrap and PHP. The full tech stack Sitepeel found: Elementor, WordPress, jQuery, PHP, Apache HTTP Server, GSAP, Bootstrap Icons, Font Awesome, Bootstrap and Google Fonts. Measured on November 7, 2026.

### What is the Legal Information DESIGN.md?

A plain-text file with Legal Information’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Legal Information’s official design system?

No. Sitepeel measured it from legalinformation.asia’s public page on November 7, 2026. It is an independent analysis, not made or approved by Legal Information.

### Can I use Legal Information’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Legal Information’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/legalinformation.asia/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Legal Information.

## The DESIGN.md file

```markdown
---
version: alpha
name: Legal Information
description: "Light interface measured from legalinformation.asia: Georgia type with Roboto, orange accents, flat surfaces and pill-shaped controls."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#151515"
  on-background: "#151515"
  on-surface-strong: "#000000"
  on-surface-variant: "#0B1C2C"
  on-surface-muted: "#B3BCC4"
  overlay: "#FFFFFF1A"
  outline: "#FFFFFF4D"
  outline-variant: "#FFFFFF1F"
  primary: "#D9AE5C"
  on-primary: "#0B1C2C"
  secondary: "#B46500"
  tertiary: "#C98230"
typography:
  display-hero:
    fontFamily: Georgia
    fontSize: 54.5px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.02em
  headline-display:
    fontFamily: Roboto
    fontSize: 39px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.013em
  body-md:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.88
  body-lg:
    fontFamily: DM Sans
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.76
  body-sm:
    fontFamily: Instrument Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.3
  label-md:
    fontFamily: Instrument Sans
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.35
  label-sm:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Roboto
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.018em
  display-hero-mobile:
    fontFamily: Georgia
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.02em
rounded:
  xs: 2px
  sm: 12px
  md: 14px
  lg: 24px
  xl: 26px
  full: 9999px
spacing:
  xs: 3px
  md: 9px
  lg: 26px
  gutter: 10px
  section: 96px
  margin: 35px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0px 22px
    height: 54px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.background}"
    typography: "{typography.body-md}"
    rounded: 10px
    padding: 15px 30px
    height: 47px
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.secondary}"
  button-tertiary:
    backgroundColor: "#C6A18A"
    textColor: "{colors.background}"
    typography: "{typography.label-sm}"
    rounded: 11px
    padding: 0px
    height: 50px
  button-ghost:
    textColor: "{colors.background}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0px 22px
  card:
    textColor: "{colors.background}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 32px 30px 28px 30px
  link:
    textColor: "#E0E0E0"
---

# Legal Information Design System

## Overview

Legal Information describes itself as: “Legal Information provides reliable legal information and guidance on family, civil, criminal, property, marriage and other legal matters” The interface is light, built on **White (#FFFFFF)** with **Charcoal (#151515)** text, and **Orange (#D9AE5C)** as the main accent.

Type is set in **Georgia** and **Roboto**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Controls are pill-shaped.

Measured from [legalinformation.asia](https://legalinformation.asia/) on November 7, 2026 at 1440×900 and 390×844 from 323 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 12 roles, plus gradient stops #F4D994, #C9993F, #C98230, #F0CE8C.

- **White (#FFFFFF):** Page background, seen 2 times. Token `background`, CSS `--white`.
- **Charcoal (#151515):** Primary text and headings, seen 8 times. Token `on-surface`.
- **Near Black (#000000):** Headings and emphasis, seen 6 times. Token `on-surface-strong`.
- **Deep Blue (#0B1C2C):** Secondary text, seen 7 times. Token `on-surface-variant`.
- **Cool Silver (#B3BCC4):** Muted text and metadata, seen 6 times. Token `on-surface-muted`.
- **White 10% (#FFFFFF1A):** Translucent fill for cards and controls, seen 6 times. Token `overlay`.
- **White 30% (#FFFFFF4D):** Borders and dividers, seen 10 times. Token `outline`.
- **White 12% (#FFFFFF1F):** Secondary dividers, seen 6 times. Token `outline-variant`.
- **Orange (#D9AE5C):** Primary buttons and calls to action, seen 59 times. Token `primary`.
- **Deep Blue (#0B1C2C):** Text and icons on primary. Token `on-primary`.
- **Dark Orange (#B46500):** Secondary buttons, seen 1 time. Token `secondary`.
- **Orange (#C98230):** Accent in text, fills and borders, seen 12 times. Token `tertiary`.

## Typography

**Georgia**, **Roboto**, **DM Sans** and **Instrument Sans** share the interface. Fallback stack: `Georgia, Times New Roman, serif`. Other loaded fonts: Newsreader, themify, bootstrap-icons, elementskit.

- **display-hero:** Georgia 54.5px at weight 600, line height 1.08, tracking -0.02em (32px on mobile). Oversized hero statements.
- **headline-display:** Roboto 39px at weight 700, line height 1.2, tracking -0.013em (28px on mobile). Page title (h1).
- **body-md:** DM Sans 16px at weight 400, line height 1.88. Body text.
- **body-lg:** DM Sans 17px at weight 500, line height 1.76. Lead paragraphs.
- **body-sm:** Instrument Sans 15px at weight 400, line height 1.3. Secondary and small text.
- **label-md:** Instrument Sans 17px at weight 500, line height 1.35. Buttons, navigation and labels.
- **label-sm:** Roboto 16px at weight 700, line height 1.5. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 27% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 3px, md 9px, lg 26px.
- **Sections:** 96px vertical padding between major sections.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Page margin:** 35px on each side of full-width sections.
- **Breakpoints:** 575.98px, 576px, 580px, 640px, 767px, 767.98px, 768px, 991px, 991.98px, 992px, 1023px, 1024px, 1100px, 1199.98px, 1200px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights:

- `rgba(217, 174, 92, 0.25) 0px 0px 0px 3px`

A few raised panels add a soft drop shadow: `rgba(60, 35, 5, 0.45) -12px -16px 30px 0px inset, rgba(217, 174, 92, 0.55) 0px 36px 60px -24px`.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 88 elements.
- **lg (24px):** 24 elements.
- **xl (26px):** 24 elements.
- **sm (12px):** 18 elements.
- **md (14px):** 12 elements.
- **xs (2px):** 10 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Free consultation on WhatsApp”):** #D9AE5C fill, #0B1C2C text, 16px/600, 14px radius, padding 0px 22px.
- **button-secondary (“CONTACT US”):** #B46500 fill, #FFFFFF text, 16px/400, 10px radius, padding 15px 30px.
- **button-secondary-hover:** background #FFFFFF, text #B46500 on hover.
- **button-tertiary (“+ LEARN MORE”):** #C6A18A fill, #FFFFFF text, 16px/700, 11px 0px radius, padding 0px.
- **button-ghost (“+92 307 4834430”):** transparent fill, #FFFFFF text, 16px/600, 14px radius, padding 0px 22px, border 1px solid #FFFFFF4D.
- **card:** transparent fill, #FFFFFF text, 16px/400, 26px radius, padding 32px 30px 28px 30px, border 1px solid #FFFFFF1F.
- **link:** transparent fill, #E0E0E0 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 4 levels: #151515, #000000, #0B1C2C, #B3BCC4.
- Do reserve #D9AE5C for primary actions and key highlights.
- Do set headlines in Georgia with tight tracking (-0.013em).
- Do reuse the measured spacing steps (9px, 26px).
- Do make buttons and chips fully rounded (9999px); most other elements use 24px corners.
- Don't use #B3BCC4 for body text; it reaches 1.93:1 on #FFFFFF. Keep it for large text or metadata.
- Don't use heavy drop shadows; keep depth to hairline rings.
- Don't introduce new font families beyond Georgia, Roboto, DM Sans and Instrument Sans.
- Don't use #D9AE5C for large backgrounds or body text.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.2s, 0.3s, 0.25s, 0.4s.

- **Easing:** `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/legalinformation.asia/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```