Figma to Project

Studio Maura Styleguide

Tämän sivun tarkoitus on ankkuroida Figma-styleguiden foundation suoraan Astro-projektiin: väri-tokenit, typografia, spacing ja grid-ajattelu elävät nyt samassa paikassa.

Fraunces headings Inter body text Brand and state colors Desktop + mobile scales

01. Colors

Brand Colors

Primary palette, text colors and semantic states from the Figma styleguide.

Primary

#CEDEFD

Secondary

#ECE59E

Secondary Dark

#71650B

Accent

#FFCAE0

Accent Strong

#D53A0B

Background

#FFFEFB

Headings

#3B2115

Body Text

#2F2A26

02. States

Feedback Colors

Info

#2F80ED

Success

#27AE60

Warning

#FFC943

Error

#EB5757

03. Neutrals

Neutral Scale

Gray 1

#333333

Gray 2

#4F4F4F

Gray 3

#828282

Gray 4

#BDBDBD

Gray 5

#E0E0E0

Black

#000000

Black 2

#1D1D1D

White

#FFFFFF

04. Typography

Heading Scale

Headings use Fraunces. CSS variables swap to the mobile values automatically on smaller screens.

Name Font size Line height

Heading 1

Fraunces statement

88px / 5.5rem 89.3px

Heading 2

Fraunces section title

48px / 3rem 55.6px

Heading 3

Fraunces subsection

32px / 2rem 38.4px

Heading 4

Fraunces support heading

28px / 1.75rem 33.6px

Heading 5

Fraunces compact heading

24px / 1.5rem 28.8px

Heading 6

Fraunces small heading

20px / 1.25rem 24px

05. Body Text

Inter Text Styles

Name Font size Line height

Large text

Inter large regular for lead paragraphs and hero copy.

20px / 1.25rem 28px

Medium text

Inter medium regular for denser supporting text.

18px / 1.125rem 22px

Normal text

Inter normal regular for body text, labels and default content.

16px / 1rem 24-25.6px

Small text

Inter small regular for captions, metadata and helper copy.

14px / 0.875rem 16.8-21px

06. Spacing

Spacing Tokens

Desktop scale

8px16px24px32px40px56px72px80px96px120px

Mobile scale

8px14px18px24px30px42px54px60px72px90px

07. Grid

Grid Presets

Grid data is documented here so future layouts can reuse the same breakpoint logic.

Desktop 1440

12 columns, margin 64px, gutter 24px

Desktop 1024

12 columns, margin 64px, gutter 24px

Tablet 768

8 columns, margin 16px, gutter 16px

Mobile 320

4 columns, margin 16px, gutter 16px

08. Buttons

Foundation Actions

Base and raspberry button styles, plus the existing arrow link pattern.

Peruspainike Raspberry painike Outline painike Lue lisää Tutustu palveluihin