Raycast design.md
O brilho de um launcher numa sala quase preta, cortado por um vermelho
Cara de app nativo na web: fundo quase preto, Inter branca em peso médio, cinzas feitos de branco com opacidade e um botão cinza-claro com jeito de tecla como única ação. O vermelho da Raycast aparece nos feixes de luz do topo, no logo e em pequenos rótulos; as janelas do produto flutuam em molduras de vidro com sombra funda.
O que o “Usar no meu projeto” copia
Baixe https://faundr.dev/resources/design-md/raycast/DESIGN.md e salve como design.md na raiz do projeto. É um guia de design inspirado em Raycast, medido do site deles: siga as cores, fontes, cantos e componentes dele em toda tela que criar ou mudar. Onde ele usar uma fonte paga, use a alternativa grátis que o arquivo indica.
A página real
Capturada de raycast.com em inglês, com 1440 px de largura.
Cores
Clique numa cor para copiar. O papel de cada uma está em inglês, como no arquivo.
Fontes e forma
Inter
Alternativa grátis: Inter (Google Fonts, free; it is the original)
GeistMono
Alternativa grátis: Geist Mono 400 (Google Fonts)
| Papel | Tamanho | Peso | Espaço |
|---|---|---|---|
| display | 64px | 600 | 0 |
| heading | 32px | 500 | -0.8px |
| heading-sm | 24px | 500 | 0.2px |
| section-title | 20px | 500 | 0.2px |
| body-lg | 18px | 400 | 0.18px |
| body | 16px | 500 | 0 |
| button | 14px | 500 | 0.2px |
| caption | 13px | 400 | 0.1px |
- tags
- 1000px
- cards
- 20px
- inputs
- 8px
- buttons
- 8px
Os arquivos
Carregando…
Prints e medidas tirados pelo Faundr de raycast.com, para referência. Inspirado em Raycast, não é o design system oficial; o Faundr não tem ligação com Raycast, e o nome e as marcas são dela.
Faundr
Design.md só funciona se alguém confere.
O Faundr lê o seu design.md e confere cada tela que a IA mexe: cor fora do guia, componente refeito, menu cortado, celular quebrado.
