Shapes

The Aimeko design system — a living style guide rendered directly from element/ markdown definitions.

Colors

color-* · element/color/

Brand Black#000000

Brand Main#1a0002

Brand Main Light#3a2026

Brand Highlight#ff5e6c

Success#00C46A

Warning#FBBF24

Error#EF4444

Neutral 0#FFFFFF

Neutral 1#E5E5E5

Neutral 2#2A2F33

Neutral 3#0D0F10

H1 Display

typography-h1 · element/typography/h1.md

references: typography-heading inherits: color-brand-black

Shapes

Font family: references typography-heading (Montserrat)
Size: 128px / line-height 0.9 (115.2px)
Weight: 900
Letter spacing: -3.2px
Transform: uppercase
Color: inherited from color-brand-black (#000000)
Margin bottom: 16px · smoothing: antialiased

Heading Text

typography-heading · element/typography/heading.md

The quick brown fox jumps over the lazy dog.

Font family: Montserrat, system-ui, sans-serif
Usage: headings, titles, UI labels, buttons
Weight: 600 / 700

Body Text

typography-body · element/typography/body.md

The quick brown fox jumps over the lazy dog.

Font family: Georgia, 'Times New Roman', serif
Size: 16px / line-height 1.5
Weight: 400
Color: color-neutral-3 (#0D0F10)

Primary Button

component-button-primary · element/component/button-primary.md

inherits: color-brand-highlight references: typography-heading

Background: inherited from color-brand-highlight (#ff5e6c)
Label font: references typography-heading (Montserrat, weight 600, 15px)
Padding: 10px 20px
Border radius: 8px
Hover: background darkened 8%

Card

component-card · element/component/card.md

inherits: color-brand-main inherits: color-neutral-0

Card container

A hard-edged surface with a 4px border and an 8px offset shadow in Brand Main.

Border radius: 0
Border: 4px solid — color inherited from color-brand-main (#1a0002)
Shadow: 8px 8px 0 0 using color-brand-main (#1a0002)
Background: inherited from color-neutral-0 (#FFFFFF)