Studio GRiDSv1.0 · Internal

Design System

Base visual da Studio GRiDS para criar experiências digitais consistentes, responsivas e memoráveis.

01

Grid

Estrutura flexível para manter alinhamento, ritmo e responsividade em todas as seções.

12-column · fluidmax 72rem

Colunas em cinza suave · gutter responsivo · alinhamento ao container principal

02

Color Palette

Studio GRiDS · Tokens

Background Dark

HEX
#050505
CMYK
C75 M68 Y65 K90
Pantone
Black 6 C

Fundo principal do site e seções escuras de destaque.

Surface Dark

HEX
#0B0B0B
CMYK
C73 M66 Y63 K88
Pantone
Black 7 C

Cards, navbar e camadas sobre o fundo escuro.

Background Light

HEX
#F4F2ED
CMYK
C3 M2 Y6 K0
Pantone
Warm Gray 1 C

Seções editoriais, contraste e respiro visual.

Text Primary

HEX
#F8F7F2
CMYK
C2 M1 Y4 K0
Pantone
11-0103 TCX

Títulos e corpo em fundos escuros.

Text Dark

HEX
#111111
CMYK
C73 M67 Y62 K87
Pantone
Black 7 C

Títulos e corpo em fundos claros.

Text Muted

HEX
#8A8A8A
CMYK
C0 M0 Y0 K46
Pantone
Cool Gray 8 C

Legendas, metadados e texto de apoio.

Border Soft

HEX
rgba(255,255,255,0.12)
CMYK
C0 M0 Y0 K0 · tint 12%
Pantone
Cool Gray 1 C · 12%

Divisórias discretas em superfícies escuras.

03

Typography

Inter — sans-serif moderna, legível e neutra para interfaces editoriais.

  • Display
    Size
    88px
    Line
    0.95
    Weight
    500

    GRiDS

  • Heading 1Inter
    Size
    64px
    Line
    1
    Weight
    500

    Heading 1

  • Heading 2Inter
    Size
    48px
    Line
    1.05
    Weight
    500

    Heading 2

  • Heading 3Inter
    Size
    32px
    Line
    1.1
    Weight
    500

    Heading 3

  • Body LargeInter
    Size
    20px
    Line
    1.5
    Weight
    400

    Texto de apoio com mais presença e legibilidade em blocos editoriais.

  • BodyInter
    Size
    16px
    Line
    1.6
    Weight
    400

    Parágrafo padrão para conteúdo, descrições e narrativa de marca.

  • CaptionInter
    Size
    13px
    Line
    1.4
    Weight
    400

    Notas, créditos e informações secundárias.

  • LabelInter
    Size
    11px
    Line
    1.2
    Weight
    500

    SEÇÃO · CATEGORIA

04

Spacing

Escala em pixels para manter ritmo vertical, respiro entre blocos e consistência entre seções.

Baseline scale4 — 128px · proportional rhythm
4
px
8
px
12
px
16
px
24
px
32
px
48
px
64
px
96
px
128
px
05

Radius

Studio GRiDS · Tokens
radius-00px

none

radius-sm8px

small

radius-md16px

medium

radius-lg24px

large

radius-full999px

full

06

Buttons

Studio GRiDS · Tokens
Dark surface
Primaryprimary
Default
Hover
Disabled
Secondarysecondary
Default
Hover
Disabled
Ghostghost
Default
Hover
Disabled
07

Components

Studio GRiDS · Tokens
Card · Project
Projeto2026

Identidade editorial

Design de marca, site e direção visual para lançamento.

Ver case→
Tag / Badge
BrandingEstratégiaNovo

Outline, tinted e filled — hierarquia por contraste, não por cor saturada.

Input · Editorial
CTA Box
Próximo passo

Vamos construir algo memorável?

Conte sobre seu projeto e retornamos em até 48 horas úteis.

Começar projeto

Resposta em 48h · Sem compromisso