Skip to content

Design

The theme applies the ISCC brand to the modern Material design of Zensical. The colors, fonts and logos come from the ISCC brand assets.

Schemes

Scheme Canvas Text Fields and code Links
Light Paper Near-black White, with thin rules Blue
Dark Near-black Paper Graphite, with thin rules Sky Blue

Readers change the scheme with the sun and moon button. On the first visit, the site uses the scheme of the operating system.

The header is the same in both schemes: Deep Navy with a grain texture, 72px high, with controls in 78% white.

  • The header starts with the project logo in white and coral, at a symbol height of 24px.
  • The page title, which replaces the site name when the page scrolls, sits on the baseline of the logo letters.
  • The header content aligns with the columns below. The logo starts at the coral marker of the navigation. The search field ends at the right edge of the content column. The repository icon is above the text of the table of contents.
  • Without a project logo, the header shows the plain ISCC logo and the site name in spaced Light capitals. On phones, it shows only the logo.

The footer bar is one row, Deep Navy with a grain texture like the header, and 52px high. Its ends align with the ends of the header.

  • On the left: the white ISCC logo, the copyright text of the site and "Made with Zensical".
  • On the right: the links that all ISCC sites share (ISCC Foundation, Privacy Policy, Imprint, CC BY 4.0), then the social links of the site from [[project.extra.social]] and the LinkedIn and X pages of the ISCC Foundation.
  • Links and icons are 78% white. On hover and focus, they are white.
  • On narrow screens, the row wraps.

Color roles

  • Blue is the link color.
  • Coral marks the chevron of the primary button, the current page in the navigation, the current site in the "Projects" menu, selected text and the circle in the logo.
  • Text is never on a coral background. The only exception is the iscc.ai chat button.
  • Each admonition type has a color: note and info are Sky Blue, tip and success are Lime, warning is Yellow, danger is Coral. In the dark scheme, admonitions have a colored left line and title, not a colored background.
  • An ISCC-UNIT label always shows the unit name with its color.

Type

  • Body text is Readex Pro Light at 16px on all screen widths.
  • The lead paragraph has the same weight and a larger size, 1.2em.
  • Lines of running text stop at about 75 characters. Tables, code and cards use the full width of the column.
  • Table headers, section labels and the previous and next labels in the footer use small JetBrains Mono capitals.

Buttons

The buttons follow the ISCC button design: JetBrains Mono capitals, 46px high.

  • Primary: a near-black block with a pointed end, a white label and a coral chevron. The chevron moves on hover. In the dark scheme, the block is white with a near-black label.
  • Secondary: an outline of 1.5px in the text color.

Components shows both.

Motion

Transitions take 160 ms, with ease-out. They are off when the reader sets prefers-reduced-motion.