Documentation

Дизайн-система

Цвет, типографика и компоненты сайта Orchid.
Живые образцы из действующих стилей.

Цвет

Сайт и документация ↗

Сайт

.theme-dark
Фон
--color-canvas
Поверхность
--color-surface
Текст
--color-ink
Вторичный
--color-ink-muted
Акцент
--color-accent
Код
--color-code

Документация

.theme-paper
Фон
--color-canvas
Поверхность
--color-surface
Текст
--color-ink
Вторичный
--color-ink-muted
Акцент
--color-accent
Код
--color-code

Семантические имена общие. Значения меняются вместе с контекстом и читаются из CSS.

Типографика

На главной ↗
Главный заголовок.display

Enhance your Laravel

Заголовок карточки.heading

Quick Start

Вводный текст.intro-text

Focus on what matters most.

Основной текстbody

Build your application with Orchid.

Подписьsmall
English / Russian

Интерфейс--font-sans

Код--font-code

Геометрия

Сетка главной ↗
Текст--space-2
Короткие отступы и меню
Базовый--space-4
Абзацы и шапка
Сетка--space-5
Карточки и баннер
Компонент--space-7
Внутренний отступ карточки
Карточка --radius-card
Шапка --radius-header
Контейнер --measure-shell
Тень карточки --shadow-card

Действия

В сообществе ↗
Documentation
Кнопка-ссылка.button
Join the community
Текстовое действие.action

Tab — перейти к действию. Enter — открыть. Поиск документации работает в общей шапке сайта.

Фокус --focus-width
Отклик --duration-feedback

Карточки

На главной ↗

Quick Start

Orchid ship with the necessary technical documentation and examples for a quick and successful implementation

Documentation

Документация

Страница Screens ↗

Светлая область чтения: меню, примечание, код и таблица. Нажмите на изображение для увеличения; Escape закрывает просмотр.

Screens

Screens are responsible for displaying information and processing user actions. Each screen has a query() method and a layout() method.

A screen describes the data and layout of a page.

public function query(): array
{
    return ['name' => 'Orchid'];
}

Screen methods

MethodPurpose
query()Prepare the data.
layout()Define the page layout.
Orchid administration screen

Бренд

На главной ↗

Логотип/img/next/logo-full.svg

Say goodbye

Фирменный градиент.text-accent · --gradient-accent