Sistema de diseño

Sistema visual de La Religión Pura.

Referencia de colores, tipografía, componentes y movimiento basada en blanco puro, plata, grafito y texto gris oscuro.

01 · Fundamentos

Una paleta serena y coherente

El blanco y la plata construyen la interfaz. El grafito guía la interacción; el burdeos se reserva para el contenido semántico de aḥādīth.

Marfil cálido

#F4F1EA

Fondo secundario

#FAF9F6

Superficie

#FFFFFF

Plata

#BFC1C3

Plata profunda

#74777A

Grafito interactivo

#1D2229

Texto

#3A3A3A

Grafito coránico

#1D2229

Burdeos

#7A1F35

Bronce tenue

#856525

Texto secundario

#5F5F5B
14 / 22 / 34 / 46 px

Radios

Cuatro escalas para controles, tarjetas, paneles y marcos.

1600 px

Contenedor

Un entorno editorial amplio con una anchura de contenido controlada.

780 px

Columna de lectura

Una medida cómoda para textos extensos en español.

1200 px

Perspectiva

Profundidad sutil para elementos de interfaz seleccionados.

02 · Tipografía

Tipografías y funciones

Manrope se usa en encabezados, Source Sans 3 en la interfaz, Public Sans en los artículos y XB Niloofar en el texto árabe.

Manrope

Artículos y recursos en español.

Source Sans 3

Una interfaz directa y legible para orientarse y buscar.

Public Sans

Texto de artículo con una anchura de lectura limitada.

XB Niloofar

العلم النافع والعمل الصالح

03 · Superficies

Vidrio y sombras

El desenfoque se limita a las capas flotantes y a los paneles de orientación que realmente necesitan profundidad.

Liquid glass

Transparencia, borde blanco y desenfoque suave sin debilitar el texto.

Tarjeta elevada

Una base blanca, un borde fino y una sombra que gana profundidad al interactuar.

Acento plateado

Reservado para detalles gráficos pequeños, líneas y formas abstractas.

04 · Componentes

Controles y estados

Las áreas táctiles son amplias, el foco permanece visible y cada estado se comunica también mediante texto.

Etiquetas

Creencia8 minPublicado

Búsqueda

05 · Lectura

Tipografía de artículos y RTL

La columna de lectura mantiene una anchura máxima y no utiliza movimiento continuo.

Encabezado de sección

Este texto de muestra presenta la medida de lectura, el interlineado, los enlaces y los separadores neutros del nuevo sistema.

Ejemplo de bloque de cita dentro de un artículo.

Texto de muestra para la pregunta original.

Texto de muestra para el comienzo de la respuesta original.

﴾Muestra tipográfica sin contenido religioso﴿1

« Muestra tipográfica sin contenido religioso »2

« Muestra tipográfica para un āthār »

Fuente existente del artículo

« Muestra tipográfica para una cita de un sabio »

Fuente existente del artículo

  1. Fuente del Qur'ān existente del artículo.
  2. Fuente del ḥadīth existente del artículo.

06 · Composición editorial

Jerarquía de contenidos

Una entrada destacada, dos lecturas secundarias y un grid regular basado exclusivamente en tipografía editorial.

07 · Movimiento

Movimiento de la interfaz

El contenido esencial siempre es visible desde el HTML inicial. El movimiento solo mejora interacciones puntuales y nunca controla la legibilidad.

Render inicial

Toda la información esencial se muestra antes de la hidratación y sin depender del scroll.

Inclinación

Un grado como máximo en tarjetas adecuadas para escritorio.

Movimiento reducido

Sin paralaje, bucles ni transformaciones que dificulten la orientación.

Foco

Un anillo de grafito permanece visible con independencia del estado hover.

Volver al inicio