Component · v0.1

Aqua brand tokens.

The canonical reference for color, type, spacing, and shadow. Click any swatch to copy the hex. Pulled from the aqua-design-system skill.

Brand colors

click to copy hex

#28020F

Tamarind

--color-primary

Primary✓ Copied

#E35300

Blaze Orange

--color-accent

Accent✓ Copied

#C1D6FF

Hawkes Blue

--color-secondary

Secondary✓ Copied

#F6EBE3

Linen

--color-surface

Page surface✓ Copied

#151515

Woodsmoke

--color-dark

Body text · dark sections✓ Copied

#F9F9F9

Alabaster

--color-light

Card backgrounds✓ Copied

Extended palette

derived from brand colors

#FF7A33

Accent soft

--accent-soft

Hover · gradient end✓ Copied

#B34400

Accent deep

--accent-deep

Active state✓ Copied

#E0EAFF

Hawkes soft

--secondary-soft

Hover on blue✓ Copied

#8DA7DB

Hawkes deep

--secondary-deep

Chart line · pressed✓ Copied

#EDE3DA

Surface alt

--surface-alt

Subtle dividers✓ Copied

#1A7A4C

Success

--color-success

Gains · positive✓ Copied

#C4320A

Error

--color-error

Loss · destructive✓ Copied

#5A5A5A

Text secondary

--text-secondary

Labels · captions✓ Copied

#8A8A8A

Text tertiary

--text-tertiary

Placeholders✓ Copied

#E2DCD7

Border

--border

Dividers · table lines✓ Copied

#F0ECE8

Border light

--border-light

Subtle separators✓ Copied

Type scale

Playfair (display) + Inter (body) + JetBrains Mono

DisplayHero only

The TAMP for alternatives

48–64px · 400 · Serif
Italic for emphasis

H1Page header

Pipeline summary

36–42px · 600 · Sans
Inter

H2Sub-section

Stage breakdown

28–32px · 500 · Sans

H3Card title

Q4 by segment

22–24px · 600 · Sans

BodyParagraph

Aqua is built for the operational, compliance, and security demands of wealth-channel alternatives.

16px · 400 · Sans
line-height 1.6

Body smallCaptions

Secondary text, table cells, helper copy.

14px · 400 · Sans

OverlineLabels

Total AUM

12px · 600 · Sans
Uppercase · 0.08em

KPI valueLarge metric

$4.7B

34–42px · 400 · Serif
Editorial KPIs

MonoData · code

--color-primary: #28020F;

14px · JetBrains Mono

Spacing

8px base unit

--space-14pxIcon padding

--space-28pxInline gaps

--space-312pxField padding

--space-416pxCard padding

--space-524pxCard gaps

--space-632pxComponent spacing

--space-848pxSection gaps

--space-1064pxMajor dividers

--space-1280pxPage sections

--space-16128pxHero padding

Buttons

always pill-shaped (border-radius: 999px)

Copy-paste CSS

drop into any new artifact

/* ── Aqua brand tokens ─────────────────────── */
:root {
  /* Brand colors */
  --color-primary:    #28020F;  /* Tamarind  */
  --color-accent:     #E35300;  /* Blaze Orange */
  --color-secondary:  #C1D6FF;  /* Hawkes Blue */
  --color-surface:    #F6EBE3;  /* Linen — page bg */
  --color-dark:       #151515;  /* Woodsmoke */
  --color-light:      #F9F9F9;  /* Alabaster */

  /* Extended */
  --surface-alt:      #EDE3DA;
  --secondary-soft:   #E0EAFF;
  --secondary-deep:   #8DA7DB;
  --accent-soft:      #FF7A33;
  --accent-deep:      #B34400;
  --text-secondary:   #5A5A5A;
  --text-tertiary:    #8A8A8A;
  --border:           #E2DCD7;
  --border-light:     #F0ECE8;
  --color-success:    #1A7A4C;
  --color-error:      #C4320A;

  /* Typography */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(21,21,21,0.04);
  --shadow-md: 0 4px 12px rgba(21,21,21,0.08);
  --shadow-lg: 0 8px 32px rgba(21,21,21,0.12);
}