# SemanticUI: an Xcode sample that shows every iOS semantic colour, text style and SF Symbol > SemanticUI is a small Swift sample app whose only job is to render the whole iOS semantic system on screen: adaptable colours in light and dark mode, the Dynamic Type text styles, and the SF Symbols catalogue. It is a reference implementation to read and run, not a library to depend on. **cocoacontrols/SemanticUI** — Understand iOS Semantic UI: Dark Mode, Colors, Dynamic Type, and SF Symbols. - Repository: https://github.com/cocoacontrols/SemanticUI - Stars: 926 · Forks: 108 - Language: Swift - License: MIT - Published: 2026-10-20 · Updated: 2026-10-20 · Language: en - Canonical page: https://hysenlabs.com/projects/cocoacontrols-semanticui ## A sample app whose entire purpose is to display the system UI vocabulary SemanticUI is a Swift sample project that visualizes iOS's semantic and adaptable colours, the preferred fonts for each text style, and the built-in icons. The Xcode project at the root of the repository is named Semantic Colors.xcodeproj, and the source sits in a matching folder. That narrow purpose is the point. Rather than demonstrating an app that happens to use semantic colours, the sample renders the whole catalogue on screen so a developer can see what each value actually produces on screen, in light mode and in dark mode, at the current system settings. The screenshots in the repository make that explicit: one of the main colour viewer in light mode, one in Dark Mode, one of the fonts viewer and one of the SF Symbols viewer. For anyone who has read Apple's documentation and still does not know what tertiarySystemFill looks like against a grouped background, that is a faster answer than the documentation itself. ## Opening the project is the whole installation step There is nothing to install here, and that is worth saying clearly rather than dressing it up as a setup guide. The repository contains no package manifest, no dependency lock file and no build script. At the top level you find a .gitignore, a CODE_OF_CONDUCT.md, a LICENSE, the README, a Screenshots folder, an Xcode project named Semantic Colors.xcodeproj and a source folder named Semantic Colors. The way to use this project is to open that Xcode project, build the scheme and run it on a simulator or a device, then switch the device appearance between light and dark and watch the colour screens change. There is no command to copy, and no configuration file to edit, because the sample has no configuration. What you take away is the mapping between a colour name and what it renders as, on your own hardware, at your own system settings. ## Why adaptable colours exist and what the sample shows about them Semantic colours automatically adapt to system settings such as Dark Mode, and the README frames the goal as a UI that stays legible. The catalogue covers adaptable colours such as systemRed, systemGreen, systemBlue, systemIndigo, systemOrange, systemPink, systemPurple, systemTeal and systemYellow. The important caveat is stated in the sample: these return named colours whose values may vary between contexts and releases, so you should not make assumptions about the colour spaces or the actual colours used. That is the single most useful line in the document for a working developer. A hard-coded hex value in a design file is a guess about a name that Apple is free to change, and the sample exists to show you what the names resolve to on the device you are holding. ## The gray scale flips direction between light and dark mode The adaptable grays are the part of the system with a real trap in it. systemGray is the base gray, and the numbered variations systemGray2 through systemGray6 increasingly trend away from systemGray and toward systemBackgroundColor. But the direction differs by interface style. In UIUserInterfaceStyleLight, systemGray1 is slightly lighter than systemGray and systemGray2 is lighter again, and so on. In UIUserInterfaceStyleDark, systemGray1 is slightly darker than systemGray and systemGray2 is darker again. So the same numbered colour moves toward the background in both cases, but the word darker and lighter inverts between the two modes. A hard-coded gray picked by eye in light mode therefore behaves differently when the device switches, and the sample renders the whole ramp so that inversion is visible rather than theoretical. ## Foreground colours, separators and fills come with usage rules attached Beyond the palette, the sample documents the rules for when each family applies. Label colours are foreground colours for static text and related elements, running from label through secondaryLabel and tertiaryLabel to quaternaryLabel, which is a good place to start when you are unsure how much emphasis a piece of text needs. Placeholder text has its own colour, and standard links have their own. Separators come in two variants with a real difference between them: separatorColor may be partially transparent so it can sit on top of any content, while opaqueSeparatorColor is guaranteed to be opaque and will completely cover whatever is behind it, so you may need one or the other depending on the situation. Fill colours are meant to sit over the background colours because their alpha component is less than 1, and they are graded by size, from systemFill for thin and small shapes such as a slider track, through secondarySystemFill for medium shapes such as a switch background and tertiarySystemFill for large shapes such as input fields, search bars and buttons, to quaternarySystemFill for large areas holding complex content such as expanded table cells. ## Two background stacks, and the advice not to mix them The background colours are organised into two stacks, and the sample is explicit about the consequences of using them wrongly. Each stack has three levels of background, with the first intended as the main background farthest back and the secondary and tertiary layered on top of it when appropriate. Stack 1 is systemBackground, meant for views with standard table views and for designs with a white primary background in light mode. Stack 2 is systemGroupedBackground, for grouped content such as grouped tables and platter based designs, and it is described as like grouped table views but usable in places where a table view would not make sense. The rule that matters is that mixing and matching background colours between the stacks is not recommended, while the foreground colours listed earlier are designed to work in both. That is the sort of convention you only learn by seeing two screens built correctly, which is what this sample is for. ## Text styles for Dynamic Type, and the sample icons The fonts section lists the font text styles, which are semantic descriptions of the intended use for a font returned by UIFont.preferredFont(forTextStyle:). The list runs from largeTitle and title1, title2 and title3 through headline, subheadline, body, callout and footnote down to caption1 and caption2. Semantic fonts are used in Dynamic Type so that font sizes scale with the user's needs, and the fonts viewer screen in the sample exists so you can see the whole ramp at the current accessibility size setting rather than guessing which style a piece of text should use. The icons screen does the same job for SF Symbols, which the README describes as a set of thousands of consistent, configurable symbols that Apple designed to integrate with the San Francisco system font, so symbols line up optically with text at every weight and size. ## MIT terms for the sample, and a separate MIT notice for the bundled symbol library The licence field for the repository is MIT. Separately, the project credits a third party library for the symbols it displays, the SFSymbols library by Richard Witherspoon, published under its own MIT licence with copyright dated 2021. Two points follow. First, the sample and the symbol catalogue are covered by separate notices, so if you lift symbol data from the bundled library you are relying on that library's terms rather than on the sample's, and the notice text travels with the code. Second, the repository has no GitHub releases at all, so there is no versioned artefact to track and the sample is consumed by opening the Xcode project. The last push to the repository was on 2026-05-18, so the code is being touched, but with no release scheme the only sensible unit of comparison is the commit you checked out. ## Conclusion SemanticUI suits an iOS developer who wants to see the semantic system rather than read about it, and who will open the Xcode project and use the screens as a checklist while choosing colours for a new interface. It does not suit a project looking for a package to install, since nothing here is packaged as a dependency, and the repository does not document a release or a versioning scheme for the sample. Before you copy anything from it, open the app in both interface styles on the device sizes you support, because the grayscale steps invert between light and dark, and check the SFSymbols library it credits under its own MIT notice rather than assuming the third-party symbols carry the same terms as the sample. ## FAQ ### What is the SemanticUI sample app for? It visualizes iOS's semantic and adaptable colours, the preferred fonts for each text style, and the built-in SF Symbols icons. The screenshots in the repository show a colour viewer in light mode and Dark Mode, a fonts viewer and a symbols viewer. ### How do the system gray colors behave in Dark Mode? systemGray is the base gray, and the numbered variations trend toward the background color in both modes, but the direction inverts. In UIUserInterfaceStyleLight systemGray1 is slightly lighter than systemGray, and in UIUserInterfaceStyleDark it is slightly darker. ### Which iOS background color should I use for a grouped table? Stack 2, the systemGroupedBackground stack, is for grouped content such as grouped tables and platter based designs. The sample advises against mixing background colours between the two stacks, while the foreground colours are designed to work in both. ### Can I use SemanticUI as a dependency in my app? It is a sample project rather than a packaged library, with an Xcode project at the root of the repository and no GitHub releases, so there is no versioned package to install. Open the project and use it as a reference for the semantic values. ## Sources - [cocoacontrols/SemanticUI on GitHub](https://github.com/cocoacontrols/SemanticUI) - [Issues](https://github.com/cocoacontrols/SemanticUI/issues) - [License: MIT](https://github.com/cocoacontrols/SemanticUI/blob/master/LICENSE) - [README](https://github.com/cocoacontrols/SemanticUI/blob/master/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/cocoacontrols-semanticui